CODEWITHSUNDEEP
javascriptjqueryhtmldatepicker
Giovan
Giovan

Reputation: 21

Datepicker set the selected date

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?

Upvotes: 2

Views: 3085

Answers (3)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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.

Upvotes: 1

Aruna Tebel
Aruna Tebel

Reputation: 1466

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

Upvotes: 0

rrk
rrk

Reputation: 15846

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

Upvotes: 0

Related Questions