In this article I will explain with an example, how to set dd-MMM-yyyy Date format in jQuery DatePicker plugin.
The jQuery DatePicker plugin supports multiple Date formats and in order to set the dd-MMM-yyyy Date format, the dateFormat property needs to be set.
HTML Markup and jQuery DatePicker implementation
The following HTML Markup consists of a TextBox which has been made Read Only.
Inside the jQuery document ready event handler, the TextBox has been applied with jQuery DatePicker plugin.
The jQuery DatePicker plugin has been assigned following properties:
showOn – button
The jQuery DatePicker will be shown only when the Button next to the TextBox is clicked.
buttonImageOnly – true
The Button will be an Image.
buttonImage – URL
The URL of the Image file to be displayed as Button.
dateFormat – dd-M-yy
The jQuery DatePicker will set the selected Date in dd-MMM-yyyy date format in TextBox.
<input type="text" id="txtDate" name="SelectedDate" readonly="readonly" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#txtDate").datepicker({
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'images/calendar.gif',
dateFormat: 'dd-M-yy'
});
});
</script>
Screenshot
![Set dd-MMM-yyyy Date format in jQuery DatePicker]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
