javascript - JS input type date field, keep values selected after form submission

Question

Is there a way for the

<input type="date" id="from" class="mdl-textfield__input" name="from" value="{{moment date=d format='YYYY-MM-DD'}}" style="position:relative; float: left; width: 180px; bottom: 10px;"/>

field to remember selected value after form submission?

Answer 1

You can use the HTML5 Local Storage to save the date after the submit. This is how you can do it:

1) Add to your form onsubmit function:

<form onsubmit="setDate()"> 

2) Create Setter and Getter functions to the date:

    function setDate(){
        var value = document.getElementById('from').value;
        localStorage.setItem("user_selected_date", value); 
    }
    function getDate(){
        if (localStorage.getItem("user_selected_date") === null) {// Check if there is selected date. 
              return "{{moment date=d format='YYYY-MM-DD'}}"; 
        }
        return localStorage.getItem("user_selected_date");
    }

3) Set the value to your input:

document.getElementById('from').value = getDate();