根据下拉列表中选择的值设置 datetimepicker 格式

Posted 2023-05-09

【中文标题】根据下拉列表中选择的值设置 datetimepicker 格式

【英文标题】：Set datetimepicker format depending on the chosen value in dropdown

【发布时间】：2016-04-17 03:48:53

【问题描述】：

如果用户在下拉菜单中选择“天”，我希望 datetimepicker 仅显示天数，如果用户选择“月”，则显示月数。

代码在haml文件中：

= select_tag 'date_format', options_for_select(["Days", "Months"]), onchange: "myFunction()"

= text_field_tag :from, class: 'datepick'

 :javascript
  function myFunction() 
      var value = document.getElementById("date_format").value;
      if (value == "Days") 
        $(".datepick").datepicker("destroy");
        $(".datepick").datetimepicker(
          format: 'd.m.Y'
        );
       else if (value == "Months") 
        $(".datepick").datetimepicker("destroy");
        $(".datepick").datepicker(
          format: "mm/yyyy"
        );
      
  

现在效果不好。请帮助我找出我在哪里犯了错误。如何覆盖（“.datepick”）？

【问题讨论】：

将类 datepick 添加到您的 select_tag

【参考方案1】：

尝试使用 'dateFormat' 和 'formatDate' 选项而不是 'format'

【讨论】：

您没有理解问题。如果选择“月份”，我会得到一个只有几个月的日历 - 这很好用。但如果选择“天”，我会得到 2 个日历 - 一个只有几个月，另一个有天。

【参考方案2】：

我发现的唯一选择是创建另一个 text_field_tag 并隐藏/显示它：

= text_field_tag :from, class: 'datepick'
= text_field_tag :from, class: 'datetimepick'

:javascript
  function myFunction() 
      var value = document.getElementById("date_format").value;
      if (value == "Days") 
        $(".datepick").hide();
        $(".datetimepick").show();
        $(".datetimepick").datetimepicker(
          format: 'd/m/Y'
        );
       else if (value == "Months") 
        $(".datetimepick").hide();
        $(".datepick").show();
        $(".datepick").datepicker(
          format: "mm/yyyy"
        );