Advertisements

Jquery Datepicker-Part 1


Introduction

There are many more examples on the Internet for jQuery Datepicker. Manyprogrammers widely using jQuery Datepicker and in this article I will teach you some of the basics of jQuery Datepicker Date Format !. Let’s start.

Jquery Reference

You must use the following jquery reference in your HTML Code. otherwise it will not work.

<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
<script src="//code.jquery.com/jquery-1.10.2.js"></script>  
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>  

Jquery Datepicker With Different Format

Firstly, read the JQuery Documentation because the documentation explains the basic details of JQuery Datepicker Format. For example, DD and dd will give different output.

Check the following details that are provided in the JQuery documentation.

  • d – day of month (no leading zero)
  • dd – day of month (two digit)
  • D – day name short
  • DD – day name long
  • m – month of year (no leading zero)
  • mm – month of year (two digit)
  • M – month name short
  • MM – month name long
  • y – year (two digit)
  • yy – year (four digit)

Example 1 : Jquery Datepicker Format ( dd/mm/yy )

Html

Date : <input id="Datepicker" type="text" />

Jquery

The following code is using textbox id “#Datepicker” and dateFormat “dd/mm/yy“.You can change this format based on your requirement like “mm/dd/yy“.

$(function () {

    $('#Datepicker').datepicker({
        dateFormat: 'dd/mm/yy'
    });

})

Output

Js Fiddle Demo 1 : http://jsfiddle.net/rajeeshmenoth/en2c6124/

Example 2 : Jquery Datepicker Format ( dd MM yy )

Html

Date : <input id="Datepicker" type="text" />  

Jquery

The format will display like 26 August 1989.

$(function () {

    $('#Datepicker').datepicker({
        dateFormat: 'dd MM yy'
    });

})

Output

Js Fiddle Demo 2 :  http://jsfiddle.net/rajeeshmenoth/tnystokr/

Example 3 : Day of the year

Html

Date : <input id="Datepicker" type="text" />  

Jquery

The dateFormat using “o” it will count the day of the year.

$(function () {

    $('#Datepicker').datepicker({
        dateFormat: 'o'
    });

})

Output

Js Fiddle Demo 3 : http://jsfiddle.net/rajeeshmenoth/fn1fd30s/

Reference

Summary

We learned various date format in JQuery Datepicker. I hope this article is useful for beginners.

Advertisements

One response

  1. Pingback: JQuery Datepicker – Part 2 | Rajeesh Menoth

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: