stefangabos / Zebra_Datepicker

A super-lightweight, highly configurable, cross-browser date time picker jQuery plugin
https://stefangabos.github.io/Zebra_Datepicker/
Other
398 stars 183 forks source link

Only allow current month selection #188

Closed baffourt closed 2 years ago

baffourt commented 2 years ago

I don't seem to understand the direction property properly, I want the direction to ONLY allow dates in the current month. When I hardcode the direction with direction: ['01-Nov-2022', '30-Nov-2022'] it works but when these same values are coming from variables, then it doesn't work

var today = new Date();
var year = today.getFullYear();
const month = today.toLocaleString('default', { month: 'short' });
var begDate = "'01" + '-' + month + '-' + year + "'";
var lastDayOfMonth = new Date(year, today.getMonth() + 1, 0);
var lastDay = "'" + lastDayOfMonth.getDate() + '-' + month + '-' + year + "'";
console.log("direction: [" + begDate +',' + lastDay+ "]")
$('.datepicker').Zebra_DatePicker({
                direction: [begDate, lastDay],
                format: 'd-M-Y'
});

the direction has to be dynamic for every month so it cannot be hard coded. How should this be approached?

stefangabos commented 2 years ago

You need to first disable all dates with

disabled_dates = ['* * * *']

and then

enabled_dates = ['* 11 2022 *']

i haven't tested the above but that should be it

stefangabos commented 2 years ago

disregard my previous comment because i just read your comment better this time :)

that is because your code generates this

['01-Nov-2022','30-Nov-2022']

whereas you need this

['01-11-2022','30-11-2022']

notice the Nov instead of 11

(the above assumes that you have your format set to d-m-Y)

baffourt commented 2 years ago

@stefangabos , my date format is d-M-Y Your suggestion does not work even if I hard code it to

direction: ['01-11-2022', '30-11-2022']

If I however hardcode this

direction: ['01-Nov-2022', '30-Nov-2022']

it works.

My question is, since I cannot hard code the direction for every month, I generate it with some js as above, however, the generated code direction with the variables does not work, although the output is the same as the hardcoded value.

stefangabos commented 2 years ago

it will not work only if the values variables are different than those you put by hand. i can't see why else wouldn't work...

stefangabos commented 2 years ago

you were using extra quotes for some reason changing this

var begDate = "'01" + '-' + month + '-' + year + "'";

to this

var begDate = '01' + '-' + month + '-' + year;

and this

var lastDay = "'" + lastDayOfMonth.getDate() + '-' + month + '-' + year + "'";

to this

lastDay = lastDayOfMonth.getDate() + '-' + month + '-' + year

fixes your issue

stefangabos commented 2 years ago

here's a jsfiddle

baffourt commented 2 years ago

Ok great, I think this jsfiddle works. Thank you for the assistance. Issue is fixed.