Implementing a custom date selection calendar in liquid template with specific date rules

Shopify Partner
1 0 1

I am looking to implement the following features on my 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 it is 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 dates 5 days in the future and beyond should not be selectable.
  • A time error margin of about 30 minutes for the Japan Time standard is acceptable.
  • Ideally, the time of adding the product to the cart should be based on the current Japan Time, but using the Japan Time at page load is also acceptable.
  • Using the current time in Liquid (the time when the page is generated) as the reference time is not acceptable.

Here is the current product page example:


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


Replies 0 (0)