Save the selected date from date picker even page refresh
Question
I have a question here regarding how can I save the cookies of a selected date from a date picker even after my page is reload? I have a page which needs to select 3 different dates from date picker, once the date is selected I would like the text box to save the date into cookies until my next change. Would that be possible to make it?
Looking forward for some guidance.
Thanks.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' href="/jquery-1.5.2.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<title>Blueprint</title>
<style type='text/css'>
#gradient {
color: #000000;
height: 100px;
padding: 10px;
/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#FFD700), to(#fff));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #FFD700, #fff);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFD700, endColorstr=#FFFFFFFF);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFD700, endColorstr=#FFFFFFFF)";
}
</style>
<script type='text/javascript'>
//call for Blueprint
$(function () {
$('.datepower').each(function () {
var disabledDays = [""];
/* utility functions */
function nationalDays(date) {
var m = date.getMonth(),
d = date.getDate(),
y = date.getFullYear();
//console.log('Checking (raw): ' + m + '-' + d + '-' + y);
for (i = 0; i < disabledDays.length; i++) {
if ($.inArray((m + 1) + '-' + d + '-' + y, disabledDays) != -1 || new Date() > date) {
return [true];
}
}
return [true];
}
//Block the Weekends
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
function days() {
var a = $("#datepicker_start").datepicker('getDate');
var b = new Date();
var c = 24 * 60 * 60 * 1000;
var diffDays = Math.round(Math.abs((a - b) / (c)));
$("#totaldays").val(diffDays)
}
$(document).ready(function () {
$.datepicker.setDefaults({
dateFormat: 'dd/mm/yy',
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
constrainInput: true,
beforeShowDay: nationalDays,
});
var selector = function (dateStr) {
var d1 = $('#datepicker_start').datepicker('getDate');
var d2 = $('#datepicker_end').datepicker('getDate');
var diff = 0;
if (d1 && d2) {
diff = Math.floor((d2.getTime() - d1.getTime()) / 86400000); // ms per day
}
$('#totaldays').val(diff);
}
$('#datepicker_start').datepicker({
maxDate: 0,
onSelect: function (selectedDate) {
var minDate = $(this).datepicker('getDate');
if (minDate) {
minDate.setDate(minDate.getDate() + 3);
} //min days requires
$('#datepicker_end').datepicker('option', 'minDate', selectedDate); // Date + 1 or tomorrow by default
days();
}
});
$('#datepicker_end').datepicker({
minDate: 1,
onSelect: function (selectedDate) {
var maxDate = $(this).datepicker('getDate');
if (maxDate) {
maxDate.setDate(maxDate.getDate() - 1);
}
$('#datepicker_start').datepicker('option', 'maxDate', selectedDate); // Date - 1
days();
}
});
$('#datepicker_start,#datepicker_end').change(selector)
});
});
});
//call for Business One
$(function () {
$('.datepower2').each(function () {
var disabledDays = [""];
/* utility functions */
function nationalDays2(date) {
var m = date.getMonth(),
d = date.getDate(),
y = date.getFullYear();
//console.log('Checking (raw): ' + m + '-' + d + '-' + y);
for (i = 0; i < disabledDays.length; i++) {
if ($.inArray((m + 1) + '-' + d + '-' + y, disabledDays) != -1 || new Date() > date) {
return [true];
}
}
return [true];
}
//Block the Weekends
function noWeekendsOrHolidays2(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays2(date);
} else {
return noWeekend;
}
}
function days2() {
var a = $("#datepicker_start2").datepicker('getDate');
var b = new Date();
var c = 24 * 60 * 60 * 1000;
var diffDays = Math.round(Math.abs((a - b) / (c)));
$("#totaldays2").val(diffDays)
}
$(document).ready(function () {
$.datepicker.setDefaults({
dateFormat: 'dd/mm/yy',
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
constrainInput: true,
beforeShowDay: nationalDays2,
});
var selector = function (dateStr) {
var d1 = $('#datepicker_start2').datepicker('getDate');
var d2 = $('#datepicker_end2').datepicker('getDate');
var diff = 0;
if (d1 && d2) {
diff = Math.floor((d2.getTime() - d1.getTime()) / 86400000); // ms per day
}
$('#totaldays2').val(diff);
}
$('#datepicker_start2').datepicker({
maxDate: 0,
onSelect: function (selectedDate) {
var minDate = $(this).datepicker('getDate');
if (minDate) {
minDate.setDate(minDate.getDate() + 3);
} //min days requires
$('#datepicker_end2').datepicker('option', 'minDate', selectedDate); // Date + 1 or tomorrow by default
days2();
}
});
$('#datepicker_end2').datepicker({
minDate: 1,
onSelect: function (selectedDate) {
var maxDate = $(this).datepicker('getDate');
if (maxDate) {
maxDate.setDate(maxDate.getDate() - 1);
}
$('#datepicker_start2').datepicker('option', 'maxDate', selectedDate); // Date - 1
days2();
}
});
$('#datepicker_start2,#datepicker_end2').change(selector)
});
});
});
//call for Sigma
$(function () {
$('.datepower3').each(function () {
var disabledDays = [""];
/* utility functions */
function nationalDays3(date) {
var m = date.getMonth(),
d = date.getDate(),
y = date.getFullYear();
//console.log('Checking (raw): ' + m + '-' + d + '-' + y);
for (i = 0; i < disabledDays.length; i++) {
if ($.inArray((m + 1) + '-' + d + '-' + y, disabledDays) != -1 || new Date() > date) {
return [true];
}
}
return [true];
}
//Block the Weekends
function noWeekendsOrHolidays3(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays3(date);
} else {
return noWeekend;
}
}
function days3() {
var a = $("#datepicker_start3").datepicker('getDate');
var b = new Date();
var c = 24 * 60 * 60 * 1000;
var diffDays = Math.round(Math.abs((a - b) / (c)));
$("#totaldays3").val(diffDays)
}
$(document).ready(function () {
$.datepicker.setDefaults({
dateFormat: 'dd/mm/yy',
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
constrainInput: true,
beforeShowDay: nationalDays3,
});
var selector = function (dateStr) {
var d1 = $('#datepicker_start3').datepicker('getDate');
var d2 = $('#datepicker_end3').datepicker('getDate');
var diff = 0;
if (d1 && d2) {
diff = Math.floor((d2.getTime() - d1.getTime()) / 86400000); // ms per day
}
$('#totaldays3').val(diff);
}
$('#datepicker_start3').datepicker({
maxDate: 0,
onSelect: function (selectedDate) {
var minDate = $(this).datepicker('getDate');
if (minDate) {
minDate.setDate(minDate.getDate() + 3);
} //min days requires
$('#datepicker_end3').datepicker('option', 'minDate', selectedDate); // Date + 1 or tomorrow by default
days3();
}
});
$('#datepicker_end3').datepicker({
minDate: 1,
onSelect: function (selectedDate) {
var maxDate = $(this).datepicker('getDate');
if (maxDate) {
maxDate.setDate(maxDate.getDate() - 1);
}
$('#datepicker_start3').datepicker('option', 'maxDate', selectedDate); // Date - 1
days3();
}
});
$('#datepicker_start3,#datepicker_end3').change(selector)
});
});
});
</script>
</head>
<body>
<link rel="stylesheet" href="/jquery-ui.css"/>
<script href="/jquery-1.8.3.js"></script>
<script href="/jquery-ui.js"></script>
<table id="gradient" align="center" width="400">
<tr>
<td colspan=1 align=left style="font-family:tahoma;font-size:26px;"><b>Blueprint</b>
<p style="font-family:tahoma;font-size:16px;">Last Situation Date:
<input style="width:80px;background-color:transparent;" type="text" class="datepower"
id="datepicker_start" name="frome" value=""></p></td>
<td style="text-align: right">
<label for="days"></label>
<input type="text" readonly="readonly" class="datepower" name="totaldays" id="totaldays"
style="width:80px;font-size:48px;font-weight:bold;background-color:transparent;border:none;text-align:right;"
onChange="this.form.submit()" value=""><b> Days</b></td>
</tr>
</table>
<table id="gradient" align="center" width="400">
<tr>
<td colspan=1 align=left style="font-family:tahoma;font-size:26px;"><b>Business One</b>
<p style="font-family:tahoma;font-size:16px;">Last Situation Date:
<input style="width:80px;background-color:transparent;" type="text" class="datepower2"
id="datepicker_start2" name="frome2" value=""></p></td>
<td style="text-align: right">
<label for="days2"></label>
<input type="text" readonly="readonly" class="datepower2" name="totaldays2" id="totaldays2"
style="width:80px;font-size:48px;font-weight:bold;background-color:transparent;border:none;text-align:right;"
onChange="this.form.submit()" value=""><b> Days</b></td>
</tr>
</table>
<table id="gradient" align="center" width="400">
<tr>
<td colspan=1 align=left style="font-family:tahoma;font-size:26px;"><b>Sigma</b>
<p style="font-family:tahoma;font-size:16px;">Last Situation Date:
<input style="width:80px;background-color:transparent;" type="text" class="datepower3"
id="datepicker_start3" name="frome3" value=""></p></td>
<td style="text-align: right">
<label for="days3"></label>
<input type="text" readonly="readonly" class="datepower3" name="totaldays3" id="totaldays3"
style="width:80px;font-size:48px;font-weight:bold;background-color:transparent;border:none;text-align:right;"
onChange="this.form.submit()" value=""><b> Days</b></td>
</tr>
</table>
</body>
</html>
1 answers
solution1
0 2014-03-04 03:07:15
You should be able to do what you need using the jquery cookie plugin:
https://github.com/carhartl/jquery-cookie
It allows you to save a cookie option:
$.cookie("test", 1);
Read the cookie option:
var cookieValue = $.cookie("test");
And remove a cookie option:
$.removeCookie("test");
See also this answer: How do I set/unset cookie with jQuery?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Remember the date selected in datepicker even after refresh
django- jquery Datetime picker cannot save the form with date selected
How to call a function after a date is selected from a date picker?
How to do something when date is selected from date picker
jQuery date picker does not work after refresh the page
JQuery Date Picker Not Showing on Refresh
Date picker highlights after refresh
Prevent date picker from scrolling with page
jquery date picker selected date format
jQuery date picker, custom populate selected date
Related Tags