日期选择器设置所选日期

Datepicker set the selected date

本文关键字：日期 设置 选择器      更新时间：2023-09-26

这是我的代码，页面名为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>

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

要存储日期并在重新加载页面后获得它，您必须使用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查看本地存储与cookie 。

使用本地存储，代码将如下所示:

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

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

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

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

您可以通过将所选日期保存在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")));
}

这里是一个工作示例

相关文章：