UncleCoder.com

UncleCoder.com

Free programming examples and instructions

jQuery ui datepicker Change date format

Demo and example for how to change date format in jquery UI datepciker

by athilmp


Posted on 01 Jan 0001 Category: jQuery Views: 61

Edited on 01 Jan 0001


Here I am going to how to format date in jQuery UI Datepicker.

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>

 

 



Leave a Comment: