保存从日期选择器中选择的日期，甚至页面刷新
[英]Save the selected date from date picker even page refresh
问题描述
我在这里有一个问题，即使重新加载页面后，如何从日期选择器中保存所选日期的Cookie？ 我有一个页面需要从日期选择器中选择3个不同的日期，选择日期后，我希望文本框将日期保存到Cookie中，直到进行下一次更改为止。 那有可能做到吗？
期待一些指导。
谢谢。
<!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 个解决方案
解决方案1
0 2014-03-04 03:07:15
您应该能够使用jquery cookie插件执行所需的操作：
https://github.com/carhartl/jquery-cookie
它允许您保存cookie选项：
$.cookie("test", 1);
阅读cookie选项：
var cookieValue = $.cookie("test");
并删除一个cookie选项：
$.removeCookie("test");
另请参见以下答案： 如何使用jQuery设置/取消设置cookie？
django- jquery日期时间选择器无法保存选择日期的表单
[英]django- jquery Datetime picker cannot save the form with date selected
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.