Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highlighting jQuery datepicker date

Using jQuery Datepicker, related to this page http://keith-wood.name/datepick.html
I want to highlight specify dates given by array

ex: array("2012-12-24" => "red", "2012-12-24" => "green")

How get this approach.

My poor code

<style type="text/css">
    @import"jquery.datepick.css";
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.datepick.js"></script>
<script type="text/javascript">
    $(function () {
        $('#popupDatepicker').datepick();
        $('#inlineDatepicker').datepick({
            onSelect: showDate
        });
    });

    function showDate(date) {
        alert('The date chosen is ' + date);
    }
</script>
</head>
<body>
    <p>A popup datepicker
        <input type="text" id="popupDatepicker">
    </p>
    <p>Or inline</p>
    <div id="inlineDatepicker"></div>
like image 350
kbitsoft Avatar asked Dec 25 '12 00:12

kbitsoft


People also ask

How do I highlight a specific date in Datepicker?

Define beforeShowDay within datepicker() method. In the function create a new date format according to the defined format (dd-mm-yyyy) in an Array. Check for the date in the Array with $. inArray() method if it is available then return [true, "highlight", tooltip_text]; otherwise return [true] .

How to display selected date in datepicker jQuery?

$(document). ready(function () { $("#datepicker"). datepicker({ onSelect: function (dateText, inst) { var date = $(this). val(); alert(date); } }); });


1 Answers

You can also try Kendo UI. It has a Calendar widget and the DatePicker widget which takes an array of dates, from that it will be easy to customize the template of the widget.

Kendo UI - Calendar

like image 105
Durty Avatar answered Sep 24 '22 16:09

Durty