How to show additional info on selected day using jQuery Datepicker?
I am using jQuery's Datepicker for a textbox as below. I have restricted the days a user is allowed to select but my question is if there is a way to have a special text appeared in the textbox along with each selected date.
For example, if a user selects day number 1, then there is shown Monday, 19 September 2011 How to make it Monday, 19 September 2011 and a special name for the Monday here?
The same goes for all the available to select days like Tuesday, 20 September 2011 and a special name for the Tuesday here?
Thank you for this
<开发者_开发问答script>
$(document).ready(function() {
var date = new Date();
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
$('#datepicker').datepicker({
minDate: new Date(y, m, d),
dateFormat: 'DD, d MM yy',
beforeShowDay: function(date){
var day = date.getDay();
return [day == 1 || day == 4 || day == 5,""];
}
});
$( "#datepicker" ).datepicker( $.datepicker.regional[ "el" ] );
});
</script>
An alternative is to use the dayNamesShort
option, if you do not intend to use the default ones. That way, you can simply configure it in your dateFormat
:
var myWeekdays = "Sunny Manic Terrible Wild Thorny Freaky Sadistic".split(' ');
$('#datepicker').datepicker({
...
dateFormat: 'DD, d MM yy (D)',
dayNamesShort: myWeekdays
});
See this in action: http://jsfiddle.net/william/Xm6Dm/2/.
Add this array:
var weekday=new Array(7);
weekday[0]="Sunny Sunday";
weekday[1]="Manic Monday";
weekday[2]="Terrible Tuesday";
weekday[3]="Wild Wednesday";
weekday[4]="Thorny Thursday";
weekday[5]="Freaky Friday";
weekday[6]="Sadistic Saturday";
Then add this method:
onSelect: function(dateText, inst) {
var day = new Date(dateText).getDay();
$(this).val(dateText + ': ' + weekday[day]);
},
Demo: http://jsfiddle.net/AlienWebguy/Xm6Dm/
精彩评论