日期选择器- 以星期日为起始,带有周数

huangapple go评论73阅读模式
英文:

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() {
  $(&#39;.date-picker&#39;).datepicker({
    showWeek: true,
    firstDay: 0,
    changeMonth: true,
    changeYear: true,
    showButtonPanel: false,
    dateFormat: &#39;dd/mm/yy&#39;,
    autoclose: true,
  });
});

<!-- language: lang-html -->

&lt;input name=&quot;sel-date&quot; id=&quot;sel-date&quot; class=&quot;date-picker&quot; value=&quot;&lt;?= $week_start ?&gt;&quot;&gt;

<!-- 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(){
 $(&#39;.date-picker&#39;).datepicker({   
   showWeek: true,      
   firstDay: 0,
   changeMonth: true,
   changeYear: true,
   showButtonPanel: false,
   dateFormat: &#39;dd/mm/yy&#39;,
   autoclose: true,
   calculateWeek: date =&gt; $.datepicker.iso8601Week(new Date(date)) + 1,
   beforeShowDay: function(date) {
     return [date.getDay() === 0,&#39;&#39;];
   },  
 });
});

<!-- language: lang-css -->

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

<!-- language: lang-html -->

Date Picker on input field: &lt;input name=&quot;sel-date&quot; id=&quot;sel-date&quot; class=&quot;date-picker&quot; value=&quot;12/03/2023&quot;&gt;


&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;link href=&quot;https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js&quot;&gt;&lt;/script&gt;

<!-- 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 -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月15日 18:09:03
  • 转载请务必保留本文链接:https://go.coder-hub.com/75743239.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定