I have implemented this code https://github.com/tabalinas/jsgrid/blob/master/demos/custom-grid-field.html into my jsGrid but how do I validate the DatePicker field?
What am I trying to do?
- Required Field (The Date must not be blank. If blank then apply CSS class "jsgrid-invalid" to the cell. Don't submit the Insert/Edit.)
- Valid Date (Date must be in the format of MM/DD/YYYY. This should be working with the "toLocaleDateString()" I'm using.)
- Blank Date (Produces this error: Uncaught TypeError: this._insertPicker.datepicker(...) is null. How do I NOT produce this error?)
var MyDateField = function(config) {
jsGrid.Field.call(this, config);
};
MyDateField.prototype = new jsGrid.Field({
sorter: function(date1, date2) {
return new Date(date1) - new Date(date2);
},
itemTemplate: function(value) {
return new Date(value).toLocaleDateString();
},
insertTemplate: function(value) {
return this._insertPicker = $("<input>").datepicker({ defaultDate: new Date().toLocaleDateString() });
},
editTemplate: function(value) {
return this._editPicker = $("<input>").datepicker().datepicker("setDate", new Date(value).toLocaleDateString());
},
insertValue: function(value) {
return this._insertPicker.datepicker("getDate").toLocaleDateString();
},
editValue: function() {
return this._editPicker.datepicker("getDate").toLocaleDateString();
}
});
jsGrid.fields.myDateField = MyDateField;
{ name: "RETURN_START_DATE", type: "myDateField", title: "Return Start Date", align: "left", editing: true, filtering: true, inserting: true,
validate: [
{ validator: "required",
message: function(value, item) {
toastr["warning"]("Return Start Date is required.", "Warning");
}
}
]
},
{ name: "RETURN_END_DATE", type: "myDateField", title: "Return End Date", align: "left", editing: true, filtering: true, inserting: true,
validate: [
{ validator: "required",
message: function(value, item) {
toastr["warning"]("Return End Date is required.", "Warning");
}
}
]
}