bp:GridViewDateTimeColumn Filter is Buggy

[thatdbme]

The filter for a bp:GridViewDateTimeColumn is not working as users would expect.

DotVVM.BusinessPack version 4.2.0

I have identified the following issues in my testing of filtering on date columns.

1. Clicking a date in the calendar does not select the date.
   • You must use the Tab key or Enter key to apply the selected date the first time.
   • Once you've done that, changing the date works by simply clicking a different date in the calendar.
2. Due to issue 1, it is not possible to select any date for filtering while on a mobile device.
3. Clicking inside the date textbox does not open the calendar, you must click the little icon to open the calendar.
   • Clicking in the textbox does let you type a date (strangely, user must still format it correctly for it to work).
   • I would expect that the calendar would open on click of the textbox and the cursor would stay in the textbox. This is the behavior when clicking the icon.
4. Using the calendar to select a filter date returns the selected date set at the current hour of the day instead of midnight on the selected date.
   • Typing a date into the textbox returns the date set at midnight, as you'd expect.

Note, I also found an issue with bool/checkbox filtering. I will create a separate issue for that one.

Demonstration Page

dothtml

<p>This page tests filtering on the bp:GridView.</p>
<p>
    It is based on
    <a href="https://www.dotvvm.com/docs/4.0/controls/businesspack/GridView#sample13" target="_blank">Sample 13</a> in the documentation.
    However it includes the following modifications:
    <ol>
        <li>Replaced the "Has premium support" column with "bool filter but can be used" with normal bool filtering as there is no way to use the original column filter.</li>
        <li>Marked some "HasPremimumSupport" values as true so filtering has records to operate on.</li>
        <li>Included the "Birthdate" column in the grid with normal date filtering.</li>
        <li>Removed the "Number of orders" column.</li>
    </ol>
</p>
<p>
    Note the following issues found with filtering on the bp:GridView:
    <ol>
        <li>
            Date Filtering - Clicking a date in the calendar does not select the date.<br />
            You must use the Tab key or Enter key to apply the selected date the first time.<br />
            Once you've done that, changing the date works by simply clicking a different date.
        </li>
        <li>
            Date Filtering - Due the above issue, it is not possible to select a date for filtering on a mobile device.
        </li>
        <li>
            Date Filtering - Clicking inside the date text box does not open the calendar for easy use.<br />
            You must click the little icon.
        </li>
        <li>
            Date Filtering - Using the calendar to select a date returns that date set at the current hour of the day instead of midnight on that date.<br />
            Typing the date returns midnight, as you'd expect.<br />
        </li>
        <li>
            Bool Filtering - After selecting either "Is checked" or "Is not checked", there is no way to clear that filter.<br />
            Clicking the provided clearing X does not work. You must refresh the page to get rid of it.
        </li>
    </ol>
</p>

<bp:GridView DataSource="{value: Customers}"
             FilterPlacement="SeparateHeaderRow">
    <!-- This will only allow Starts with and Ends with operators on all columns with string values in them. -->
    <StringOperators>
        <op:StartsWithOperator DisplayName="Starts with" />
        <op:EndsWithOperator DisplayName="Ends with" />
    </StringOperators>
    <Columns>
        <!-- This column will use filtering operators specified in the GridView StringOperators collection above -->
        <bp:GridViewTextColumn Value="{value: Name}"
                               HeaderText="Name"
                               AllowFiltering />
        
        <!-- This column will use filtering operators specified in the GridView BooleanOperators collection -->
        <bp:GridViewCheckBoxColumn Value="{value: HasPremiumSupport}"
                                   HeaderText="bool filter but can be used"
                                   AllowFiltering />

        <bp:GridViewDateTimeColumn Value="{value: BirthDate}"
                                   FormatString="MM/dd/yyyy"
                                   HeaderText="Birthdate"
                                   AllowFiltering />
    </Columns>
</bp:GridView>

view model

public class FilterTest2ViewModel : DotvvmViewModelBase
{
    public BusinessPackDataSet<Customer> Customers { get; set; } = new BusinessPackDataSet<Customer>
    {
        PagingOptions = { /*PageSize = 10 */}
    };

    public string OrderFilter { get; set; }

    public override Task PreRender()
    {
        // refresh data
        if (Customers.IsRefreshRequired)
        {
            Customers.LoadFromQueryable(GetQueryable(24));
        }

        return base.PreRender();
    }

    private IQueryable<Customer> GetQueryable(int size)
    {
        var numbers = new List<Customer>();
        for (var i = 0; i < size; i++)
        {
            numbers.Add(new Customer
            {
                Id = i + 1, 
                Name = $"Customer {i + 1}", 
                BirthDate = DateTime.Now.AddYears(-i), 
                Orders = i,
                HasPremiumSupport = (i % 2.5) > 1
            });
        }
        return numbers.AsQueryable();
    }


    #region Helper Classes

    public class Customer
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string LastName => !string.IsNullOrWhiteSpace(Name) ? Name.Split(' ').LastOrDefault() : "";
        public DateTime BirthDate { get; set; }
        public int Orders { get; set; }
        public bool HasPremiumSupport { get; set; }
    }

    #endregion Helper Classes
}