CODEWITHSUNDEEP
jquerycssdatepicker
kbitsoft
kbitsoft

Reputation: 61

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>

Upvotes: 5

Views: 4060

Answers (3)

Ivan Chau
Ivan Chau

Reputation: 1433

Use onDate callback to achieve the goal.

Example: Click "Day-by-day" Tab > National days (CSS) to view the demo

http://keith-wood.name/calendarsPicker.html

$('#nationalPicker').calendarsPicker({ 
    onDate: nationalDays,
    showTrigger: '#calImg'}); 

var natDays = [[1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'], [4, 27, 'za'], 
    [5, 25, 'ar'], [6, 6, 'se'], [7, 4, 'us'], [8, 17, 'id'], 
    [9, 7, 'br'], [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']]; 

function nationalDays(date, inMonth) { 
    if (inMonth) { 
        for (i = 0; i < natDays.length; i++) { 
            if (date.month() == natDays[i][0] && date.day() == natDays[i][1]) { 
                return {dateClass: natDays[i][2] + '_day', selectable: false}; 
            } 
        } 
    } 
    return {}; 
}

Reference: http://forum.jquery.com/topic/highlight-multiple-dates-on-keith-wood-jquery-datepick-plugin

Upvotes: 0

Sampath
Sampath

Reputation: 65860

You can try below one with your code base.(this is a sample)

CSS

.Highlighted a{
   background-color : Green !important;
   background-image :none !important;
   color: White !important;
   font-weight:bold !important;
   font-size: 12pt;
}

Jquery

$(document).ready(function() {
    var SelectedDates = {};
    SelectedDates[new Date('12/25/2012')] = new Date('12/25/2012');
    SelectedDates[new Date('05/04/2012')] = new Date('05/04/2012');
    SelectedDates[new Date('06/06/2012')] = new Date('06/06/2012');

    $('#txtDate').datepicker({
        beforeShowDay: function(date) {
            var Highlight = SelectedDates[date];
            if (Highlight) {
                return [true, "Highlighted", Highlight];
            }
            else {
                return [true, '', ''];
            }
        }
    });
});​

UPDATE 1

Working Example Here

Jquery document says there having "beforeShowDay:" Option.

Check Datepicker Widget API

UPDATE 2 :

You can refer jquery by using Google CDN like below.So Commented out your jquery references and get like below.

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css"
            type="text/css" media="all" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

UPDATE 3 :

Below I have mentioned only pseudo code.Change it according to Jquery syntax.

$(document).ready(function() {

$('#txtDate').datepicker({
    beforeShowDay: function(date) {

      //according to the date you have to decide which css should load.
        var Highlight = SelectedDates[date];
        var yourColor = whichColor(SelectedDates[date]);

        if (Highlight  && yourColor =='red') {
            return [true, "RedHighlighted", Highlight];
        }
        else if (Highlight   && yourColor =='green') {
             return [true, "GreenHighlighted", Highlight];
        }
        else {
            return [true, '', ''];
        }
    }
});


//return a color according to your date logic
 function whichColor(dateArray) { 

      return color;
   }

});​

For more information check Highlight Specific Dates in jQuery UI DatePicker

I hope this will help to you.

Upvotes: 2

Durty
Durty

Reputation: 457

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

Upvotes: 3

Related Questions