jQuery datepicker - 在日历中突出显示从 datepicker 中选择的日期答案

【问题标题】：jQuery datepicker- highlight date selected from datepicker in a calendarjQuery datepicker - 在日历中突出显示从 datepicker 中选择的日期
【发布时间】：2015-06-07 10:10:19
【问题描述】：

如何在 training.html 中的 associate.html 上突出显示两个不同的同事选择的日期，即两个同事选择他们的培训日期，这两个日期必须在培训日历上突出显示。

associate.html

 <!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .ui-datepicker {font-size:12pt ! important}
        </style>

        <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-    ui.css" rel="stylesheet">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script>

    $(document).ready(function(){
        $("#datepicker").datepicker();
        $('form#dateform').submit(function(){
            var aselectedDate=$('#datepicker').val();
            if(aselectedDate!=''){
            alert('You selected: ' +aselectedDate);
        } 
        return false;
        });
    });
    </script>
    </head>
    <body><br><br>
        <form id="dateform" name="dateform" action="#" method="POST">
            <table>
                <tr>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>Select a date</td>
                    <td><input id="datepicker" name="date"/></td>
                </tr>
            </table>
            <input type="submit" name="submit" value="Submit"/>
        </form>
    </body>
</html>

培训.html

    <!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .highlight {
            background: red !important;
        }

        .ui-datepicker {
            font-size: 16pt !important;
        }
    </style>
</head>
<body>
    <link href="http://code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

    <br><br>
    <br>
    <center><div id="datepicker"></div></center><br>
    <script type="text/javascript">
        var Event = function (text, className) {
            this.text = text;
            this.className = className;
        };
        var events = {};
        events[new Date("06/07/2015")] = new Event("You have selected Training 1", "highlight");
        events[new Date("06/16/2015")] = new Event("You have selected Training 2", "highlight");
        events[new Date("07/07/2015")] = new Event("You have selected Training 3", "highlight");
        events[new Date("06/18/2015")] = new Event("You have selected Training 4", "highlight");

        $('#datepicker').datepicker({
            beforeShowDay: function (date) {
                var event = events[date];
                if (event) {
                    return [true, event.className, event.text];
                } else {
                    return [true, '', ''];
                }
            },
            onSelect: function (date) {
                var event = events[new Date(date)];
                if (event) {
                    alert(event.text);
                }
                else {
                    alert('No training event');
                }
            }
        });
    </script>
    <script>
        $(document).ready(function () {
            $('form#dateform').click(function () {
                var aselectedDate = $('#datepicker').val();
                if (aselectedDate != '') {
                    alert('You selected: ' + aselectedDate);
                }
                return false;
            });
        });
    </script>
    <form id="dateform" name="dateform" action="#" method="POST">
        <table>
            <tr>
                <td>
                    <input id="datepicker" name="date" />
                </td>
            </tr>
        </table>

    </form>
</body>
</html>

【问题讨论】：

标签： javascript jquery html datepicker

【解决方案1】：

我认为您的问题是日期没有正确突出显示，不是吗？

试试这个：

<style type="text/css">
    .highlight {
        background: red !important;
    }

    .ui-datepicker {
        font-size: 16pt !important;
    }
    .highlight a {
        background: none !important;
    }
</style>

编辑： 您可以这样做以在会话中保存日期并将字符串值转换为日期值：

var associateDate = new Date(); //save in session
localStorage.setItem('date1', associateDate);

var stringValue = localStorage.getItem('date1'); // load
var training = new Date(stringValue);

我希望这会有所帮助！

【讨论】：

这是我面临的另一个问题。感谢您的解决方案。我的实际问题是如何在 training.html 中显示的日历中突出显示员工选择的日期（通过 associate.html 中显示的日期选择器）？（即如何链接这两个文件并将关联选择的日期传递到 training.html 并突出显示它？）。
嗯，这取决于你是想传递很多日期还是只传递一些日期。一个简单的解决方案是使用sessionStorage 或localStorage，但也许这不是最好的方法。 see link
我想传递两个日期值。 sessionStorage 和 localStorage 将此日期值作为字符串传递。如何将此字符串值转换为日期值？
我可以在两个 html 文件之间使用它吗？即将一个文件中的日期传递到另一个html文件？关联日期被存储。但我无法在 training.html 中检索此值。
尝试使用 localStorage ;) 看看这个link