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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12143526/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 11:22:00  来源:igfitidea点击:

How do I set the first day and weeks for Bootstrap Datepicker

jqueryasp.nettwitter-bootstrapdatepicker

提问by Thomas B?g Petersen

I'm new to this: I'm playing with Bootstrap Datepicker and have got it to work with

我是新手:我正在使用 Bootstrap Datepicker 并且已经开始使用它

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

And then a

然后一个

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

But I can't set first day or weeks like in jQuery UI. Normally I can use firstDay: 1, weekHeader: "Uge", showWeek: truelike in jQuery UI and show 3 months like numberOfMonths: [3, 1], stepMonths: 3.

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

How do I do this for the Bootstrap Datepicker?

我如何为 Bootstrap Datepicker 执行此操作?

回答by agriboz

Try adding weekStart. Visit herefor more details about it

尝试添加weekStart. 访问这里了解更多详情

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

回答by Girish

Some example. Hope it helps. AS usual goes inside $(document).ready(function(){});

一些例子。希望能帮助到你。像往常一样进入 $(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');

回答by cse_vikashgupta

No need of jquery or javascript-

不需要 jquery 或 javascript-

You can set this property in Tag itself.

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

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

For Example- I have set to start from Monday, then data-date-week-start="1"

例如 - 我已经设置从星期一开始,然后 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>

回答by ronezone

Did you notice there's a typo in your 'id' element? Misspelled "datepickeron" as "dateoickeron." My apologies in advance for not simply adding this in a comment, but I haven't earned permission to do so yet.

你有没有注意到你的“id”元素中有一个错字?将“datepickeron”拼错为“dateoickeron”。我提前道歉,因为不是简单地在评论中添加这个,但我还没有获得这样做的许可。

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

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

...should be:

...应该:

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

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

回答by Virus Neeraj

you have to import import {BsLocaleService} from 'ngx-bootstrap/datepicker'; and import {defineLocale, enGbLocale} from 'ngx-bootstrap/chronos';

你必须从 'ngx-bootstrap/datepicker' 导入 import {BsLocaleService};并从 'ngx-bootstrap/chronos' 导入 {defineLocale, enGbLocale};

in constoctor you have to add defineLocale('en-gb', enGbLocale); in ngOnit you have to add this.localeService.use('en-gb');

在constoctor你必须添加defineLocale('en-gb', enGbLocale); 在 ngOnit 你必须添加 this.localeService.use('en-gb');

its working for BS4 with Angular 7+

它适用于带有 Angular 7+ 的 BS4

回答by Ankita Sharma

Calendar.component.ts file(it's work for ngx-bootstrap datepicker -4 with angular7)

Calendar.component.ts 文件(它适用于 ngx-bootstrap datepicker -4 with angular7)

step 1 import {BsLocaleService} from 'ngx-bootstrap/datepicker'; import {defineLocale, enGbLocale} from 'ngx-bootstrap/chronos';

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

step 2 in constructor add defineLocale('en-gb', enGbLocale); step 3 // in **ngOnit* add this.localeService.use('en-gb');

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