javascript - Datepicker with week number and days - Stack Overflow

admin管理员组

文章数量:1324827

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: /

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/iandrabedin/jhducskr/

• javascript
• jquery
• datepicker

Share Improve this question Follow asked Aug 9, 2016 at 22:45 Iandra BedinIandra Bedin 12611 gold badge11 silver badge66 bronze badges 1

• stackoverflow./questions/25746358/… – dmoo Commented Aug 9, 2016 at 23:20

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis./ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis./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">

本文标签： javascriptDatepicker with week number and daysStack Overflow