Datepicker 设置选定的日期答案

【问题标题】：Datepicker set the selected dateDatepicker 设置选定的日期
【发布时间】：2015-08-16 14:30:43
【问题描述】：

这是我的代码，页面名为 Cal.html：

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/resources/demos/style.css">

  <script>
    $(function() {
      $.datepicker.setDefaults($.datepicker.regional['it']);
      $('#datepicker').datepicker({
        inline: true,
        altField: '#datascelta',
        onSelect: function(){
          $('#formscelta').submit();
        }
      });
    });
  </script>

  <div id="datepicker"></div>
  <form id="formscelta" action="Cal.html" method="post">
    <input type="hidden" name="datascelta" id="datascelta">
  </form>
</head>

我想做的是当我在日期选择器中选择日期并重新加载页面时，我想将日期选择器中的日期设置为先前选择的日期。有可能吗？

【问题讨论】：

您的代码无效。您的 . 中不能有 html 标签
即使页面重新加载，是否要保持所选日期不变？

标签： javascript jquery html datepicker

【解决方案1】：

要存储日期并在重新加载页面后获取它，您必须使用 cookie，因此您可以使用 cookie（js-cookie 或 jquery cookie）或使用 localStorage，请参见下面的代码示例：

使用 js-cookie ：

Cookies.set('datascelta', dataValue); //set datascelta
Cookies.get('datascelta'); //get datascelta

完整代码：

$(function () {
    $.datepicker.setDefaults($.datepicker.regional['it']);
    $('#datepicker').datepicker({
        inline: true,
        altField: '#datascelta',
        defaultDate: Cookies.get('datascelta') ? Cookies.get('datascelta') : new Date() //get the date after reload and init datepicker
        onSelect: function (dataValue) {
            Cookies.set('datascelta', dataValue); //store the date in cookies before submiting form
            $('#formscelta').submit();
        }
    });
});

或者您可以使用 jquery cookie ：

$.cookie('datascelta', dataValue);  //set datascelta
$.cookie('datascelta');  //get datascelta

完整代码：

$(function () {
    $.datepicker.setDefaults($.datepicker.regional['it']);
    $('#datepicker').datepicker({
        inline: true,
        altField: '#datascelta',
        defaultDate: $.cookie('datascelta') ? $.cookie('datascelta') : new Date() //get the date after reload and init datepicker
        onSelect: function (dataValue) {
            $.cookie('datascelta', dataValue); //store the date in cookies before submiting form
            $('#formscelta').submit();
        }
    });
});

你也可以用Localstorage看看local storage vs cookies。

使用 Local storage 代码将如下所示：

localStorage['datascelta'] = dataValue;  //set datascelta
localStorage['datascelta'];  //get datascelta

完整代码：

$(function () {
    $.datepicker.setDefaults($.datepicker.regional['it']);
    $('#datepicker').datepicker({
        inline: true,
        altField: '#datascelta',
        defaultDate: localStorage['datascelta'] ? localStorage['datascelta'] : new Date() //get the date after reload and init datepicker
        onSelect: function (dataValue) {
            localStorage['datascelta'] = dataValue; //store the date in cookies before submiting form
            $('#formscelta').submit();
        }
    });
});

希望这会有所帮助。

【讨论】：

【解决方案2】：

您首先需要将日历中的值设置为隐藏字段，然后才能将值提交到服务器。

$(function () {
    $.datepicker.setDefaults($.datepicker.regional['it']);
    $('#datepicker').datepicker({
        inline: true,
        altField: '#datascelta',
        onSelect: function (dateText) {
            $('#datascelta').val(dateText); //setting hidden field value
            $('#formscelta').submit();
        }
    });
});

【讨论】：

【解决方案3】：

如果我理解正确，您需要做的是，当我们选择一个日期并重新加载页面时，将其保留为所选日期。

您可以通过将所选日期保存在localStorage 中并在页面重新加载时读取它并将其设置为所选日期来实现。

在onchange 事件中，您应该将选定的日期存储在localStorage，

$('#datepicker').datepicker({
     inline: true,
     altField: '#datascelta',
     onSelect: function () {
         localStorage.setItem("lastSelectedDate", $(this).val());
         $('#formscelta').submit();
     }
 });

页面加载时，您应该检查lastSelectedDate 的键的localStorage 项是否存在，如果存在，则通过将其转换为Date 对象来将其设置为该值。

if (localStorage.getItem("lastSelectedDate") != "") {
    $('#datepicker').datepicker("setDate", 
        new Date(localStorage.getItem("lastSelectedDate")));
}

Here 是一个工作示例

【讨论】：