aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Change/Set date format in jquery ui datepicker using

May 3, 2012

In this article I will explain how to set or change date format in JQuery calendar control like dd/mm/yy or mm/dd/yy or DD/MM/YYYY etc. using
In previous post I explained many articles relating to
JQuery Datepicker in Now I will explain how to change date format in JQuery calendar control like dd/mm/yy or mm/dd/yy or etc based on our requirement.
Check below date formats to set in JQuery UI calendar control

For 'dd/mm/yy' format (ex: 04/05/2012)

$("#txtDate").datepicker({ dateFormat: 'dd/mm/yy' });
For 'mm/dd/yy' format (ex: 05/04/2012)

$("#txtDate").datepicker({ dateFormat: 'mm/dd/yy' });
For 'yy-mm-dd' format (ex: 2012-05-04)

$("#txtDate").datepicker({ dateFormat: 'yy-mm-dd' });
For 'd M, y' format (ex: 2 May, 12)

$("#txtDate").datepicker({ dateFormat: 'd M, y' });
 For 'DD, d MM, yy' format (ex: Friday, 4 May, 2012)

$("#txtDate").datepicker({ dateFormat: 'DD, d MM, yy' });
For 'DD, d MM, yy' format (ex: Friday, 4 May, 2012)

$("#txtDate").datepicker({ dateFormat: 'DD, d MM, yy' });
To implement this one first open Visual Studio and create new website after that write following code in your aspx page

<html xmlns="">
<title>jQuery UI Datepicker - Set Different Date Formats</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#txtDate").datepicker({ dateFormat: 'd MM, yy' });
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
<form id="form1" runat="server">
<div class="demo">
<b>Date:</b> <asp:TextBox ID="txtDate" runat="server"/>
If you observe above code in header section I added some of script files and css classes by using those files we will display calendar control with beautiful css style. You can get those files by downloading attached sample.

If you observe script in header section

$(function() {
$("#txtDate").datepicker({ dateFormat: 'd MM, yy' });
In this script I am setting property to show calendar control like (3 May, 2012).

After completion of aspx page design and your code modifications just run your application and check your calendar control that would be like below demo


Download sample code attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


adi said...

sir, its not working under ajax:tabcontainer

swapnil said...

very useful for me

Anonymous said...

Hi Friend,
I am Using Master Form. How to use this in the aspx form .Please Help me on this

Anonymous said...

hi friend,
plz clearly post wer add the code,i am new to .net

Anonymous said...

not working proper in update panel

Anonymous said...

Hi Sir,Its Working properly but the Previous dates are not disabled.

Anonymous said...

date format of jquery and microsoft are different from each other, so it wont work if you make the format of DatePicker same as the date format of Microsoft system

Mr_Kirkwood said...

Is there a way to show time?

Mr_Kirkwood said...

Is there a way to show time?

Unknown said...

not working calander not show

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.