在 jQuery UI 日期选择器中捕获一个值并将其提醒给用户

Question

我需要你的帮助。

如何将一些功能添加到下面的现有代码中，以便使下面的选项成为可能：

如果 date1 字段为空并且用户选择了一个日期，将弹出一条警告消息并显示 "User has selected [date]"
如果 date1 字段不为空并且用户选择了一个新日期，将弹出一条警告消息并显示“用户已将 [old_date_value] 更改为 [new_date_value ]

我对jQuery完全陌生，所以批评我时请放轻松=\

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css">
  </style>
  <script type="text/javascript">
    window.onload = function() {
      $("#date1").datepicker({
        changeMonth: true,
        changeYear: true
      });
    }
  </script>
</head>
<body>
  <input type="text" id="date1">
</body>
</html>

Answer 1

将代码的日期选择器部分更改为：

var prevDate = null;
$("#date1").datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: function(date) {
      if (prevDate === null) {
        alert('User has selected ' + date);  
      } else {
        alert('User has change ' + prevDate + ' to ' + date);
      }
      prevDate = date;
    }
});

你可以找个合适的地方放prevDate。

另外jQuery-datepicker会对你有很大帮助。

Answer 2

您需要使用日期选择器中的 onSelect 选项。 onSelect 函数有两个参数，dateText（日期字符串）和 datepicker 实例。您可以从日期选择器实例中获取最后一个值，如 lastVal。

使用以上信息，您的 javascript 将如下所示：

$("#date1").datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: function(dateText,inst) {
        if(dateText !== inst.lastVal){
            if (inst.lastVal == null) {
                alert("User has selected: "+dateText);
            } else {
                alert("User has change "+inst.lastVal+" to "+dateText)
            }
        }
    }
});

使用此解决方案，您无需在变量中管理之前的日期值，这很好。

我已经复制了您的设置 in jsFiddle，因此您可以在习惯 jQuery 的同时尝试一下。

在 jQuery UI 日期选择器中捕获一个值并将其提醒给用户

Capturing a value in a jQuery UI datepicker and alerting it back to the user

javascript

jquery

jquery-ui

datepicker