In previous posts I explained many articles relating to jQuery Datepicker in asp.net. 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 Datepicker 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="http://www.w3.org/1999/xhtml">
<head>
<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: 'yy-mm-dd' });
});
</script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<b>Date:</b> <asp:TextBox ID="txtDate" runat="server"/>
</div>
</form>
</body>
</html>
|
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: 'yy-mm-dd' });
});
|
No comments :
Post a Comment