Javascript 日期选择器设置所选日期_Javascript_Jquery_Html_Datepicker

Javascript 日期选择器设置所选日期

javascript jquery html

Javascript 日期选择器设置所选日期,javascript,jquery,html,datepicker,Javascript,Jquery,Html,Datepicker,这是我的代码，页面名为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/jqu

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

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

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

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

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

使用：

完整代码：

或者您可以使用：

完整代码：

您还可以使用Localstorage来查看

使用a，代码如下所示：

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

完整代码：

希望这会有所帮助。

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

您可以将所选日期保存在localStorage中，并在重新加载页面时读取该日期，然后将其设置为所选日期

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

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

是一个工作示例

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

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

$.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['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();
        }
    });
});

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

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