如何根据用户选择更改日期格式？

Question

如何根据用户的 "f.select :categories" 选择更改日期：顺序？

例如，当用户转到量化 _form 时，他可以在 "Monthly Average" 或 "One-Time Instance" 之间 select；

如果他 selects "Monthly Average" 我希望 _results_fields.html.erb 提供日期 selection as ":order => [:month, :year]" 如果他 selects "One-Time Instance" 我想要 _results_fields.html.erb 提供日期 select ion as ":order => [:month, :day, :year]

理想情况下，这将通过 javascript 动态完成，但我很乐意接受通过视图完成的答案。

_results_fields.html.erb

<div class="nested-fields">
  <div class="form-group">
    <%= f.text_field :result_value, class: 'form-control', placeholder: 'Enter Result' %>
    <br/>
    <%= f.date_select :date_value, :order => [:month, :year], class: 'date-select' %>
    <%= link_to_remove_association "Remove Result", f %>
  </div>
</div>

_form.html.erb

<%= form_for @quantified do |f| %>
  <div class="america">
      <%= f.select :categories, Quantified::CATEGORIES %>
      <br/>
      <br/>
      <div class="form-group">
        <%= f.text_field :name,  class: 'form-control', placeholder: 'Enter Name' %>
      </div>
      <div class="form-group">
        <%= f.text_field :metric,  class: 'form-control', placeholder: 'Enter Metric' %>
      </div>

    <div id="results">
      <%= f.fields_for :results do |result| %>
      <%= render 'result_fields', :f => result %>
      <% end %>
    </div>

    <div class="links">
      <%= link_to_add_association 'add result', f, :results %>
    </div>

    <%= f.submit %>
  </div>
<% end %>

quantified.rb

class Quantified < ActiveRecord::Base
    belongs_to :user
    scope :averaged,  -> { where(categories: 'Monthly Average') }
    scope :instance,  -> { where(categories: 'One-Time Instance') }
    has_many :results
    accepts_nested_attributes_for :results, :reject_if => :all_blank, :allow_destroy => true

    CATEGORIES = ['Monthly Average', 'One-Time Instance']

end

Github: https://github.com/RallyWithGalli/ruletoday

感谢您的宝贵时间。

Answer 1

我认为我的解决方案有点混乱，但希望它能让您了解我的思路并为您提供一些借鉴。

我已经更改了您的类别以使用单选按钮组，因为 select 字段对于 2 个元素有点奇怪（我知道是主观的），将其更改回 select 形式，只需保持您的代码不变，但您需要使用 jQuery .change() 或其他一些普通的 Javascript 方式检查 select 下拉列表的值...

你没有提供任何控制器名称，所以我不知道如何命名我的 JS 文件，但希望你知道如何集成。

IMO，我不确定为什么需要 AJAX，也许你可以向我解释一下它的用处。

_form.html.erb

<%= Quantified::CATEGORIES.each do |c| %>
  <%= f.radio_button(:category, c) %>
  <%= label(c, c) %>
<% end %>

_results_fields.html.erb

<%= f.date_select :date_value, :order => [:month, :year], class: 'date-select-my' %>
<%= f.date_select :date_value, :order => [:month, :year], class: 'date-select-mdy' %>

vanilla.js

$(document).ready(function(){
  $('.date-select-mdy').hide();

  $('.date-select-mdy').attr("disabled", true);

  $('input[name$=\category\']').click(function() {
    var target_value;
    target_value = $(this).val;
    if (target_value === 'Monthly Average') {
      $('.date-select-my').show();
      $('.date-select-mdy').hide();
      $('.date-select-my').attr("disabled", false);
      return $('.date-select-mdy').attr("disabled", true);
    } else {
      $('.date-select-my').hide();
      $('.date-select-mdy').show();
      $('.date-select-my').attr("disabled", true);
      return $('.date-select-mdy').attr("disabled", false);
    }
  });
});

a_little_bit_of_coffee_because_i_dislike_js.coffee

$->
  $('.date-select-mdy').hide()
  $('.date-select-mdy').attr("disabled",true)

  $('input[name$=\category\']').click ->
    target_value = $(this).val
    if target_value == 'Monthly Average'
     $('.date-select-my').show()
     $('.date-select-mdy').hide()
     $('.date-select-my').attr("disabled",false)
     $('.date-select-mdy').attr("disabled",true)
    else
     $('.date-select-my').hide()
     $('.date-select-mdy').show() 
     $('.date-select-my').attr("disabled",true)
     $('.date-select-mdy').attr("disabled",false)
  return

Answer 2

这里的答案是使用 gem 提供的一些 jquery 用于添加日期 selects，以及一些 jquery我们自己的

首先，我们用 click() 事件设置复选框，如果实例被选中，则隐藏带有 class 'day' 的任何内容，如果没有，则显示它。

$('.date-toggle').click(function(){
    if( $(this).attr('id') == 'instance') {
        $('.day').show();
    } else {
        $('.day').hide();
    }
});

这里的技巧是在日期 select 上使用 rails 日期 select 选项 :with_css_classes，这样它看起来像这样：

<%= f.date_select :date_value, :order => [:month, :day, :year], :with_css_classes => true, class: 'date-select' %>

这会导致每个包含的字段获得与其名称相对应的 class，因此我们在上面引用了“.day”。

下一个重要部分，但是，因为他正在使用一个名为 cocoon 的 gem 来添加包含日期字段的新元素，我们不得不使用他们的一些 jquery 事件绑定以确保对新的应用程序应用了正确的操作。

$('#container').on('cocoon:after-insert', function(e, insertedItem) {
    if($('#instance').is(':checked')) {
        $('.day').show();
    } else {
        $('.day').hide();
    }
});

从技术上讲，$('.day').show() 不是必需的，因为它默认显示，但对我来说，这样可以更清楚地理解意图。

如何根据用户选择更改日期格式？

How to Change Date Format According to User Selection?

javascript

ruby

ruby-on-rails

date

_form.html.erb

_results_fields.html.erb

vanilla.js

a_little_bit_of_coffee_because_i_dislike_js.coffee