英文:
Datepicker- Week starts on Sunday with Week number
问题
如何在日期选择器中显示以星期日开头的一周,同时显示星期数字。
示例:我需要从12/03/23(星期日)开始的一周显示周数11,而不是10。感谢任何帮助。谢谢
我的代码:
英文:
How do I display week starts from Sunday in datepicker along with week numbers.
eg: I need Week starting from 12/03/23(Sunday) should display week number 11 instead of 10. Any help appreciated. thanks
my code:-
<!-- language: lang-js -->
$(document).ready(function() {
$('.date-picker').datepicker({
showWeek: true,
firstDay: 0,
changeMonth: true,
changeYear: true,
showButtonPanel: false,
dateFormat: 'dd/mm/yy',
autoclose: true,
});
});
<!-- language: lang-html -->
<input name="sel-date" id="sel-date" class="date-picker" value="<?= $week_start ?>">
<!-- end snippet -->
答案1
得分: 1
你可以使用日期选择器的 calculateWeek
属性,也可以使用 beforeShowDay
来禁用日期,就像我在代码片段中所做的那样。
Date Picker on input field:
$(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>
这些代码片段用于在输入字段上创建日期选择器,其中包括一些选项,如显示周数、日期格式以及在 beforeShowDay
中禁用星期天的日期。
英文:
You can use the calculateWeek
property from the datepicker also you can use beforeShowDay
to disable the dates like i have done in the snippet..
let me know
Date Picker on input field:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(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,''];
},
});
});
<!-- language: lang-css -->
#ui-datepicker-div { font-size: 12px; }
<!-- language: lang-html -->
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>
<!-- end snippet -->
答案2
得分: 0
你可以使用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">
英文:
You can use calculateWeek
function to change the week number:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('.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,
});
<!-- language: lang-html -->
<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">
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论