How do I validate a DatePicker field?

[a95tbirdsc]

Hello,

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");
                          }
                      }
                    ]
            }

`

[BrahamMounir]

Hi, you can define your own validator

this should work :

{
   name: "IdShift", validate: myValidatorNotNullOrEmpty(),  type: "select", align: "left", width: "10%", items: ['1', '2'],
},

 function myValidatorNotNullOrEmpty() {
    return {
        validator: function (value) {
            return value !== '' && value !== null && value !== undefined && value !== 0;
        },
        message: function (value, item, param) {
            return "this value must be not null or empty :) ";
        }
    };
}