Need help with code related to Date Picker Field

bablifarm · February 4, 2021, 9:38am

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

yisrael-wix · February 4, 2021, 9:58am

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
}

bablifarm · February 4, 2021, 1:48pm

Thanks for your response @yisrael-wix !

However, your code suggestion changes the if-statement part of my code, right?

But as long as I have the ‘variables’ set as:
var startD = new Date( ‘04/01/2021’ );
var endD = new Date( ‘08/31/2021’ );

… Doesn’t THAT prevent the code from doing what I want?
Which is, for it to be functional for ANY year in the future.

So, I was trying some ‘guess-work’ variations - like this:
var startD = new Date ( '04/01/ ??? ’ );
var endD = new Date ( '08/31/ any? ’ );

But none of that works!

When I substituted my code’s if-statement with your suggestion - the SAME thing happens (as was happening with my code) - which is:

The hide/show function WORKS as long as the chosen date in the Date-Picker is WITHIN 2021 …
But it DOES NOT work for future years - which is what I WANT to achieve.

yisrael-wix · February 4, 2021, 2:05pm

@bablifarm My code checked according to milliseconds since Jan 1, 1970) and has no connection to what year. The date to check is either between the start and end dates, or it’s outside (before or after) the start and end dates.

I guess I don’t understand what you mean by “functional for any year in the future”.

So, let’s put it this way… what is it exactly you are trying to do? What do you want to check in 2021? And what do you want in future years?

yisrael-wix · February 4, 2021, 2:34pm

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.

bablifarm · February 4, 2021, 4:09pm

@yisrael-wix
[" You want to check if the checkin date is between two dates, and every year, the start is April 1, and end is August 31. "]

Exactly!

I am not understanding your code too clearly as yet - am trying to figure it out…

So, after I put in your console.log code, where/ how should I input my show/hide code(s)?
As an if-statement within [ export function datePicker1_change(event)] - AFTER your code?

I am trying out various permutations (as I said, I am a total novice at coding) - but haven’t been able to figure it out yet.

Might trouble you again tomorrow - if I can’t figure it out.

Anyway… thanks a tonne!

yisrael-wix · February 4, 2021, 4:57pm

@bablifarm

Not sure I know when you want to hide and when you want to show, but something like this:

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
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()
}

bablifarm · February 5, 2021, 9:56am

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.

bablifarm · February 5, 2021, 10:33am

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)

yisrael-wix · February 7, 2021, 9:09am

The months are 0-based. That is, January is 0, April is 3, August is 7, and, well, you get the idea…

bablifarm · February 7, 2021, 10:21pm

Ah! Okay… now it all makes sense!
Thanks again…

CODE-NINJA · February 8, 2021, 1:42am

In addition to Yisraels very good explanation and tipps (as always), you can also take a look onto this example here. . . .
https://www.media-junkie.com/databases
…read the related post, belonging to this example …

…and take a look onto the “sport-sheduler-page” (datepicker)…
https://www.media-junkie.com/datepicker

…it could give you some additional information about → how to use and work with datapicker-element.

Good luck and happy coding.

bablifarm · February 9, 2021, 11:49am

@russian-dima … thanks for pointing us to those resources!

I’ve been trying to figure out my NEXT problem, from the links which those pages lead to… however, I’m stuck again!

NEXT PROBLE ~

Trying to write a code so that when the user CHECKS a checkbox, located on a DIFFERENT ‘state’ of a multi-state box (‘state3’), a THIRD datepicker field, #datePicker3 - located on the same ‘state3’, gets populated by the date that the user has CHOSEN EARLIER in #datePicker1 (located in ‘state2’)…

State 2 ~ Where I have successfully implemented @yisrael-wix 's code suggestions… and things are working fine.

State 3 ~ Where the user arrives AFTER making selections for datePicker 1 & 2 on State 2…

When they arrive at this State, ALL fields are empty.

When/if they click the checkbox (“Choose your room(s)” - marked here with red arrow) - the datePicker 3 field (marked here with yellow arrow) needs to AUTOMATILLY populate with the date they chose in the earlier datePicker 1 field (State 2)

I have tried to modify @yisrael-wix 's earlier code suggestion - to try and achieve this - but I am NOT being able to get it to work!

The code I have now is:-

export function checkboxGroup1_change(event) {

let ChkInDayRm1 = new Date($w('#datePicker1').value);
let startDateRm1 = new Date(ChkInDayRm1); 

startDateRm1.setDate(startDateRm1.getDate());

$w("#datePicker3").value = ChkInDayRm1;
}

But the RESULT is not as intended - here’s what is happening ~

The datePicker 3 field IS getting POPULATED - but with a wrong date! It is invariably fetching the date 01/01/1970.

Where am I going wrong?

Also, I actually (finally) need the checkbox to be on ‘toggle’ -
i.e. if it is checked, the datePicker 3 field gets populated - but if the user then unchecks the checkbox, then datePicker 3 needs to revert to being EMPTY.

Thanks for any suggestions, in advance…

Topic		Replies	Views
Hide and show an element based on dates. Ask the community code , question	6	1498	July 24, 2023
Creating an if else statement based on a DatePicker Value Ask the community code , question	4	784	October 10, 2018
Datepicker Issues Ask the community code , question	8	421	November 18, 2018
Show Element Based On Date Ask the community code , question	1	96	May 9, 2022
Formatting DatePicker Date Ask the community code , question	7	1522	April 12, 2022

Need help with code related to Date Picker Field

Related topics