Menu
I've been using the jQuery UI Calendar / Date Picker with great success over the last couple months. I've been given a new requirement to allow for a week to be selected (Sun - Sat) rather than a single day.
Has anyone accomplished this before?
383
inside the jQuery script code just paste the code. $( ". selector" ). datepicker({ dateFormat: 'yy-mm-dd' });
Do one of the following: For a text box control or a date picker control, ensure that the Data type list displays the appropriate data type, and then click Format. For an expression box control, ensure that the Format as list displays the appropriate data type, and then click Format.
datepicker('getDate'); var dayName = $. datepicker. formatDate('DD', curDate); This can also be used to get a shortened day of the week name (M), long or short day of the month (MM or M) by substituting DD for whatever component you're after.
Syntax: $(". selector"). datepicker( {defaultDate:"+6"} );
Inline week picker using jQuery UI DataPicker (requires jQuery UI 1.8+):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css"> <script type="text/javascript"> $(function() { var startDate; var endDate; var selectCurrentWeek = function() { window.setTimeout(function () { $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active') }, 1); } $('.week-picker').datepicker( { showOtherMonths: true, selectOtherMonths: true, onSelect: function(dateText, inst) { var date = $(this).datepicker('getDate'); startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay()); endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6); var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat; $('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings )); $('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings )); selectCurrentWeek(); }, beforeShowDay: function(date) { var cssClass = ''; if(date >= startDate && date <= endDate) cssClass = 'ui-datepicker-current-day'; return [true, cssClass]; }, onChangeMonthYear: function(year, month, inst) { selectCurrentWeek(); } }); $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); }); $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); }); }); </script> </head> <body> <div class="week-picker"></div> <br /><br /> <label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span> </body> </html> run it on JsFiddle http://jsfiddle.net/manishma/AVZJh/light/
84
Here is another way at going at it. -Display the week with showWeek. - Define a beforeShow to attach an event handler using live() so the week row is highlighted (including the week number). - Detach the event handler with die() onclose. This is particularly handy when you are using normal datepickers elsewhere in your code.
$( ".week-picker" ).datepicker({ dateFormat: "yy-mm-dd", showOtherMonths: true, selectOtherMonths: true, changeMonth: true, changeYear: true, showWeek: true, beforeShow: function(dateText, inst) { // for week highighting $(".ui-datepicker-calendar tr").live("mousemove", function() { $(this).find("td a").addClass("ui-state-hover"); $(this).find(".ui-datepicker-week-col").addClass("ui-state-hover"); }); $(".ui-datepicker-calendar tr").live("mouseleave", function() { $(this).find("td a").removeClass("ui-state-hover"); $(this).find(".ui-datepicker-week-col").removeClass("ui-state-hover"); }); }, onClose: function(dateText, inst) { var wk = $.datepicker.iso8601Week(new Date(dateText)); if (parseInt(wk) < 10) { wk = "0" + wk; } var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); if (isNaN(wk)) { $(this).val(""); } else { $(this).val(year + ";" + wk); } // disable live listeners so they dont impact other instances $(".ui-datepicker-calendar tr").die("mousemove"); $(".ui-datepicker-calendar tr").die("mouseleave"); } }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
