[ANGULAR] when the date filter is selected from the grid example, why it's showing 01/01/2012 and how to format it prope

[mogo]

when you set the features as filter :true as the code below

features: {
filterBar: true,
stripe: true,
filter: true,
quickFind: true,
search: true,
sort: new Date(),
columnPicker: true,
},
data: [

CODE: SELECT ALL

            {
                text: 'Delivery Date',
                flex: 1,
                type: 'date',
                field: 'deliveryDate',
                format: 'DD/MM/YYYY',
                hidden: containerGridColumns.deliveryDate, 
               
                filterable: {
                    filterFn: ({ value, record }) => {
                        console.log(containerScheduler.eventStore);
                        var date1 = new Date(value);
                        var date2 = new Date(record.deliveryDate);
                        return date1.valueOf() == date2.valueOf();
                    }
                },
]

then you get the date filter on your column. there are on, before and after. When you select any of the options and select the right date which is today it becomes 01/01/1200.

Is there any way to format it somewhere? or get the right value? documentation doesn't help at all.

[Maxim Gorkovsky]

Hello.
What do you want to achieve using this config? Features accept boolean flag to enable/disable or config object.

sort: new Date(),

Sort feature also accepts field name to sort records by. https://www.bryntum.com/docs/scheduler/#Grid/feature/Sort

When you select any of the options and select the right date which is today it becomes 01/01/1200.

Similar things happen when date string is passed to method which expects Date instance.

I cannot reproduce this issue on angular demo. Could you provide a runnable test case? You can modify one of our angular demos and upload here.

[mogo]

When you select any of the options and select the right date which is today it becomes 01/01/1200.

I just added 'filter: true' in the 'feature'.

Thank you for your answer. if you see the click any date on the icon next to sort, Then you can see 'on before and after'. How do I manipulate that? is there any way this is 'on' date or 'after' date. Why before and after are not applied at the same time? If you choose 'before' date, then windows closes so you cannot select both, 'before' and 'after'. Thank you for looking into this.

 
import { WidgetHelper, Grid, DataGenerator } from '../../build/grid.module.js?443216';
import shared from '../_shared/shared.module.js?443216';

WidgetHelper.append([
    {
        type     : 'button',
        ref      : 'removeAll',
        cls      : 'b-orange b-raised',
        style    : 'inverted',
        icon     : 'b-fa b-fa-times',
        tooltip  : 'Remove all filters',
        onAction : () => grid.store.clearFilters()
    }
], { insertFirst : document.getElementById('tools') || document.body });

const cityCombo = {
    type        : 'combo',
    multiSelect : true,
    items       : DataGenerator.cities
};

let grid = new Grid({
    adopt : 'container',

minHeight : '20em',

features : {
    filterBar : { filter : { property : 'city', value : 'Paris' } },
    stripe    : true,
    quickFind : true,
    filter:true,
},

columns : [
    {
        text  : 'Name (custom)',
        field : 'name',
        width : 150,
        // This column has a custom filtering function that matches the first letter in each word (JBA -> John B Adams)
        filterable({ value, record }) {
            const matches = record.name.match(/\b(\w)/g);
            return matches ? matches.join('').startsWith(value) : false;
        }
    },
    { text : 'Age', field : 'age', width : 100, type : 'number' },
    {
        text       : 'City',
        field      : 'city',
        flex       : 1,
        editor     : cityCombo,
        filterable : {
            filterField : cityCombo,
            filterFn    : ({ record, value }) => !value.length || value.includes(record.city)
        }
    },
    { text : 'When', field : 'start', flex : 1, type : 'date' },
    // This column has filtering turned off
    { text : 'Team (not filterable)', field : 'team', flex : 1, filterable : false }
],

data : DataGenerator.generateData(100)
});
 

[alex.l]

Hi mogo,

There is no way to fill in more than 1 field in one time now. But we have a feature request for that and it will be added soon: https://github.com/bryntum/support/issues/1222

All best,
Alex

[mogo]

All best,
Alex

But this is not explaining why i am getting 01/01/2012 even if I set 'sort: new Date()' when you select a date filter from 'on, before and after'. How can I get the right date format from selecting date filter?

[alex.l]

Hi mogo,

As Maxim mentioned in his response above, the features configuration supports Boolean or name of a column, or Object with some advanced configuration. You cannot pass the Date into the features config. What do you want to achieve using sort: new Date()?
Please, check documentation https://www.bryntum.com/docs/scheduler/#Grid/feature/Sort

All best,
Alex

[mogo]

Hi mogo,

As Maxim mentioned in his response above, the features configuration supports Boolean or name of a column, or Object with some advanced configuration. You cannot pass the Date into the features config. What do you want to achieve using sort: new Date()?
Please, check documentation https://www.bryntum.com/docs/scheduler/#Grid/feature/Sort

All best,
Alex

What i want to achieve is filtering by date filter. When you click the cone icon on the header of the colum, then you can select date by 'on after before'. When I select any date by clicking the date filter right there. I get '1/1/2012'.

[alex.l]

Did you check the example? https://bryntum.com/examples/grid/filtering/

[mogo]

Did you check the example? https://bryntum.com/examples/grid/filtering/

Two images down below.
Can you please check?
https://ibb.co/bJxTGhj

https://ibb.co/VL7f7Ln

Can you please try to execute this code? I just added 'filterBar:true'. Then you see the filter bar right?
I will show you the image. This image might explain better. I am really sorry to be pain.

import { WidgetHelper, Grid, DataGenerator } from '../../build/grid.module.js?443216';
import shared from '../_shared/shared.module.js?443216';

WidgetHelper.append([
    {
        type     : 'button',
        ref      : 'removeAll',
        color    : 'b-orange b-raised',
        style    : 'inverted',
        icon     : 'b-fa b-fa-times',
        tooltip  : 'Remove all filters',
        onAction : () => grid.store.clearFilters()
    }
], { insertFirst : document.getElementById('tools') || document.body });

let grid = new Grid({

adopt : 'container',

minHeight : '20em',

features : {
    filter    : { property : 'city', value : 'Paris' },
    stripe    : true,
    quickFind : true,
    filterBar:true
},

columns : [
    { type : 'rownumber' },
    {
        text       : 'Name (custom)',
        field      : 'name',
        width      : 150,
        // This column has a custom filtering function that matches whole words
        filterable : ({ value, record }) => Boolean(record.name.match(new RegExp(`${value}\\b`)))
    },
    { text : 'Age', field : 'age', width : 100, type : 'number', filterType : 'number' },
    { text : 'City', field : 'city', flex : 1 },
    { text : 'When', field : 'start', flex : 1, type : 'date' },
    // This column has filtering turned off
    { text : 'Team (no filter)', field : 'team', flex : 1, filterable : false }
],

data : DataGenerator.generateData(100)
});

[alex.l]

Hi mogo,

Sorry, but filter and filterBar features should be used separately and don't work together. Looks like we don't have this information in the docs, that I will fix shortly, thanks for your response!

All best,
Alex