jQuery UI Widgets Forums Grid Date filter by year

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 10 years, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Date filter by year #51700

    kakao
    Participant

    Hello!
    I need some trick to filter by year not using grid filter .
    I have loaded grid from json. In json date format is like yyyy-mm-dd. Of course, I have teach to grid show different format. For example, 2 datafields and columns:

    
    { name: 'date_from', type: 'date', format: 'dd.MM.yyyy' },
    { name: 'date_to', type: 'date', format: 'dd.MM.yyyy' }
    
    { text: 'Date from', datafield: 'date_from', filterable: false, cellsformat: 'dd.MM.yyyy', width:'9%' },
    { text: 'Date to', filterable: false, datafield: 'date_to', cellsformat: 'dd.MM.yyyy', width:'9%' }
    

    Grid shows date in normal format, but under that there are that default jqxGrid format, like Tue Jan 01 2013 02:00:00 GMT+0200 (FLE Standard Time).
    I have created input field output grid witg id=”fdate” and filter like this example:
    `
    $(“#btn23”).click(function () {
    $(“#jqxgrid”).jqxGrid(‘clearfilters’);
    var datafield = “date_from”;
    var searchText = $(“#fdate”).val();
    var filtergroup = new $.jqx.filter();
    var filter_or_operator = 0;
    var filtervalue = searchText;
    var filtercondition = ‘contains’;
    var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
    filtergroup.addfilter(filter_or_operator, filter);
    $(“#jqxgrid”).jqxGrid(‘addfilter’, datafield, filtergroup);
    // apply the filters.
    $(“#jqxgrid”).jqxGrid(‘applyfilters’);
    });
    `
    The records ar being filtered by all date values, including month, day name etc.
    How to make to filter just by Tue Jan 01 2013 02:00:00 GMT+0200 – year?

    • This topic was modified 10 years, 2 months ago by  kakao.
    Date filter by year #51821

    Dimitar
    Participant

    Hello kakao,

    Here is an example, that shows how to filter by year:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var data = generatedata(500);
                var source =
                {
                    localdata: data,
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'date', type: 'date' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' }
                    ],
                    datatype: "array"
                };
    
                var addfilter = function () {
                    var filtergroup = new $.jqx.filter();
    
                    var filter_or_operator = 0;
                    var filtervalue = new Date(2014, 00, 01);
                    var filtercondition = 'GREATER_THAN_OR_EQUAL';
                    var filter1 = filtergroup.createfilter('datefilter', filtervalue, filtercondition);
    
                    filtervalue = new Date(2015, 00, 01);
                    filtercondition = 'LESS_THAN';
                    var filter2 = filtergroup.createfilter('datefilter', filtervalue, filtercondition);
    
                    filtergroup.addfilter(filter_or_operator, filter1);
                    filtergroup.addfilter(filter_or_operator, filter2);
                    // add the filters.
                    $("#jqxgrid").jqxGrid('addfilter', 'date', filtergroup);
                    // apply the filters.
                    $("#jqxgrid").jqxGrid('applyfilters');
                }
                var adapter = new $.jqx.dataAdapter(source);
    
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    source: adapter,
                    filterable: true,
                    sortable: true,
                    ready: function () {
                        addfilter();
                    },
                    autoshowfiltericon: true,
                    columns: [
                      { text: 'First Name', datafield: 'firstname', width: 160 },
                      { text: 'Last Name', datafield: 'lastname', width: 160 },
                      { text: 'Product', datafield: 'productname', width: 170 },
                      { text: 'Order Date', datafield: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' },
                      { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                      { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                    ]
                });
    
                $('#events').jqxPanel({ width: 300, height: 80 });
    
                $("#jqxgrid").on("filter", function (event) {
                    $("#events").jqxPanel('clearcontent');
                    var filterinfo = $("#jqxgrid").jqxGrid('getfilterinformation');
    
                    var eventData = "Triggered 'filter' event";
                    for (i = 0; i < filterinfo.length; i++) {
                        var eventData = "Filter Column: " + filterinfo[i].filtercolumntext;
                        $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
                    }
                });
    
                $('#clearfilteringbutton').jqxButton({ height: 25 });
                $('#filterbackground').jqxCheckBox({ checked: true, height: 25 });
                $('#filtericons').jqxCheckBox({ checked: false, height: 25 });
                // clear the filtering.
                $('#clearfilteringbutton').click(function () {
                    $("#jqxgrid").jqxGrid('clearfilters');
                });
                // show/hide filter background
                $('#filterbackground').on('change', function (event) {
                    $("#jqxgrid").jqxGrid({ showfiltercolumnbackground: event.args.checked });
                });
                // show/hide filter icons
                $('#filtericons').on('change', function (event) {
                    $("#jqxgrid").jqxGrid({ autoshowfiltericon: !event.args.checked });
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            </div>
            <div id="eventslog" style="margin-top: 30px;">
                <div style="width: 200px; float: left; margin-right: 10px;">
                    <input value="Remove Filter" id="clearfilteringbutton" type="button" />
                    <div style="margin-top: 10px;" id='filterbackground'>
                        Filter Background</div>
                    <div style="margin-top: 10px;" id='filtericons'>
                        Show All Filter Icons</div>
                </div>
                <div style="float: left;">
                    Event Log:
                    <div style="border: none;" id="events">
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.