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" />

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

1 个答案: