Datepicker set the selected date

Question

This is my code, the page is called 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>

Want I wanna do is when I select the date in the datepicker and the page is reloaded I would like to set the date in the datepicker to the previously selected date. Is it possible?

Your code is not valid. You can not have html tags inside your **. — Thomas Bormans, Aug 16 '15 at 14:34
Do you want to keep the selected date unchanged even if the page is reloaded? — Aruna Tebel, Aug 16 '15 at 14:43

score 1 · Answer 1 · edited May 23 '17 at 12:00

To store date and get it after reloading page you have to use cookies, so you can use cookies (js-cookie or jquery cookie) or use localStorage, see code exmples bellow :

Using js-cookie :

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

Full code :

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

Or you can use jquery cookie :

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

Full code :

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

You can also use Localstorage take a look at local storage vs cookies.

Using a Local storage the code will be like following :

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

Full code :

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

Hope this will help.

score 0 · Answer 2 · answered Aug 16 '15 at 14:38

You first need to set the value from calendar to the hidden field before you can submit the value to server.

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

Aruna Tebel · Answer 3 · 2015-08-16T15:23:04.783

If I understood correctly, what you need to do is, when we select a date and reload the page, keep it as the selected date.

You can do it by saving the selected date in the localStorage and reading it whenever the page is reloaded, and setting it as the selected date.

Inside the onchange event, you should store the selected date in localStorage,

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

When the page is loaded, you should check whether the localStorage item for the key of lastSelectedDate exists, and if so, set it to that value by casting it to a Date object.

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

Here is a working example

Datepicker set the selected date

3 Answers3