Datepicker-周从周日开始，周数为

Question

如何在日期选择器中显示从周日开始的周以及周数。

例如：我需要从 12/03/23（星期日）开始的星期应该显示第 11 周而不是第 10 周。感谢任何帮助。谢谢

我的代码：-

$(document).ready(function() {
  $('.date-picker').datepicker({
    showWeek: true,
    firstDay: 0,
    changeMonth: true,
    changeYear: true,
    showButtonPanel: false,
    dateFormat: 'dd/mm/yy',
    autoclose: true,
  });
});

<input name="sel-date" id="sel-date" class="date-picker" value="<?= $week_start ?>">

Answer 1

您可以使用日期选择器中的

calculateWeek

属性，也可以使用

beforeShowDay

禁用日期，就像我在代码片段中所做的那样..

告诉我

输入字段上的日期选择器：

$(function(){
 $('.date-picker').datepicker({   
   showWeek: true,      
   firstDay: 0,
   changeMonth: true,
   changeYear: true,
   showButtonPanel: false,
   dateFormat: 'dd/mm/yy',
   autoclose: true,
   calculateWeek: date => $.datepicker.iso8601Week(new Date(date)) + 1,
   beforeShowDay: function(date) {
     return [date.getDay() === 0,''];
   },  
 });
});

#ui-datepicker-div { font-size: 12px; } 

Date Picker on input field: <input name="sel-date" id="sel-date" class="date-picker" value="12/03/2023">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

Answer 2

您可以使用

calculateWeek

功能更改周数：

$('.date-picker').datepicker({
  showWeek: true,
  firstDay: 0,
  changeMonth: true,
  changeYear: true,
  showButtonPanel: false,
  dateFormat: 'dd/mm/yy',
  autoclose: true,
  calculateWeek: date => $.datepicker.iso8601Week(new Date(date)) + 1,
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
Date Picker on input field: <input type="text" name="sel-date" id="sel-date" class="date-picker">