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 Athil


Posted on 22 Jun 2019 Category: jQuery Views: 174

Edited on 22 Jun 2019


Here I am going to show 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: