Introduction:
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 asp.net.
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 asp.net.
Description:
In previous post 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 calendar controlIn previous post 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.
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: 'd MM, yy' });
});
</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: '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
Demo
 |
Download
sample code attached
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
|
|
|
6 comments :
sir, its not working under ajax:tabcontainer
very useful for me
Hi Friend,
I am Using Master Form. How to use this in the aspx form .Please Help me on this
hi friend,
plz clearly post wer add the code,i am new to .net
not working proper in update panel
Hi Sir,Its Working properly but the Previous dates are not disabled.