4

I have used JQuery Datepicker where the date format is dd/mm/yyyy. I would like the date to be displayed as dd/mm/yy.

Eg. Instead of 15/07/2017, I would like the date to be shown as 15/07/17 in the datepicker.

This is how I am calling the JQuery datepicker, but it is not formating the date as per my need. 

$( ".startdate" ).datepicker({
    dateFormat: 'dd-mm-yy',
    changeMonth: true,
    changeYear: true
});

Is there any inbuilt option for this date format? Or is there a way to create a custom date format according to our own needs.

Alive to die - Anant
  • 70,531
  • 10
  • 51
  • 98

3 Answers3

5

You need to do like below:-

$( ".startdate" ).datepicker({
    dateFormat: 'dd/mm/y',//check change
    changeMonth: true,
    changeYear: true
});

Example:-

$(".startdate").datepicker({
  dateFormat: 'dd/mm/y', //check change
  changeMonth: true,
  changeYear: true
});
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js" data-modules="effect effect-bounce effect-blind effect-bounce effect-clip effect-drop effect-fold effect-slide"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />


<h4>Datepicker with Date Format (dd/mm/y) using JQuery</h4>
<p>Date picker: <input type="text" class="startdate" size="30" /></p>
<p> Date Format : dd/mm/y</p>
Alive to die - Anant
  • 70,531
  • 10
  • 51
  • 98
0

This is what worked for me in every datePicker version (similar approach as in PHP)

$.datepicker.formatDate("dd/mm/y", $.datepicker.parseDate('dd/mm/yy', lowestDate))
FantomX1
  • 1,577
  • 2
  • 15
  • 23
0

I would like to contribute to this community because it has helped me a lot, so on this occasion, I will share my work related to datepicker. I hope it will be helpful to someone. Datepicker has options to enter, select and move dates forward and backward using the keyboard using the plus and minus keys.

<div style="padding-bottom: 10px; height:25px"> <label class="labelModalPP">Datum</label> <input id="datemask" class="inputModalPP" autocomplete="false" style="position: absolute;left: 100px;height: 20px; width:128px" onkeypress="incrementDate(this.value, 1,event)"/> </div>

https://codepen.io/harisba35/pen/jOxWyGm

Haris Basic
  • 1
  • 3