how to use monthNames in jqgrid when validating date?

Question

In my jqgrid when i am clicking on add new record i have date field prepopulated with current date. Format of the date is yyyy-MMM-d (e.g. 2010-Jan-23). Date is required field a

Answer 1

Verify that you defined datefmt: 'Y-M-d' in the column definition of colModel. In the list of editrules options (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editrules) is defined that if you use date: true as a editrules option, the validation will be done corresponds with the datefmt option.

Some more recommendations if you use date in jqGrid:

If you not yet use, think about of the usage of jQuery.datepicker (see http://jqueryui.com/demos/datepicker/#date-formats) inside of dataInit function of editoptions (like

editoptions: {
    dataInit : function (elem) {
        $(elem).datepicker();
    }
    // ...
}

in the simplest case). If you use searching for date fields, you can use dataInit with jQuery.datepicker also in searchoptions in the same way (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:singe_searching#colmodel_options). The usage of jQuery.datepicker in jqGrid is very easy, but it makes your program more comfortable.

Usage of standard date formatter (formatter: 'date') can be useful to convert source data format send to jqGrid to the new format which will be displayed. For example,

formatter: 'date', formatoptions: {srcformat:'y-m-d', newformat: 'Y-M-d' }

It is less interesting, but it can reduce a little the size of data send from server to client.

UPDATED: I must admit, I don't tested my suggestion with exactly your data format. Just now I tested all one more time and then read carefully jqGrid documentation about datefmt (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options). For datefmt are only numerical format for months is supported! So the value at the time of date verification must be in a numerical format. What can we do? For example following

we define as parameters of navGrid function "add" parameters (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator parameter prmAdd) like following:

{ beforeCheckValues: function(posdata, formid, mode) {
      var data = posdata.Date;
      var dateParts = data.split("-");
      var mounth = dateParts[1];
      var mounths = $.jgrid.formatter.date.monthNames;
      var iMounth = -1;
      for (var i=0; i<12; i++) {
          if (mounth === mounths[i]) {
              iMounth = i;
              break;
          }
      }
      if (iMounth !== -1) {
          posdata.Date = dateParts[0]+'-'+(iMounth+1)+'-'+dateParts[2];
      }
  },
  beforeSubmit: function(postdata, formid) { 
      var data = postdata.Date;
      var dateParts = data.split("-");
      var mounths = $.jgrid.formatter.date.monthNames;
      postdata.Date = dateParts[0]+'-'+
                      $.jgrid.formatter.date.monthNames[dateParts[1]-1]+
                      '-'+dateParts[2];
      return [true,""];
  }
}

So we convert the Date field to the numerical format inside of beforeCheckValues function and then convert all back to the original format (like 2010-Jan-23) after usage of checkDate. It will work.

The main question is now: have we some advantage from such kind of the date checking? We can just don't use editrules: { date:true } and implement our own date checking inside of beforeSubmit function. If we find out the wrong date we should return [false,"My error message"] and our custom error message "My error message" will be displayed by jqGrid.

So the easiest solution of your problem we receive if we could change the date format to any numerical form (Y-mm-d, mm/d/Y or another one). Usage of datepicker will makes for users the format problem not very important. Think about this and choose the way which your prefer.

Answer 2

I was facing similar issue. I have resolved it using custom function for validation. I am suing date format as '23-Jan-05'. You may modify it to suit your required date format.

function datecheck(value, colname) {
            var dateParts = value.split("-");
            var datePart = dateParts[0];
            var mounth = dateParts[1];
            var yearPart = dateParts[2];

            var mounths = $.jgrid.formatter.date.monthNames;
            var monthPart = -1;
            for (var i = 0; i < 12; i++) {
                if (mounth === mounths[i]) {
                    monthPart = i + 1;
                    break;
                }
            }
            var dateText = monthPart + '-' + datePart + '-' + yearPart;
            var date = Date.parse(dateText);
            if (isNaN(date)) 
                return [false,"Invalid date. Format expected: dd-mmm-yy. (23-Jul-05)"];
            else 
            return [true,""];                  

        }

JQGrid column details:

colModel: [name: 'JoiningDate', align: "center", editable: true, 
           editrules: { custom: true, custom_func: datecheck },
           formatter: 'date', formatoptions: { srcformat: 'y-m-d', newformat: 'd-M-y' }, edittype: 'text', editable: true,
           editoptions: { dataInit: function (el) { setTimeout(function () { $(el).datepicker({ dateFormat: 'd-M-y' }); }, 200); } }
            },

Hope this helps.

Regards,

Abhilash