jquery - 仅当在确认框中单击“确定”时才更改日期选择器文本框值

Question

我想检查所选的日期选择器值。如果所选日期选择器与上一个起息日差异大于 2，将显示确认框。并且只有当用户从确认框中单击“确定”时，该值才会更改，否则它应该显示以前的值。我面临的问题是，即使用户单击取消，所选日期也会显示在文本框中。

$(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);
}
}        
});
});

Answer 1

您可以使用update每当您更改日期选择器中的日期时，我还添加了其他部分，以仅在 diff < 2 时更新前一个日期的值.

这是工作演示代码:

$(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);
    }
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<input type="text" id="planning_completion" />