Date filter by year - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: date, datefilter, filter, grid, jqxgrid, textbox, year

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

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

Author

Date filter by year Posts

March 24, 2014 at 8:13 am 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?

March 25, 2014 at 8:19 am 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/

Author

Posts

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

You must be logged in to reply to this topic.