Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
70
Programmatically Filtering By Date
posted
When I'm programmatically filtering by a date column, the grid subtracts one day from my filter. So if I want to filter the grid for with Date 12/13/2018 it actually filters by 12/12/2018. Is there a way to stop this from happening without having to add an extra day before doing the filter?
Here is an example of code we are using for programmatically filter the date:
$("#grid").igGridFiltering("filter", [{'fieldName': 'dateColumn': 'expr': '12/13/2018', 'conditon': 'on'}]);
  • 70
    Offline posted

    I think I should elaborate on the issue I am having. I built a minimal viable product to test the filtering, and this works as it should:

    <div class="container">
        <button type="button" id="clearFilter">Clear</button>
        <button type="button" id="filterByDate">Filter by 12/05/2018</button>
        <table id="grid"></table>
    </div>
    <script>
        $('#grid').igGrid({
            columns: [
                {headerText: 'Date', key: 'date', dataType: 'date'}
            ],
            dataSource: [
                { 'date': '12-01-2018' },
                { 'date': '12-01-2018' },
                { 'date': '12-02-2018' },
                { 'date': '12-03-2018' },
                { 'date': '12-04-2018' },
                { 'date': '12-05-2018' },
                { 'date': '12-05-2018' },
                { 'date': '12-06-2018' },
                { 'date': '12-07-2018' },
                { 'date': '12-08-2018' }
            ],
            features: [
                {'name': 'Filtering'}
            ],
            rendered: function (evt, ui) {
                $('#filterByDate').click(function () {
                    $("#grid").igGridFiltering("filter", [{ fieldName: 'date', expr: '12/05/2018', cond: 'on' }]);
                });
    
                $('#clearFilter').click(function () {
                    $("#grid").igGridFiltering("filter", []);
                });
            }
        });
    </script>

    This leads me to believe the issues might caused by the timezones, but I am skeptical.

    So basically, our dataset includes data being sent from China (our users are from US East Coast). We have set up our application so users can create and save filters for the future. It is possible that the data from China is in that timezone, and when our users are creating the filter, that timezone is in the US, thus creating a conflict between the two. However, at no point are the dates ever associated with a specific time zone. 

    This date is an exact value from the dataset in my database:   2018-12-13 12:22:07.000

    Note that there is not timezone associated with the datetime here.

    This json is stored as an nvarchar in my database. It is an exact value that exists right now that represents a filter I have created:

    {
        "BookingNo": [],
        "DateReceived": [
            "2018-12-13"
        ],
        "Status": [],
        "AgentConsignee": [],
        "ShipperName": [],
        "BookingSender": [],
        "BookingDest": [],
        "TransportMode": [],
        "FileNumber": [],
        "ShipmentConfirmed": [],
        "ExceptionNote": [],
        "AssignedCoord": [],
        "Branch": [],
        "LastUpdated": [],
        "ISFAttached": []
    }

    Again, note that there is not a timezone associated with the date in the DateRecieved field.

    When the dataset is retrieved from the database to .NET, the Date Received field is stored in our model as a string, so .NET for sure is not assigning a timezone to the date, the same goes for the filter. We then pass the data from the .NET backend to our Ignite UI for Javascript set up on the front end. This is where we build the grid, using Ignite for Javascript.

    I have observed the following behavior when explicitly setting the dateDisplayType:

    • When LOCAL: 12/13/2018 filter populates as 12/12/2018 and shows dates for 12/12/2018
    • When UTC: 12/13/2018 filter populates as 12/13/2018 but shows dates for 12/12/2018