如何在文本字段中输入日期选择器的值
How to enter value of datepicker into text field
我有一个任务列表,每个任务都有一个编辑日期选项,我使用 jquery 日期选择器。
这是我的 application.js:
$(function() {
$('.date').datepicker({dateFormat: 'yy-mm-dd'});
});
这是我的 _edit_form.html.erb:
<%= form_for task do |f| %>
<div class='form-group'>
<%= f.text_field :description, placeholder: 'create a task' %>
</div>
<div class='form-group'>
<%= f.label :due_date %>
<%= f.text_field :due_date, placeholder: 'select a date', class:"date", readonly: 'readonly' %>
</div>
<%= button_tag(type:'patch', class:"btn btn-default btn-xs") do %>
<span class='glyphicon glyphicon-plus'></span>
<% end %>
<% end %>
所以我的问题是日期选择器只适用于我列表中的第一个任务。我可以选择日期,它会显示在文本字段中,并且会很好地传递到我的 task#update
控制器。
但是,之后的每个任务都无法接收来自日期选择器的输入。当我 select 一个日期时,文本字段是空白的,它不会传递到控制器中。当我在 Web 控制台中调试时,'value' = "".
这是在多个字段上使用日期选择器时出现的 JQuery 问题。这不是 Rails 的错...
我认为您需要的答案是“Apply jQuery datepicker to multiple instances”:将唯一的 id
附加到每个字段,然后编写函数脚本如下:
HTML:
<input type="text" class="datepick" id="date_1" />
<input type="text" class="datepick" id="date_2" />
<input type="text" class="datepick" id="date_3" />
脚本:
$('.datepick').each(function(){
$(this).datepicker();
});
我有一个任务列表,每个任务都有一个编辑日期选项,我使用 jquery 日期选择器。
这是我的 application.js:
$(function() {
$('.date').datepicker({dateFormat: 'yy-mm-dd'});
});
这是我的 _edit_form.html.erb:
<%= form_for task do |f| %>
<div class='form-group'>
<%= f.text_field :description, placeholder: 'create a task' %>
</div>
<div class='form-group'>
<%= f.label :due_date %>
<%= f.text_field :due_date, placeholder: 'select a date', class:"date", readonly: 'readonly' %>
</div>
<%= button_tag(type:'patch', class:"btn btn-default btn-xs") do %>
<span class='glyphicon glyphicon-plus'></span>
<% end %>
<% end %>
所以我的问题是日期选择器只适用于我列表中的第一个任务。我可以选择日期,它会显示在文本字段中,并且会很好地传递到我的 task#update
控制器。
但是,之后的每个任务都无法接收来自日期选择器的输入。当我 select 一个日期时,文本字段是空白的,它不会传递到控制器中。当我在 Web 控制台中调试时,'value' = "".
这是在多个字段上使用日期选择器时出现的 JQuery 问题。这不是 Rails 的错...
我认为您需要的答案是“Apply jQuery datepicker to multiple instances”:将唯一的 id
附加到每个字段,然后编写函数脚本如下:
HTML:
<input type="text" class="datepick" id="date_1" />
<input type="text" class="datepick" id="date_2" />
<input type="text" class="datepick" id="date_3" />
脚本:
$('.datepick').each(function(){
$(this).datepicker();
});