如何在 shopify 部分设置中添加日期时间选择器

Question

如何在

Shopify -> Store -> Customize -> Section Setting

中添加日期时间选择器选项。

我想添加要按计划显示的滑块。因此在此处创建了用于输入日期时间字段的选项。现在我希望当我点击那个字段时，日期选择器应该是可见的，就像通常在文本框上所做的那样。

我试图在该部分添加一个

jQuery datepicker

。但它总是显示为日期选择器未定义。

Answer 1

为同一任务的设置添加了下一个字段。非常遗憾，但 liquid 无法将变量插入模式（（

    {
      "type": "header",
      "content": "Start date"
    },
    {
      "type": "range",
      "id": "start_year",
      "label": "Year",
        "min": 2019,
        "max": 2023,
        "step": 1,
      "default": 2019
    },
    {
      "type": "range",
      "id": "start_month",
      "label": "Month",
        "min": 1,
        "max": 12,
        "step": 1,
      "default": 11
    },
    {
      "type": "range",
      "id": "start_day",
      "label": "Day",
        "min": 1,
        "max": 31,
        "step": 1,
      "default": 27
    },
    {
      "type": "range",
      "id": "start_hours",
      "label": "Hours",
        "min": 0,
        "max": 23,
        "step": 1,
      "default": 16
    },
    {
      "type": "range",
      "id": "start_minute",
      "label": "Minute",
        "min": 0,
        "max": 60,
        "step": 1,
      "default": 0
    }

Answer 2

Shopify 中没有日期选择器，但您可以通过以下方式从设置中获取日期：（将代码放在架构设置中）

       {
            "type": "text",
            "id": "date_picker",
            "label": "Choose date",
            "default": "12-24-2022",
            "info": "e.g. mm-dd-yyyy"
        }

然后只需使用过滤器添加或分配日期，我认为如果没有像 jQuery 日期选择器这样的可视化日期选择器

，您将得到您想要的

{{ section.settings.date_picker | date: "%m-%d-%Y" }}

希望这对你有帮助。 :)

Answer 3

Shopify 中没有日期选择器字段。

您将需要使用标准文本字段并将其用作日期基础。

有关可用字段，请参阅文档：

基本输入设置

专门的输入设置

Answer 4

只是想在有人在 Shopify 上搜索产品或购物车页面的日期选择器时提供一些更新。

Appstore 中有很多应用程序，例如： https://apps.shopify.com/date-picker

对于我和团队来说，这非常易于使用，并且为我们节省了大量的开发工作。

Answer 5

您可以使用

dd/mm/yyyy hh:mm:ss

格式的常规文本字段在您的架构中输入结束日期和时间，如下例所示：

{
  "type": "text",
  "id": "end_time",
  "label": "End date and time",
  "default": "30/05/2023 23:00:00",
  "info": "Format: dd/mm/yyyy hh:mm:ss"
}

然后，您可以使用

date

过滤器并指定正确的格式，将此字符串转换为 .liquid 文件中的日期对象：

{% assign end_date = section.settings.end_time | date: "%d/%m/%Y %H:%M:%S" %}

这将创建一个日期对象，可用于时间计算或根据需要格式化。

要以特定格式显示日期，例如

30 May 2023 23:00:00 GMT+01:00

，您可以再次使用

date

过滤器根据需要格式化日期：

{{ end_date | date: "%-d %B %Y %H:%M:%S GMT%:z" }}

其中

%B

是月份的全称，

%z

是时区偏移量，

%:z

显示时区偏移量，在小时和分钟之间用冒号。