jQuery ui datepicker Change date format
Demo and example for how to change date format in jquery UI datepciker
by Athil
Posted on 22 Jun 2019 Category: jQuery
Views: 5300
Here I am going to show how to format date in jQuery UI Datepicker.
DEMO
DOWNLOAD DEMO
$("#txt1").datepicker({ dateFormat: 'dd-M-yy' });
Where 'txt1' is the control id, 'dd' is the date, 'M' for Month 'yy' for the year with four digits and '-' is the separator.
We can format as many ways like as per our requirement.
$("#txt2").datepicker({ dateFormat: 'dd-MM-yy' });
$("#txt3").datepicker({ dateFormat: 'yy-dd-M' });
$("#txt4").datepicker({ dateFormat: 'MM-dd-yy' });
$("#txt5").datepicker({ dateFormat: 'dd-m-yy' });
Full Code for Demo
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery datepicker Change Dateformat</title>
<link type="text/css" rel ="stylesheet" href= "css/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="css/DatePicker.css" />
</head>
<body>
<h1> Demo for jquery datepicker format</h1>
<br/>
<input type="text" id="txt1"/>dd-MM-yyyy format <br/>
<input type="text" id="txt2"/>dd-MMM-yyyy format<br/>
<input type="text" id="txt3" />yyyy-dd-MM format<br/>
<input type="text" id="txt4" />MMM-dd-yyyy format<br/>
<input type="text" id="txt5" />d-m-yyyy format<br/>
<script type="text/javascript" src="js/jquery.min.js" >
</script>
<script type="text/javascript" src="js/jquery-ui.js">
</script>
<script>
$("#txt1").datepicker({ dateFormat: 'dd-M-yy' });
$("#txt2").datepicker({ dateFormat: 'dd-MM-yy' });
$("#txt3").datepicker({ dateFormat: 'yy-dd-M' });
$("#txt4").datepicker({ dateFormat: 'MM-dd-yy' });
$("#txt5").datepicker({ dateFormat: 'dd-m-yy' });
</script>
<br/>
</body>
</html>