jQuery UI DatePicker - return wrong Date Format

user_13565898 0
Viewed 465

I have a datepicker that looks like this https://jsfiddle.net/crmu20ag/4/

By default, it displays the current day in the format dd.mm.yy

However, after selecting the date, the format changes to mm.dd.yy

For example, today is 6.6.2020, I will select the date 6.10.2020 and the month will change from June to October.

I have no idea where I'm making a mistake.

$("#datepicker").datepicker({
     dateFormat: "dd.mm.yy",
     minDate: 0,
     maxDate: "1years",
     changeMonth: true,
     changeYear: true,


     onSelect: function(date_text,inst)
     {
      var from = new Date(date_text);
      $( "#datepicker" ).datepicker( "option", "minDate",from);

/*
      $.ajax({
       type: "POST", 
       dataType: "json",
       url: {link do!},
       data: { color: $('#datepicker').val(), time: $('#time').val() },
       success:function(data) {

       },
      });
*/
     }


    }).datepicker("setDate", {$datum});

    // validate date
    $("#datepicker").datepicker();
    var previousDate;

    $("#datepicker").focus(function(){
     previousDate= $(this).val(); ;
    });
    $("#datepicker").blur(function(){
     var newDate = $(this).val();
     if (!moment(newDate, 'DD.MM.YYYY', true).isValid()){
      $(this).val(previousDate);
      console.log("Error");
     }
    });

    // disable manual beforeDay
    var dateToday = new Date();

    $("#datepicker").change(function () {

     var updatedDate = $(this).val();
     var instance = $(this).data("datepicker");
     var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, updatedDate, instance.settings);

     if (date < dateToday) {
      $(this).datepicker("setDate", dateToday);
     }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link href="https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css" rel="stylesheet"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<input type="text" id="datepicker" class="form-control" autocomplete="off">

jquery-ui-datepicker jquery javascript
1 Answers

the issue is with var from = new Date(date_text); it creates a new date using date_text which is in the unexpected/unsupported format of "dd.mm.yy". read more here

Solution #1

manually create the correct date string like so:

var from = date_text.split(".");
var from_reformatted = from[1] + "-" + from[0] + "-" + from[2]
from = new Date(from_reformatted);

Example:

date_text= "DD.MM.YY"

from will be an array ["DD", "MM", "YY"]

from_reformatted will be "MM-DD-YY" which is an acceptable string by the Date constructor

this will work for YOUR case with dateformat="dd.mm.yy"

Solution #2 (Recommended):

var from = $('#datepicker').datepicker('getDate');

this will always work regardless of dateformat

$("#datepicker").datepicker({
  dateFormat: "dd.mm.yy",
  minDate: 0,
  maxDate: "1years",
  changeMonth: true,
  changeYear: true,


  onSelect: function(date_text, inst) {
    //ISSUE HERE: from is parsed as MM-DD-YY while date_text is meant to be DD.MM.YY, so it mixes months and days
    //var from = new Date(date_text);
    var from = $('#datepicker').datepicker('getDate');
    $("#datepicker").datepicker("option", "minDate", from);

    /*
    $.ajax({
      type: "POST", 
      dataType: "json",
      url: {link do!},
      data: { color: $('#datepicker').val(), time: $('#time').val() },
      success:function(data) {

      },
    });
    */
  }


}).datepicker("setDate", {
  $datum
});

// validate date
$("#datepicker").datepicker();
var previousDate;

$("#datepicker").focus(function() {
  previousDate = $(this).val();;
});
$("#datepicker").blur(function() {
  var newDate = $(this).val();
  if (!moment(newDate, 'DD.MM.YYYY', true).isValid()) {
    $(this).val(previousDate);
    console.log("Error");
  }
});

// disable manual beforeDay
var dateToday = new Date();

$("#datepicker").change(function() {

  var updatedDate = $(this).val();
  var instance = $(this).data("datepicker");
  var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, updatedDate, instance.settings);

  if (date < dateToday) {
    $(this).datepicker("setDate", dateToday);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<input type="text" id="datepicker" class="form-control" autocomplete="off">

<button type="button" onclick='$( "#datepicker" ).datepicker( "option", "minDate",0);'>Reset Min Date</button>

to answer your 2nd question about minimum date, it's by design of your code.. it sets the minimum date to the date picked in the following line

$("#datepicker").datepicker("option", "minDate", from);

you can remove tat line or reset the minimum date to whatever you like... eg:

$("#datepicker").datepicker("option", "minDate", 0);
user_13609540
Related