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
Y
1 comment·3 replies

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

It seems to be working on my main panel - the one I will be showing between 2pm to 6 am the next day.

However, I have this message inside another panel, saying "Sorry, it's past the deadline." that will be displayed if the time has already passed 6 am and not yet 2 pm. I'm using this expression:

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


but the deadline message is still visible now even if it's already 2 pm. Can you enlighten me with this?


Hi Yoradel,


I believe there’s a mistake in your logic. If you want to display a component between 6 AM and 2 PM, you should check whether the hour is greater than or equal to 6 AND less than 13. In your expression, you’re using an OR (||), but you should likely be using AND (&&) along with a greater than or equal (>=) condition.


Here’s the correct approach:

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

Note that the examples I provided are meant as a reference to help you understand the logic. You’ll need to adjust them based on your specific scenario.