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

时间:2015-06-07 10:10:20

标签: javascript jquery html datepicker

如何在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>

training.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>

1 个答案:

答案 0 :(得分:2)

我认为你的问题是日期没有正确突出显示,不是吗?

试试这个:

<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); 

我希望这会有所帮助!