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

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

$(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: true like in jQuery UI and show 3 months like numberOfMonths: [3, 1], stepMonths: 3.

How do I do this for the Bootstrap Datepicker?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Try adding weekStart . Visit here for more details about it

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

Method 2

Some example. Hope it helps. AS usual goes inside $(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');

Method 3

No need of jquery or javascript-

You can set this property in Tag itself.

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″

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

Method 4

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

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

its working for BS4 with Angular 7+

Method 5

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.

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

…should be:

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

Method 6

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

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

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0