How to Customize jQuery datepicker Format Date?

advertisement

The best thing about jQuery is how easy it is to implement the code and to customize it. In this post, we will learn How to Customize jQuery datepicker format date. jQuery datepicker by default will provide date format like this "09/15/2013".

Before we start, make sure you have already know about jQuery datepicker. And if you are new here, I suggest you to read the previous post about jQuery Datepicker, Easiest Way to Input Date. That post explain how to make simple input form with jQuery datepicker.

How to Customize jQuery datepicker Format Date?

To customize jQuery datepicker date format, you need to add option "dateFormat" inside datepicker(). So the code will be like this for example: $("#datepicker").datepicker({dateFormat:"format options"});

jQuery datepicker Format options defined by character "d", "m", "y", "D" and "M". Take a look to this table below:

Format Options	Info	Value (Ex. Sunday 01 Sep 2013)
d	date	1
m	month	9
y	year 2 digits	13
D	day short name	Sun
M	month short name	Sep
dd	date 2 digits	01
mm	month 2 digits	09
yy	year 4 digits	2013
DD	day full name	Sunday
MM	month full name	September
DD dd M, yy	-	Sunday 01 Sep, 2013

Here some examples of jQuery datepicker format date with the script code:

Pick date first:
Format options:
Default - mm/dd/yy Default Short - m/d/y ISO 8601 - yy-mm-dd Short - d M, y Medium - d MM, y Medium with day - D dd MM, y Full - DD, d MM, yy With text - 'day' d 'of' MM 'in the year of' yy

That is all about How to Customize jQuery datepicker Format Date. To practice more, you can use this link http://jsfiddle.net/QztYH/. Use the comment form below if you have any questions. Thank you.

---

Categories:

Similar to How to Customize jQuery datepicker Format Date?:

Post a Comment/Report Broken Link: