0

I'm trying to set format for the date picker but it clears the default value in the field.

$(".date").datepicker();
// While trying to format (the same format as mentioned above 'dd-mm-yy'), the field value is cleared on execution of below code
$('.date').datepicker("option", "dateFormat", "dd-mm-yy");
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>

<body>
  <!-- Kindly note that format of the value here is 'dd-mm-yy' -->
  <p>Date: <input class='date' type="text" value="31-12-2016"></p>
</body>

</html>

Already I have read through these posts |JQuery UI Datepicker date format issue with initial value|Why does constructing a JQuery UI Datepicker clear the field's value?|Setting 'option' on jqueryui DatePicker clears the textbox's value?

All states that the existing value should match date picker's format which I'm trying to set. Looks like I'm clean in that.

Can anyone help me out? Thanks.

Community
  • 1
  • 1
liwevire
  • 782
  • 2
  • 9
  • 21

1 Answers1

1

Its working! I set the date format on initialization of the datepicker. Now the default value is retained and date format is also working.

@Twisty Thanks for throwing light on this

//Setting the format on initialisation
$(".date").datepicker({ dateFormat: 'dd-mm-yy' });

// While trying to format (the same format as mentioned above 'dd-mm-yy'), the field value is cleared on execution of below code

//$('.date').datepicker("option", "dateFormat", "dd-mm-yy");
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>

<body>
  <!-- Kindly note that format of the value here is 'dd-mm-yy' -->
  <p>Date: <input class='date' type="text" value="31-12-2016"></p>
</body>

</html>
liwevire
  • 782
  • 2
  • 9
  • 21