Bootstrap date / calendar time tagged plug-in Datepicker

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Because the job needs, Bootstrap date / calendar plugin Datepicker using the project, according to the need to add date marking, realize the effect diagram as follows:


We record the solution:

1 first analyzed the DOM element function (below), you can see the oval labeled, indicating that this date control is divided into three layers, the first is to display the date,

   Second shows the month, third shows a year

2 my practice is to display the date place an addr attribute as a marker for the currently selected years, regardless of is the day before and after the click event, in the switch, or months or years click event,

Need to change the value of this property.

3 then modify the month before and after switching event, modification date, click event (this event including select month), the month before and after modification of switching events, here's a list of dates click event.

$('#zhixingdate').datepicker().on('changeDate', function(ev){  //The date change event

var dmonth=ev.date                   //The currently selected date

getOrderlyPowerDays(dmonth);              //Other operations date click event execution (tagged)

});

The 4 mark, which is above the getOrderlyPowerDays () method, in this method, will get all the display TD tag +addr attribute on the years together and method in the query to the

Compare the date, if the same date, then add signs (add remark style)

 1 function showRemark(days){
 2     var datepicker=$('#zhixingdate').parent();
 3     var Mdateswitch=datepicker.find(".datepicker .datepicker-days .table-condensed thead .switch");    //The current month elements in the days on the calendar
 4     var UIDays=datepicker.find(".datepicker .datepicker-days .table-condensed tbody tr td.day");    //Display all TD elements on the layer
 5     UIDays.removeClass("remark");            //Remove all marks
 6     var dmonths=Mdateswitch.attr("addr");    //The addr property to display on the layer of value
 7 
 8     //Circulating TD display element, display on the value of the +addr property value, and the dasys array results to pass over the set is equal, if plus the markup style remark
 9     for(var i=0; i<days.length;i++){
10         var v = days[i];
11         UIDays.each(function(){                
12             var t=$(this).html();
13             if(v == (dmonths+(parseInt(t,10)<10?("0"+parseInt(t,10)):parseInt(t,10)))){
14                  if(!$(this).hasClass("remark") && !$(this).hasClass("new") && !$(this).hasClass("old")){
15                      $(this).addClass("remark");
16                  }
17             }
18         });
19      }
20  }
1 .remark {
2     background: url("../img/remark.png") no-repeat scroll 0 0 transparent;
3 }

Also encountered the same problem, can contact me, talk to each other!^_^


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Kerwin at November 15, 2013 - 11:56 AM