Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery UI datepicker: Can you format a date and allow multiple seperator characters?

I prefer my datepicker to be formatted with this option

{dateFormat: 'mm-dd-yy'}

Ex: 06-16-2010

But, I would like to allow people to enter in a slash as a seperator instead of a dash if they choose.

Is there a way to setup the datepicker so that it defaults to mm-dd-yy but wouldn't prevent someone from entering mm/dd/yy?

I do know I can set {constrainInput:false} although then people can enter letters :(

Thanks for any help.

like image 927
user169867 Avatar asked Jun 16 '10 15:06

user169867


People also ask

How can change date format in jQuery ui datepicker?

inside the jQuery script code just paste the code. $( ". selector" ). datepicker({ dateFormat: 'yy-mm-dd' });

How do I change date format in datepicker?

In the Data type Format dialog box, do one of the following: To format the control to show the date only, select the display style that you want in the Display the date like this list. To format the control to show the time only, select the display style that you want in the Display the time like this list.

How do I restrict a date range?

Restrict the range within a range You can restrict the minimum and maximum date that can be allowed as start and end date in a range selection with the help of min , max properties. min – sets the minimum date that can be selected as startDate. max – sets the maximum date that can be selected as endDate.


2 Answers

Absolutely. You can type anything into the field if you turn off constrainInput.

$( "#myDateInput" ).datepicker({ 
  dateFormat: 'mm-dd-yy',
  constrainInput: false
});

Full docs: http://api.jqueryui.com/datepicker/#option-constrainInput

like image 117
Jon Weers Avatar answered Sep 28 '22 02:09

Jon Weers


the datepicker has the altField & altFormat option so you can show one format but send the other, but thats not what you want.

i suggest that you use datejs (http://www.datejs.com/) to parse the user input and update a hidden textbox which is linked to your datepicker.

like image 36
marc.d Avatar answered Sep 28 '22 02:09

marc.d