Date Picker & daysOfWeekDisabled

Webdesign Help
1

Hey everyone,

I followed this tutorial : Date Pickers in Bootstrap Studio

And it’s all working fine but I’m trying to disable Saturday and Sunday in the date picker.
Js isn’t really my thing so I looked around and found this short piece of code:

daysOfWeekDisabled: [0,6]

But I just can’t get it to work. I tried adding to different place within the datepicker.js file, but nothing worked so far. Would you guys know how to make this work with Bootstrap Studio ?

Also, I’d like my date selector to NOT allow picking a date before ‘today’ if possible.

Looking forward to your answers !

2

Here is an example
If you downloaded the example from Bootstrap Studio tutorials then you can replace the code in datepicker.js with this.

$(function(){
let d = new Date();
let Sday = d.toLocaleDateString('en-US', { timeZone: 'UTC' });
let datePicker = document.getElementById('datePicker');
let picker = new Lightpick({
    field: datePicker,
	minDate: Sday,
	disableWeekends: true,
    onSelect: function(date){
        datePicker.value = date.format('Do MMMM YYYY');
    }
});
let dateRangePicker = document.getElementById('dateRangePicker');
let pickerRange = new Lightpick({
    minDate: Sday,
	disableWeekends: true,
    field: dateRangePicker,
    singleDate: false,
    onSelect: function(start, end){
        let str = '';
        str += start ? start.format('Do MMMM YYYY') + ' to ' : '';
        str += end ? end.format('Do MMMM YYYY') : '...';
        dateRangePicker.value = str;
    }
});});
3

This works wonderfully, thank you!

Could I also ask you how I could set it up to show the date in french and with Paris timezone?

I tried playing with this line:

let Sday = d.toLocaleDateString(‘en-US’, { timeZone: ‘UTC’ });

And change things to ‘fr-FR’ and ‘Paris’, ‘UTC+1’ or ‘GMT+1’ but none of this work… Again, not a coder here :sweat_smile:

4

I did not know you wanted it in French.
First you need to replace moment.js with this one
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js
and replace datepicker.js with this
moment.locale(‘fr’);
$(function(){
let d = new Date();
let datePicker = document.getElementById(‘datePicker’);
let picker = new Lightpick({
field: datePicker,
minDate: d,
lang:‘fr’,
disableWeekends: true,
onSelect: function(date){
datePicker.value = date.format(‘Do/MMMM/YYYY’);
}
});
let dateRangePicker = document.getElementById(‘dateRangePicker’);
let pickerRange = new Lightpick({
minDate: d,
lang:‘fr’,
disableWeekends: true,
field: dateRangePicker,
singleDate: false,
locale: {
tooltip: {
one: ‘journée’,
other: ‘Journées’
}
},
onSelect: function(start, end){
let str = ‘’;
str += start ? start.format(‘Do/MMM/YYYY’) + ’ a ’ : ‘’;
str += end ? end.format(‘Do/MMM/YYYY’) : ‘…’;
dateRangePicker.value = str;
}
});
});

Bonne chance

5

Again, thanks for your reply!

So I followed your instructions and replaced the external link with the one you provide in your last answer. The field was then still working, but then I replaced the code in datepicker.js with your last one and now the field won’t bring out the calendar when it’s clicked on. It just behaves as a regular text-input.

Merci d’avance pour ton aide !

6

download your datepicker here

7

Well this is just perfect now, merci beaucoup !

1 Like
8

Sorry mate, it’s me again.

The code you provided works perfectly but I need to tweak it a bit more.

For example, i managed to set a max date on december 9th just by adding:

maxDate: new Date(2020, 11, 09),

Right under:

minDate: d,

And it’s working fine!

Now, you helped me disable weekend days but I also need a version where I could just disable every Sundays.

I tried replacing your:

disableWeekends: true,

with:

daysOfWeekDisabled: [0],

But this doesn’t work.

So, as Bernie said, I am once again, asking for your skillful help!

9

daysOfWeekDisabled:[0], doesn’t work because it’s a syntax for Bootstrap datePicker your datePicker is
wakerins lightPicker which is a little outdated and unmaintained. he have a new datepicker the litePicker
The syntax for the lightPicker is disableDates: moment().startOf('month'), ['2020-12-23', '2020-12-24']
Maybe the Bootstrap datePicker is easier to work with