jQuery UI Widgets Forums Grid Sorting and filtering DateTime Column

This topic contains 5 replies, has 3 voices, and was last updated by  Dimitar 6 years, 11 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Sorting and filtering DateTime Column #63234


    I’m trying to filter and sort a DateTime column using the built-in column filter at the top as well as getting them to sort.

    Currently the dates are properly displayed (Sep-30 2014 00:00), but the filter doesn’t show anything when I type in ‘Sep’. Further more, when I click the column, it sorts it alphabetically rather than chronologically.

    Here’s what I currently I have:

    var dataSource = {
    datatype: “json”,
    datafields: [
    // fields that are Dto fields
    { name: ‘lastUpdated’, type: ‘date’},
    … more
    processdata: function(data) {
    data.pagesize = 25;
    localdata: localData

    var dataAdapter = new $.jqx.dataAdapter(dataSource, { autoBind: true } );

    source: dataAdapter,
    filterable: true,
    showfilterrow: true,
    width: ‘99.5%’,
    theme: ‘classic’,
    enablebrowserselection: true,
    pagesizeoptions: [’25’, ’50’, ‘100’],
    pagesize: 25,
    pageable: true,
    sortable: true,
    autoheight: true,
    autorowheight: true,
    showfilterrow: true,
    columnsresize: true,
    columnsreorder: true,
    columns: [
    {text: “my column” />”, datafield: “lastUpdated”, width: ‘10%’, hidden: true, cellsformat: dateTimeFormat},
    …more columns

    lastUpdated is from the Java frontend which is a Json-ified Long ( java.util.Date.getTime() )

    I have a JavaScript function that converts that displayed string to a sortable form

    * This function converts a String in the default date format (MMM-dd-yyyy HH:mm)
    * to YYYY-MM-DD HH:mm format, which can be used for sorting dates.
    function convertDateToSortableFormat(inputDate) {


    Any help would be greatly appreciated, thanks!

    Sorting and filtering DateTime Column #63251


    Hello arossol,

    For date columns, please use filtertype “range” or “date”. Here is a demo about these options: Date & Range Filter.

    Best Regards,

    jQWidgets team

    Sorting and filtering DateTime Column #63319


    Hi Dimitar,

    Is there any way to do this with the existing display format?



    Sorting and filtering DateTime Column #63331


    Hi Alex,

    As shown in the demo, the filter widget (jqxDateTimeInput) has the same format as the one specified for the cells.

    Best Regards,

    jQWidgets team



    I’ve tried 2 methods to get our column dropdown filter dialog to contain a date range picker and have had no luck with either.

    First I tried to use the jqxDateTimeInput (range type) within the column dropdown filter using the build in filtertype option. In a column options I set the {filtertype: ‘range’} and the dropdown filter shows the text input with no datepicker. If I set it to {filtertype: ‘date’} it works which is not what we were aiming for.

    Second option was to make a custom filter {filtertype: ‘custom’, createfilterpanel: (datafield, filterPanel) => {/* my custom code */}. I successfully created date range picker that provides the range selector as expected. The issue is that when the range picker shows and I’ve clicked on it, due to the fact it’s rendered outside the dropdown filter, it closes the dropdown filter with the date range selector still visible and of course it then won’t take the selection since the filter has been closed.

    Is there some way to force the dropdown filter to stay open until I programmatically tell it to close?



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

You must be logged in to reply to this topic.