Our blazing fast Grid component built with pure JavaScript


Post by prem.k@zetwerk.com »

Hi Team,

When i click on date picker date is getting changed it's not showing current date in calendar. Please find the attached screenshot.

Example.mp4
(14.64 MiB) Downloaded 68 times

Below is the code:

children: [
      {
        text: 'Start Date',
        type: 'date',
        width: 120,
        field: 'actualStartDate',
        region: 'middle',
        format: 'DD/MM/YY',
        cls: 'start-date-header',
        draggable: false,
        cellCls: 'start-date-cell',
        editor: {
          editable: true,
          listeners: {
            // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
            action: isActualStartDateValid,
            input: isActualStartDateValid,
            change: isActualStartDateValid
          },
          picker: {
            disabledDates: function (value) {
              // sunday not allowed
              if (value.getDay() === 0) {
                return true;
              }
              // greater dates not allowed
              if (value && value instanceof Date) {
                const currDate = new Date();
                if (moment(value).isAfter(currDate, 'day')) return true;
              }
            }
          }
        },
        tooltipRenderer: ({ record, cellElement, value, tip }) => {
          const { progress = '', trackedBy = '', serialNumber } = record;
          if (Number(progress) > 0 && !record.actualStartDate  && record.trackable !== 'ROLLUP') {
            tip._element.classList.add('tooltip-container');
            //cellTooltip.classList.add('tooltip-container');
            return `Actual Start Date is required`;
          }
        },
        // finalizeCellEdit: async ({ value, record }) => {
        //   let { progress = '' } = { ...record?.originalData };
        //   // if there is no progress, actual st date can not be edited
        //   if (!progress && progress !== 0) {
        //     return false;
        //   }
        //   return true;
        // },
        renderer({ cellElement, row, record, value, column }) {
          let { id } = column;
          const { progress = '', trackedBy = '', actualStartDate, serialNumber } = record;
          if (Number(progress) > 0 && !actualStartDate && record.trackable !== 'ROLLUP') {
            cellElement.classList.add('cell-focused');
            requiredValidationMessage({ serialNumber, _id: id });
            return;
          }
          if (!Number(progress) && Number(progress) < 0) {
            cellElement.classList.add('disabled-field');
          }
          if (value) {
            removeRequireValidation({ serialNumber, _id: id });
          }
          return (value && moment(value).format('DD/MM/YYYY')) || '';
        }
      },

Post by Maxim Gorkovsky »

Hello.
I noticed date format is different. You leave 2 symbols for year but somehow 4 symbols are used for year (I cannot reproduce it). You should use correct format: "DD/MM/YYYY".


Post by prem.k@zetwerk.com »

I have tried with same it's not working, ideally in date picker date should be selected date but it's always showing 1994 year and some random date. When i apply DD/MM/YYYY format something weird is happening.

Please find attached image.

Screenshot 2021-11-18 at 11.01.02 PM.png
Screenshot 2021-11-18 at 11.01.02 PM.png (238.27 KiB) Viewed 1011 times

Post by Maxim Gorkovsky »

Could you provide a runnable test case with data sample? Because I cannot reproduce this problem on our demos.


Post by prem.k@zetwerk.com »

Hi Maxim,
Due to privacy we can't share code, but i am not sure whenever we click on date picker it always shows 14/07/1994. On load of application it shows correct date(for example 18th Nov 2021) but when we double click on date field it always shows(14/07/1994);

Our column code field is below:

 Actual: {
    text: 'Actual',
    align: 'center',
    width: 240,
    cls: 'planned-header',
    region: 'middle',    
sortable: false, children: [ { text: 'Start Date', type: 'date', width: 120, field: 'actualStartDate', region: 'middle', format: 'DD/MM/YY', cls: 'start-date-header', draggable: false, cellCls: 'start-date-cell',
sortable: false, serialize: serializeDate, editor: { editable: true, listeners: { // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types action: isActualStartDateValid, input: isActualStartDateValid, change: isActualStartDateValid }, picker: { disabledDates: function (value) { // sunday not allowed if (value.getDay() === 0) { return true; } // greater dates not allowed if (value && value instanceof Date) { const currDate = new Date(); if (moment(value).isAfter(currDate, 'day')) return true; } } } }, tooltipRenderer: ({ record, cellElement, value, tip }) => { const { progress = '', trackedBy = '', serialNumber } = record; if ( (Number(progress) > 0 || isItemComplete({ progress, quantity: record?.measure?.value, trackingMethod: trackedBy })) && !record.actualStartDate && record.trackable !== 'ROLLUP' ) { tip._element.classList.add('tooltip-container'); //cellTooltip.classList.add('tooltip-container'); return `Actual Start Date is required`; } }, // finalizeCellEdit: async ({ value, record }) => { // let { progress = '' } = { ...record?.originalData }; // // if there is no progress, actual st date can not be edited // if (!progress && progress !== 0) { // return false; // } // return true; // }, renderer({ cellElement, row, record, value, column }) {
console.log('value', typeof value); return value; } }, { text: 'End Date', type: 'date', width: 120, region: 'middle', field: 'actualEndDate', format: 'DD/MM/YY', cls: 'end-date-header', draggable: false, cellCls: 'end-date-cell', sortable: false, editor: { editable: true, listeners: { // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types action: isActualEndDateValid, input: isActualEndDateValid, change: isActualEndDateValid }, picker: { disabledDates: function (value) { // sunday not allowed if (value.getDay() === 0) { return true; } // greater dates not allowed if (value && value instanceof Date) { const currDate = new Date(); if (moment(value).isAfter(currDate, 'day')) return true; } } } }, tooltipRenderer: ({ record, cellElement, value, tip }) => { const { progress = '', trackedBy = '', actualEndDate = '' } = record; if ( isItemComplete({ progress, quantity: record?.measure?.value, trackingMethod: trackedBy }) && !actualEndDate && record.trackable !== 'ROLLUP' ) { tip._element.classList.add('tooltip-container'); //cellTooltip.classList.add('tooltip-container'); return `Actual End Date is required`; } }, renderer({ cellElement, row, record, value, column }) { const { id } = column; const { progress = '', trackedBy = '', serialNumber } = record; if ( isItemComplete({ progress, quantity: record?.measure?.value, trackingMethod: trackedBy }) && !value && record.trackable !== 'ROLLUP' ) { cellElement.classList.add('cell-focused'); requiredValidationMessage({ serialNumber, _id: id }); return; } if ( !record.actualStartDate || !isItemComplete({ progress, quantity: record?.measure?.value, trackingMethod: trackedBy }) ) { cellElement.classList.add('disabled-field'); } if (value) { removeRequireValidation({ serialNumber, _id: id}); } if (!isProgressValue({ progress, trackingMethod: trackedBy, quantity: record?.measure?.value })) { return ''; } return (value && moment(value).format('DD/MM/YYYY')) || ''; } } ] },

Post by Maxim Gorkovsky »

Have you defined model field to be a date? Please refer to this post which explains how to declare a date field on the model: viewtopic.php?p=96637#p96637


Post by prem.k@zetwerk.com »

Hi Maxim,

we have already defined type: 'date' in column object. Why do we need to again define model?


Post by Maxim Gorkovsky »

Because column is a view-level component, it expects certain data type. Column should not mess with the record value. And record value is an ISO representation of the date.


Post by prem.k@zetwerk.com »

Hi Maxim,

Even after defining custom model for date, it's not working. If i select date 01/10/2021 from date picker for parent cell x and update it, again when i clicking on cell parent y, i can see in date picker by default selected date is showing 01/10/2021(which this actual value is empty) ideally it should be empty string.

Please find attached video: last 10 second ignore.

example.webm
(1.01 MiB) Downloaded 66 times

Post by prem.k@zetwerk.com »

Any update on this @MAXIM


Post Reply