How to control a calendar on a product page by actual current time?

Store Design
1

I am looking for a way to implement the following features on my Shopify product pages using the Liquid template:

  • Display a calendar for date selection on the product pages, and attach the selected date information to the product when added to the cart.
  • Control the available dates in the calendar with these rules:
    • Before 12:00 PM (noon) Japan Time, allow selection of dates from 3 to 4 days in the future.
    • After 12:00 PM Japan Time, only allow selection of the date 4 days in the future.
    • Regardless of the time, dates on the same day up to 2 days in the future and 5 days in the future and beyond should not be selectable.
  • Current time should be obtained using JavaScript. Current time by Liquid is unacceptable as it is the time page generated.
  • Use UTC to convert Japan Time.

Here is the current product page example:

https://shinkansen-ticket.com/products/shinkansenticket-tokyo-kyoto

I appreciate any guidance or resources on how to achieve this.

1 Like
2

Hi @jsato ,

You need use an app to do it.

You can refer https://apps.shopify.com/search?q=Appointment%20Booking%20