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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Add max date as current date and time

Thread ID:

Created:

Updated:

Platform:

Replies:

145808 Jul 9,2019 11:56 AM UTC Jul 18,2019 01:56 PM UTC Angular - EJ 2 7
loading
Tags: Grid
Neo
Asked On July 9, 2019 11:56 AM UTC

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
},





Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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. 


Neo
Replied On 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



Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


Neo
Replied On 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.

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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. 


Neo
Replied On 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)


Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon