0

我有一个问题，关于即使在我的页面重新加载后，如何从日期选择器中保存选定日期的 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>
4

1 回答 1

0

您应该能够使用 jquery cookie 插件做您需要的事情：

https://github.com/carhartl/jquery-cookie

它允许您保存 cookie 选项：

$.cookie("test", 1);

阅读 cookie 选项：

var cookieValue = $.cookie("test");

并删除一个 cookie 选项：

$.removeCookie("test");

另请参阅此答案：如何使用 jQuery 设置/取消设置 cookie？

于 2014-03-04T03:07:15.730 回答