I have a Date Picker (#datePicker1) on a page, where the user chooses a "Check-In Date".
And I have a Button (#button10) - which needs to be HIDDEN / SHOWN based on the date 'PICKED' in the date-picker field.
If the user chooses a date between 1st April and 31st August - the BUTTON should be VISIBLE - Otherwise, it should be hidden.
I have managed to get it to work more or less as it should - but the 'solution' is restricted to the CURRENT YEAR...
Here's my code ~
export function datePicker1_change(event) {
var startD = new Date('04/01/2021');
var endD = new Date('08/31/2021');
var CheckIn = $w('#datePicker1').value;
if(startD >= CheckIn || endD <= CheckIn) {
$w('#button10').hide()
} else {
$w('#button10').show()
}
}
NEED HELP WITH THE FOLLOWING ~
Change the code so that it works for ANY YEAR in the future [i.e. not have it specify '2021' in the 'new Date()' parts of the code]
Make the code such that the 'new Date()' variables are BASED ON OUR LOCAL TIME (Indian Standard Time - IST) - and not affected by the Users local time (eg. a user in the US/UK)
Thanks in advance, for any help...
(NB: I am a novice at coding - so, do bear with my ignorance!)
OK, so after reading your post again, I think I understand what you're trying to do. You want to check if the checkin date in one year is between two dates of the same year. Every year, the start is April 1, and end is August 31.
Try the following:
let checkinD = new Date(2022, 5, 15); // month is zero based let year = checkinD.getFullYear(); let startD = new Date(year, 3, 1); // month is zero based ket endD = new Date(year, 7, 31); // month is zero based console.log(checkinD, startD, endD); if((checkinD.getTime() <= endD.getTime() && checkinD.getTime() >= startD.getTime())) { console.log('in'); } else { console.log('out'); }
The above code uses console.log() statements to see what's happening. You can add your hide and show as you need.
I hope this helps.
Ah! Okay... now it all makes sense! :-)
Thanks again...
Okay, looks like I figured it out!
Tweaked your code and put it like this...
export function datePicker1_change(event) { let checkinD = new Date($w('#datePicker1').value); // month is zero based let year = checkinD.getFullYear(); let startD = new Date(year, 3, 1); // month is zero based let endD = new Date(year, 7, 31); // month is zero based if((checkinD.getTime() <= endD.getTime() && checkinD.getTime() >= startD.getTime())) { $w('#button10').show() } else { $w('#button10').hide() } }
… And it's working perfectly!
Thanks a tonne, for your time and suggestions!!!
NB: I am still confused about a part of the code...
let startD = new Date(year, 3, 1); let endD = new Date(year, 7, 31);
Why isn't the start date = (year, 4, 1) & end date = (year, 8, 31) ??
Since the 'period' in question is 1st April (month=4) through 31st August (month=8)
Hey again, @Yisrael (Wix) ...
So, what I'm trying to do is basically -
Show the button if a user picks any date between 1st April & 31st August - and hide the button if they pick a date beyond that date range - and this should happen irrespective of which year they choose.
So, if 1st April of ANY FUTURE YEAR is chosen, the button should be SHOWN.
My original code (posted above) was doing the job - but it was restricting the code to run only for the year 2021.
I have been trying to use your code suggestions above... but as mentioned, I am not sure I am understanding the logic of your code too clearly (simply because I don't know enough about coding!)… And so, I don't think I am applying the code correctly.
Your earlier code and the last code suggestion - are they supposed to go together - or, should I just put the last code as a whole - ignoring the earlier code (with the console.log part)?
Does your code go INSIDE a 'datePicker1_change function' - or just get added directly to the page code?
I've tried various permutations - but none of them are working.
Perhaps just convert the dates into time (the number of milliseconds since Jan 1, 1970), and compare. Something like this:
if((CheckIn.getTime() <= endD.getTime() && CheckIn.getTime() >= startD.getTime())) { $w('#button10').show(); } else { $w('#button10').hide()l }