jQuery datepicker- highlight date selected from datepicker in a calendar

问题

How do I highlight the date selected by two different associates on associate.html in training.html,that is, two associates select their training dates and these two dates must be highlighted on the training calendar.

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:

I think your problem is that dates are not highlighted correctly, isn't?

Try this:

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

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

EDIT: You can do this to save a date in session and convert the string value to a date value:

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

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

I hope this will help!

来源：https://stackoverflow.com/questions/30692321/jquery-datepicker-highlight-date-selected-from-datepicker-in-a-calendar

标签

javascript

jquery

html

datepicker