Datepicker with week number and days
12,645
Adding an event handler to the week numbers in the beforeShow
handler will do that
$(function() {
$("#datepicker").datepicker({
showWeek: true,
firstDay: 1,
maxDate: 'today',
beforeShow: function(elem, ui) {
$(ui.dpDiv).on('click', 'tbody .ui-datepicker-week-col', function() {
$(elem).val('Week ' + $(this).text()).datepicker( "hide" );
});
}
});
});
.ui-datepicker table tbody .ui-datepicker-week-col {
cursor: pointer;
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<p>Click week numbers to select weeks, dates to select dates etc.</p>
<label>Select Week</label>
<input type="text" id="datepicker" name="weekPicker">
Author by
Iandra Bedin
Updated on June 13, 2022Comments
-
Iandra Bedin almost 2 years
I have a datepicker that shows the week of the year.
What I would like to do is enable the week number, so the user can choose the week number or the day.
Example: one user picked the week 32, and other user picked 08/08/2016.
HTML code:
<label>Select Week</label> <input type="text" id="datepicker" name="weekPicker">
Script code:
$(function(){ $( "#datepicker" ).datepicker({ showWeek: true, firstDay: 1, maxDate: 'today' }); });
Working demo: https://jsfiddle.net/iandrabedin/jhducskr/
-
Iandra Bedin over 7 yearsThank you!! It works great! But what if I have two datepickers?
-
Iandra Bedin over 7 yearsIf I select one week on the first datepicker, and then a different week on the second datepicker, the first one changes again. What I would like to do, as an example, is from week 30 to week 32, like a range of weeks. So it would be like: Select Week : Week 30. Select Something else : Week 32.
-
adeneo over 7 years@IandraBedin - indeed it does, unbinding the event on close should solve that -> jsfiddle.net/deunrjkv/1