Free programming examples and instructions

jQuery ui Date picker change date format

Code and Demo for How to change date format in JQuery ui datepicker

by Athil

Posted on 06 May 2017 Category: jQuery Views: 4859

Edited on 10 Nov 2017


Hi, Here I am going to show how to change the date format of jQuery date picker.

Download the CSS and scripts here

 $("#txt1").datepicker({ dateFormat: 'dd-M-yy' });

Full Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <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" />
    <h1> Demo for jquery datepicker format</h1>



    <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 type="text/javascript" src="js/jquery-ui.js">
        $("#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' });




Leave a Comment: