根据下拉菜单中的选定值设置日期时间选择器格式

Question

I would like the datetimepicker to show only days if the user chose "Days" in dropdown and show months if the user chose "Months".

The code is inside haml file:

= 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"
        });
      }
  }

Right now it doesn't work well. Please help me to find out where I made a mistake. How to overwrite (".datepick")?

Answer 1

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

Answer 2

The only option I've found is to create another text_field_tag and hide/show it:

= 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"
        });
      }
  }