jQuery datepicker- highlight date selected from datepicker in a calendar

Question

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>

debiasej · Answer 1 · 2015-06-08T06:58:06.860

2

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!

edited Jun 08 '15 at 06:58

answered Jun 07 '15 at 13:01

debiasej

980
1
14
26

This was another issue I was facing. Thanks for the solution. My actual question is how can I highlight a date chosen by an associate( through a datepicker displayed in associate.html) in the calendar shown in training.html? (i.e how can I link both the files and pass the associate selected date into training.html and highlight it?). – newbie Jun 07 '15 at 15:32
Well, it's depend on if you want to pass a lot of dates or just some dates. An easy solution it's use `sessionStorage` or `localStorage` but maybe it's not the best way. [see link](http://stackoverflow.com/questions/11609376/passing-data-between-html-pages) – debiasej Jun 07 '15 at 16:21
I want to pass two date values. sessionStorage and localStorage pass this date value as a string. How can I convert this string value to a date value? – newbie Jun 07 '15 at 18:27
Can I use this between two html files? i.e passing date in one file into another html file? The associatedDate gets stored. But I am not able to retrieve this value in training.html. – newbie Jun 08 '15 at 01:37
Try with localStorage ;) Have a look at this [link](https://code.google.com/p/sessionstorage/) – debiasej Jun 08 '15 at 06:56

jQuery datepicker- highlight date selected from datepicker in a calendar

1 Answers1

Linked