Join the Team Forms community

Updated last week

Conditional Rendering of Component based on Time Range

I have this form and I want my form responder to respond to it only if the time is between 2 pm to 7 am. So I put the fields in a panel and used this JavaScript to conditionally show the panel.

TypeScript
const currentTime = moment();
const startTime = moment().set({hour: 13, minute: 0}); 
const endTime = moment().set({hour: 6, minute: 0}); 

show = currentTime.isBetween(startTime, endTime);


It's currently 2:31 PM here but the panel is still not showing.

E
1 comment·1 reply

Hi Yoradel,


Please correct me if i'm misinterperrating your requirements but based on the example code you have provided, you want to conditionally show a part of your form only between 13:00 to 06:00 the next day?

If that is the case then there a few issues with your expressions:

  1. Calling the moment() function will return the current date/time in UTC. This means that it could be 9am where you are but it could be 1am in the UTC timezone. You would need to modify your code to consider the users local timezone instead.

  2. You have constructed a startDate that is after your endDate which will not work.


The following may work for you scenario, however you may need to modify it for your scenario.


JavaScript
const currentTime = moment().local()
show = currentTime.hour() > 13 || currentTime.hour() < 6

Hi Yoradel,

Just wondering if the solution proposed has help to resolve your issue? if so I recommend marking it as he solution to make it easier for others to identify and find in the future :)