We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Add max date as current date and time

Hi all,

I want to add max date as current date & time for the grid column. I'm using column model for add column options dynamically. My code as below,

        {
field: 'recordDatetime', type: 'date', editType: 'datetimepickeredit',
format: { type: 'date', format: 'MM/dd/yyyy hh:mm:ss a' },
textAlign: 'Center', minWidth: '230', allowReordering: false
},





7 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team July 10, 2019 09:37 AM UTC

Hi Isanka,  

Thanks for contacting Syncfusion Support.  

Using the `edit ` (edit params) property of the Grid columns, min and max properties to the DateTimePicker can be set. Refer to the following documentation. 


We have prepared a stackblitz sample for your reference.  


Regards,  
Seeni Sakthi Kumar S. 



NE Neo July 11, 2019 12:09 PM UTC

Hi Sakthi,

I edited code like below,

{
field: 'recordDatetime', type: 'date', editType: 'datetimepickeredit',
edit: { params: { max: new Date() } },
format: { type: 'date', format: 'MM/dd/yyyy hh:mm:ss a' },
textAlign: 'Center', minWidth: '230', allowReordering: false
},

It is working for future date. But when I use the max date as current date it will get error. Please advice me on this.

TypeError: Cannot read property 'removeChild' of null




TS Thavasianand Sankaranarayanan Syncfusion Team July 12, 2019 11:09 AM UTC

Hi Neo, 

Thanks for the update. 

We have tried your replication procedure in our end. But it was unsuccessful at our end. Please find the below code snippet and sample for your reference. 

App.component.ts 
   { 
                    field: 'OrderDate', headerText: 'Order Date',type:'date', editType: 'datetimepickeredit',  edit: { params: { max: new Date() }}, 
                    format: { type: 'datetime', format: 'MM/dd/yyyy hh:mm:ss a' }, 
                    width: 170 
                }, 


If you still faced the issue, please get back to us with the following details that will help us to provide the better solution as soon as possible. 

1) Share the complete Grid code 
       2)  share Essential JS 2 package version 
3)  Please try to reproduce the scenario, in above sample, If possible. 

Regards, 
Thavasianand S. 



NE Neo July 15, 2019 11:34 AM UTC

Hi Thavasianand,

It's not working for me.

Request 1 - Share the complete Grid code 

** TS **

-- ngOnInit() --
this.editSettings = { allowEditing: true, allowAdding: true, mode: 'Batch', showConfirmDialog: false };

-- AfterServiceCall --
this.columns = [
{
field: 'recordDatetime', headerText: 'Record Date Time', type: 'date', editType: 'datetimepickeredit', edit: { params: { max: new Date() } },
format: { type: 'datetime', format: 'MM/dd/yyyy hh:mm:ss a' },
width: 170
}];

** HTML **

<div class="mdl-cell mdl-cell--12-col padding-top-10" style="height: 234px; overflow: auto">
<ejs-grid #dataGrid [dataSource]='data' [columns]='columns'
height='132px' [editSettings]='editSettings'>
</ejs-grid>
</div>




Request 2 - Share Essential JS 2 package version 

"@syncfusion/ej2-angular-grids": "17.2.34",

Request 3 - Please try to reproduce the scenario, in above sample, If possible. 

It's working on the sample you provided. (Using Batch edit mode too)

NOTE: I'm creating this gird inside a dialog model component.


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team July 16, 2019 11:03 AM UTC

Hi Neo,  

Thanks for the update.  

We are unable to reproduce the reported problem at our end with the provided information. If you could provide the following information, which would be grateful to proceed further on this. 

  1. Complete component page of the Grid
  2. In case of any event handled (like actionbegin, actioncomplete), please share the complete code of them
  3. How the data has been bounded to the Grid? Either remote or local? Have you used the observable binding?
  4. Video demo of the issue
  5. actionFailure event of the Grid will capture all the exceptions. So we suggest to bind them to the Grid and capture the exception message returned in their arguments. Copy and share them as text file.

Regards,  
Seeni Sakthi Kumar S. 



NE Neo replied to Seeni Sakthi Kumar Seeni Raj July 17, 2019 07:10 AM UTC

Hi Neo,  

Thanks for the update.  

We are unable to reproduce the reported problem at our end with the provided information. If you could provide the following information, which would be grateful to proceed further on this. 

  1. Complete component page of the Grid
  2. In case of any event handled (like actionbegin, actioncomplete), please share the complete code of them
  3. How the data has been bounded to the Grid? Either remote or local? Have you used the observable binding?
  4. Video demo of the issue
  5. actionFailure event of the Grid will capture all the exceptions. So we suggest to bind them to the Grid and capture the exception message returned in their arguments. Copy and share them as text file.

Regards,  
Seeni Sakthi Kumar S. 


Hi Sakthi,

1. Complete component page of the Grid
     It won't be able to provide.

2. In case of any event handled (like actionbegin, actioncomplete), please share the complete code of them

     No events like that. Just code I provided in the previous reply.

3. How the data has been bounded to the Grid? Either remote or local? Have you used the observable binding?

     Yes. I'm using observable binding to bound data. Code as below,

      private loadGridFields() {

this.dataService.getGridFields().subscribe(
(fieldsResponse) => {

this.columns = this.transformFieldsToGridColumnsData(fieldsResponse);

this.dataGrid.allowResizing = true;
this.dataGrid.rowHeight = 35;
this.dataGrid.gridLines = "Both";

this.dataGrid.dataBind();
},
errorResponse => {
console.log("error", errorResponse);
},
() => { });
}

private transformFieldsToGridColumnsData(fields): any[] {

var fieldsArry: any[] = [];
fields.forEach(field => {

if (field.isSelected == true) {

if (field.elementName == "recordId") {
fieldsArry.push({ field: 'recordId', isPrimaryKey: 'true' });
}
else {

let fieldSetting = this.fieldSettings.find(filteredField => filteredField['field'] === field.elementName)
fieldsArry.push(fieldSetting);
}
}
})
return Object.assign([], fieldsArry);
}

public fieldSettings: any[] = [
{
field: 'recordDatetime', type: 'date', editType: 'datetimepickeredit',
edit: { params: { max: new Date() } }, format: { type: 'datetime', format: 'MM/dd/yyyy hh:mm:ss a' },
textAlign: 'Center', minWidth: '230', allowReordering: false
}
// Adding Other fields
];
     
Note: 'loadGridFields()'  loading inside the 'ngOnInit()'

4. Video demo of the issue

     Error coming when we clicking on the date from the datetime picker

5. actionFailure event of the Grid will capture all the exceptions. So we suggest to bind them to the Grid and capture the exception message returned in their arguments. Copy and share them as text file.

     Didn't work

Complete error

core.js:1624 ERROR TypeError: Cannot read property 'removeChild' of null
    at detach (dom.js:152)
    at DateTimePicker.push../node_modules/@syncfusion/ej2-calendars/src/datepicker/datepicker.js.DatePicker.destroy (datepicker.js:1123)
    at DateTimePicker.push../node_modules/@syncfusion/ej2-calendars/src/datetimepicker/datetimepicker.js.DateTimePicker.destroy (datetimepicker.js:151)
    at DatePickerEditCell.push../node_modules/@syncfusion/ej2-grids/src/grid/renderer/datepicker-edit-cell.js.DatePickerEditCell.destroy (datepicker-edit-cell.js:36)
    at Edit.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/edit.js.Edit.destroyWidgets (edit.js:545)
    at BatchEdit.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/batch-edit.js.BatchEdit.saveCell (batch-edit.js:830)
    at BatchEdit.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/batch-edit.js.BatchEdit.clickHandler (batch-edit.js:71)
    at Observer.push../node_modules/@syncfusion/ej2-base/src/observer.js.Observer.notify (observer.js:99)
    at GridComponent.push../node_modules/@syncfusion/ej2-base/src/component.js.Component.notify (component.js:193)
    at GridComponent.push../node_modules/@syncfusion/ej2-grids/src/grid/base/grid.js.Grid.mouseClickHandler (grid.js:2709)



TS Thavasianand Sankaranarayanan Syncfusion Team July 18, 2019 01:56 PM UTC

Hi Neo, 

Thanks for your update. 

We are able to reproduce the reported issue and From your shared stack trace we could see that you have used batch editing mode. We have validated your requirement. We suggest you to use the custom validation to achieve your requirement. 

Please find the below code snippet and sample for more information. 

App.component.ts 
export class AppComponent { 
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode:'Batch' }; 
        this.toolbar = ['Add', 'Delete', 'Update', 'Cancel']; 
      this.columns =  [ 
                { 
                    field: 'OrderDate', headerText: 'Order Date', type: 'date',validationRules : {required: true, minDate: [this.customcomPareDateValue.bind(this), 'Enter a valid date'] }, editType: 'datetimepickeredit', 
                  format: { type: 'datetime', format: 'MM/dd/yyyy hh:mm:ss a' }, 
                  textAlign: 'Center', minWidth: '230', 
                    width: 170 
                }, 
                { 
                    field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150, 
                    edit: { params: { popupHeight: '300px' } } 
                }]; 
          } 

          customcomPareDateValue (args)
            //Here you can perform your validation 
            //based on the result return the true or false value 
            return args.value < '07/18/2019 00:00:00 AM' 
          } 


Please get back to us, if you need further assistance. 

Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon