Question

我对javascript和JSP很陌生，而且我很难把时间包裹在被调用的内容中，以及何时何地。我在一个JSP文件中写这个。我现在的起始代码是：

<input type=text name="myTextField" >
<input type=button name="myTextButton" value="Select a date" 
  onclick="displayDatePicker(myTextField)">

<script type="text/javascript">
// ???
</script>

让我困惑的第一件事是displayDatePicker函数。我不能为我的生活找到关于这个函数的任何文档（它是jquery吗？是javascript吗？它是bootstrap吗？我可以通过其他args吗？）。另一种方法是声明一个自定义函数并让myTextButton的onclick调用该函数。我设法让它工作，但我不知道如何显示一个在选择日期时实际上有回调的日期选择器。

这是我想要的功能：

用户点击myTextField，手动输入日期，然后输入提醒弹出“您选择.. / .. / ....”或“选择了无效日期”
用户点击myTextButton，从日期选择器中选择一个日期，然后myTextField填充该日期并弹出一个警告“你选择../../...."

Answer 1

这将提醒框中输入的值。但是你应该为此使用UI。为什么重新发明轮子。时间很宝贵。由于它的跨浏览器兼容性，jQuery UI是最受欢迎的。

<input type="date" id="date">
<button onclick="date()">Select a date</button>

<script>
    function date() {
        var dateVal = document.getElementById("date").value;
        alert("Your typed in " + dateVal);
    }
</script>

jQuery UI Datepicker

http://jqueryui.com/datepicker/

Answer 2

与其他人所说的一样，你可以使用Jquery UI datepicker。首先是导入所需的脚本和CSS。

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

回答您想要的功能。看看我创建的示例。
JSFIDDLE

如果用户没有在datepicker中选择并手动输入文本，则应手动检查。这是一个例子。

$( "#myTextField" ).datepicker({
     onClose: function(){
        validate($(this).val());
     }
});

function validate(dateText){
     try {
         alert("You selected is : "+ $.datepicker.parseDate('mm/dd/yy',dateText));
         } 
     catch (e) {
         alert("invalid date");
      }; 
    }

在datepicker关闭后，验证函数将调用并尝试解析，如果日期不可解析，它将返回错误。

Answer 3

displayDatePicker是写入JS库的内置Javascript函数，您已将其用于DateTime选择器。

此外，如果您要创建自己的自定义日期选择器，则必须包含自定义函数，该函数将处理OnChange，Onclick，OnSelection更改事件类型。

我建议您使用Jquery.UI或Bootstrap控件库来实现datepicker功能。

如何从日期选择器中选择日期后调用函数？

3 个答案: