Change the datepicker textbox value only if clicks OK in the confirmation box

Question

I want to check the selected date picker value. If the selected date picker and the previous value date difference is greater than 2, a confirmation box will display. And only if the user clicks OK from the confirmation box the value should change else it should display the previous value. The issue I'm facing is even if the user clicks on cancel the selected date is showing in the textbox.

$(function() {
var beforeChange = $("#planning_completion").val();
$("#planning_completion").on("changeDate", function () {
var selected = $(this).val();
var date1 = new Date(beforeChange);
var date2 = new Date(selected);
var diffDays = parseInt((date2 - date1) / (1000 * 60 * 60 * 24), 10); 
if(diffDays > 2){
    var didConfirm = confirm("Allocated date for this task is "+beforeChange+". Are you sure You want to change the date?");
    if(didConfirm == true){
        $("#planning_completion").val(selected);
} else {
    $("#planning_completion").val(beforeChange);
}
}        
});
});

user_10606400 · Answer

You can use update whenever you change a date inside your datepicker and also i have added else part to update the value with previous date only if diff < 2.

Here is working demo code :

$(function() {
  $('#planning_completion').datepicker();
  //set today date
  $('#planning_completion').datepicker('setDate', new Date());
  var beforeChange = $("#planning_completion").val();
  $("#planning_completion").on("changeDate", function() {
    var selected = $(this).val();
    var date1 = new Date(beforeChange);
    var date2 = new Date(selected);
    var diffDays = parseInt((date2 - date1) / (1000 * 60 * 60 * 24), 10);
    console.log("diff"+diffDays)
    if (diffDays > 2) {
      var didConfirm = confirm("Allocated date for this task is " + beforeChange + ". Are you sure You want to change the date?");
      if (didConfirm == true) {
        $('#planning_completion').datepicker('update', selected); //added selcted value and update the same
      } else {
        $('#planning_completion').datepicker('update', beforeChange); //added beforeChange value and update the same

      }
    } else {
      //no change if less then 2 diff
      $('#planning_completion').datepicker('update', beforeChange);
    }
  });
});

Change the datepicker textbox value only if clicks OK in the confirmation box

1 Answers