从带有javascript的引导-数据报警器中获取输入值。

Question

在我的Rails项目中，我想从引导数据项中添加一个字符串到一个隐藏字段。我需要引用一个输入类，但我不知道如何引用。

这是我的表格：

<%= simple_form_for([@event, @dateevent]) do |f| %>
    <%= hidden_field_tag(:date, @datelist) %>
    <%= f.input :date, :as => :hidden, :input_html => { :value => "placeholder" } %>
    <%= f.button :submit %>
<% end %>

这是我的引导数据报警器的实现：

    <input type="text" class='datepicker' >

<script type="text/javascript">
  $(document).ready(function(){
    $('.datepicker').datepicker({
      multidate: true,
      format: 'dd-mm-yyyy'
    });
  });
</script>

我创建了一个按钮，它将选定的日期添加到隐藏字段中：

<button class="btn3">Add dates to the hidden field</button>

  <script>
    $(document).ready(function(){
      $(document).on('click', ".btn3", function () {
        var datelist = $(".listb").text();
        document.getElementById('date').value = datelist;
      });
    });
</script>

为了检查按钮是否真的工作，我做了以下操作：

<div class="listb">2016-2-2</div>

当我按下按钮，2016-2-2被添加到隐藏字段中，它就开始工作了。

然后，我在Firefox中打开了Firebug并单击了字段，在该字段中，引导数据报警器将选择的日期放在其中，它看起来如下所示：

<input class="datepicker" type="text"></input>

在按钮的Javascript代码中，我尝试了这几行代码，但两者都不起作用：

var datelist = $(".datepicker").text();
var datelist = $(".datepicker").val();

我需要输入什么，那么引导数据表中字段的字符串就会被添加到数据列表中？有什么想法吗？提前感谢！

这是全文：

<h2>Neuer Event</h2><br>
<input type="text" class='datepicker' >

<script type="text/javascript">
  $(document).ready(function(){
    $('.datepicker').datepicker({
      multidate: true,
      format: 'dd-mm-yyyy'
    });
  });
</script>
<br>
<div class="listb">2016-2-2</div>
<button class="btn3">Add dates to the hidden field</button>

<%= simple_form_for([@event, @dateevent]) do |f| %>
    <%= hidden_field_tag(:date, @datelist) %>
    <%= f.input :date, :as => :hidden, :input_html => { :value => "placeholder" } %>
    <%= f.button :submit %>
<% end %>

  <script>

    $(document).ready(function(){
      $(document).on('click', ".btn3", function () {
        var datelist = $(".listb").text();
        document.getElementById('date').value = datelist;
      });
    });
</script>

Answer 1

您可以使用

//此版本

var datepicker = $('.datepicker').datepicker()
    .on('changeDate', function(e) {

       $('#date').val($(e.currentTarget).val());//1
       $('#date').val(datepicker.getDate());//2

    });

//或自举3

var datepicker = $('.datepicker').datepicker()
    .on('dp.change', function(e) {

       e = {
    date, //date the picker changed to. Type: moment object (clone)
    oldDate //previous date. Type: moment object (clone) or false in the event of a null

}


    });

Answer 2

有趣的是，这样做是可行的：

var datelist = $("input.datepicker").val();