How do I validate a DatePicker field in jsGrid?

29 Views Asked by At

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

0

There are 0 best solutions below