Jquery UI datepicker date format

Question

I am using jquery ui datepicker in a form in my project. I am initializing datepicker like this.

var date_lower = new Date(1910,0,1);
var year_lower = date_lower.getFullYear();
var date_upper = new Date();
var year_upper = date_upper.getFullYear();
$("#id_dob").datepicker({ dateFormat: 'mm-dd-yy',minDate: date_lower,
        maxDate: date_upper ,
        yearRange: year_lower+':'+year_upper ,
        changeYear: true,
        changeMonth: true,
        defaultDate: new Date(2000,01,01)
});

My date format is like this 'mm-dd-yy'. So datepicker does not allow me to enter date in 'mm/dd/yy' format. When I try to type '/' in datepicker input, it does nothing or I cannot type '/' in datepicker input field. I am doing this because I want to give user option to add date without using calander too (It is client's demand). I want that to set date format so that I can use any separater from [./-\s]. For example I want all these type of dates (01-01-1999, 01/01/1999, 01.01.1999 and 01 01 1999) to be accepted. Can any one tell me how I can do this?

I am using Django model formsets.

score 2 · Answer 1 · edited May 23 '17 at 10:28

Check this out: jQuery Datepicker that supports multiple formats

Basically, tweak the parseDate function to allow several formats, and use the original parseDate to check each one:

$.datepicker.inputFormats = ["mm-dd-yy", "mm/dd/yy", "mm dd yy"];//list formats to be accepted here, add formats as you see fit.

$.datepicker.originalParseDate = $.datepicker.parseDate;

$.datepicker.parseDate = function (format, value, settings) {
    var date;

    function testParse(format, value, settings) {
        if ( ! date ) {
            try {
                date = $.datepicker.originalParseDate(format, value, settings);
            } catch (Error) {
            }
        }
    }

    testParse(format, value, settings);
    for(var n = 0, stop = $.datepicker.inputFormats ? $.datepicker.inputFormats.length : 0; n < stop; n++){
        testParse($.datepicker.inputFormats[n], value, settings);
    };
    return date;
};

score 1 · Accepted Answer · answered Feb 22 '16 at 12:23

1

Small changes i made Your code has some problem, you set data time format to mm-dd-yyyy, that why date time picker always get mm-dd-yyyy. following updated code work perfectly

$("#datepicker").datepicker({
  minDate: date_lower, 
  maxDate: date_upper,
  changeYear: true,
  changeMonth: true,    
 });

answered Feb 22 '16 at 12:23

Anurag Deokar

840
7
13

I want datepicker to get date in mm-dd-yyyy. But I do not want to fix '-' as separater. Like I want all these type of dates (01-01-1999, 01/01/1999, 01.01.1999 and 01 01 1999) to be accepted. – Muhammad Hassan Feb 22 '16 at 12:35

Jquery UI datepicker date format

2 Answers2