如何为 Bootstrap Datepicker 设置第一天和第一周答案

【问题标题】：How do I set the first day and weeks for Bootstrap Datepicker如何为 Bootstrap Datepicker 设置第一天和第一周
【发布时间】：2012-08-22 00:46:30
【问题描述】：

我是新手：我正在使用 Bootstrap Datepicker 并且可以使用它

$(document).ready(function () {
  $('#datepickeron').datepicker()
});

然后是一个

<div id="dateoickeron"></div>

但我不能像在 jQuery UI 中那样设置第一天或第一周。通常我可以在 jQuery UI 中使用 firstDay: 1, weekHeader: "Uge", showWeek: true 并显示 3 个月，例如 numberOfMonths: [3, 1], stepMonths: 3。

如何为 Bootstrap Datepicker 执行此操作？

【问题讨论】：

标签： jquery asp.net twitter-bootstrap datepicker

【解决方案1】：

尝试添加 weekStart 。访问here了解更多详情

$(document).ready(function () {
 $('#datepickeron').datepicker({
   weekStart: 0 // day of the week start. 0 for Sunday - 6 for Saturday
 });
});

【讨论】：

我认为showWeek 选项在bootstrap-datepicker.js 中不可用
+1 非常正确.. showWeek 不可用。也不能一次显示三个月
如果我的日期选择器在单击图标后出现，如何使其工作？
使用引导日期范围选择器，您需要在选项的语言环境对象中将 firstDay 设置为 1

【解决方案2】：

一些例子。希望能帮助到你。像往常一样进入 $(document).ready(function(){});

$('#fromDate').datepicker('setStartDate', '-15d');
$('#fromDate').datepicker('setEndDate', '1d');
$('#toDate').datepicker('setStartDate', '-15d');
$('#toDate').datepicker('setEndDate', '1d');


    // Initialize the dates
$('#cv-rpt-sdate').datepicker({format: 'dd-mm-yyyy',"autoclose": true});
$('#cv-rpt-edate').datepicker({format: 'dd-mm-yyyy',"autoclose": true});
$('#cv-rpt-sdate').datepicker('setEndDate', '1d');
$('#cv-rpt-edate').datepicker('setEndDate', '1d');

$('#dboard-att-date').datepicker({format: 'dd-mm-yyyy',"autoclose": true});
$('#dboard-att-date').datepicker('setStartDate', '-7d');
$('#dboard-att-date').datepicker('setEndDate', '1d');

【讨论】：

【解决方案3】：

不需要 jquery 或 javascript-

您可以在 Tag 本身中设置此属性。

property -   data-date-week-start   
type  -    integer  
default  -    0 
description - day of the week start. 0 for Sunday - 6 for Saturday

例如-我设置从星期一开始，然后 data-date-week-start="1"

<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy" data-date-week-start="1">
  <input class="span2" size="16" type="text" value="12-02-2012">
  <span class="add-on"><i class="icon-th"></i></span>
</div>

【讨论】：

【解决方案4】：

你必须导入从“ngx-bootstrap/datepicker”导入 {BsLocaleService}；和从 'ngx-bootstrap/chronos' 导入 {defineLocale, enGbLocale};

在构造函数中你必须添加 defineLocale('en-gb', enGbLocale); 在 ngOnit 你必须添加 this.localeService.use('en-gb');

它适用于 Angular 7+ 的 BS4

【讨论】：

【解决方案5】：

您是否注意到您的“id”元素中有错字？将“datepickeron”拼错为“dateoickeron”。对于我没有简单地在评论中添加此内容，我提前道歉，但我还没有获得这样做的许可。

<div id="dateoickeron"></div>

...应该是：

<div id="datepickeron"></div>

【讨论】：

【解决方案6】：

Calendar.component.ts 文件（它适用于带有 angular7 的 ngx-bootstrap datepicker -4）

第 1 步从“ngx-bootstrap/datepicker”导入 {BsLocaleService}；从 'ngx-bootstrap/chronos' 导入 {defineLocale, enGbLocale};

第 2 步在构造函数中添加 defineLocale('en-gb', enGbLocale); 第 3 步 // 在 **ngOnit* 中添加 this.localeService.use('en-gb');

【讨论】：

嗨 Nico Haase ...我更新了我的答案..如果您对此有任何疑问，请检查并告诉我