首页 > 解决方案 > 使用 Tempus dominus bootstrap4 时参数消失

问题描述

我正在尝试在我的应用程序中使用 Tempus Dominus 日期时间选择器。一切似乎都工作正常,但是当我尝试将提交的字符串转换为控制器中的日期时间对象时,我得到一个 TypeError(没有将 nil 隐式转换为字符串)。我也尝试将参数放入日志中,但得到一个空行。奇怪的是,在提交表单期间,参数似乎确实存在。

EventsController#create 作为 HTML 参数处理:{"utf8"=>"✓", >"authenticity_token"=>"yuP08tdkavDAzcbJImZXeL0EZ1dp6D13dnLyW/lU+frPVej0tiUmavI>0GKvs66z7+ca2GynI1WWs2d5aSJX5zA==", "event"=>{"title"=> "aaaaa", >"game"=>"bbbb", "start_time"=>"02/21/2020 1:26 PM", "end_time"=>"02/28/2020 >10:46 PM", "描述"=>"sasasa"}, "按钮"=>""}

这是所有相关的代码。

控制器:

class EventsController < ApplicationController
  def new
    @event = Event.new
  end

  def create 
    @user = current_user
    if @user
      @user.events.create(title: params[:title], game: params[:game], 
                          start_time: time_parse(params[:start_time]), 
                          end_time: time_parse(params[:start_time]),
                          description: params[:description])
    end
  end

  private 
  def event_params
    params.require(:event).permit(:title, :game, :start_time,:end_time, :description)
  end

  def time_parse(time)
    DateTime.strptime(time, '%m/%d/%Y %M:%S %p')
  end
end

看法:

 <div class="col-lg-6">
            <%= form_for @event, url: events_path do |form| %>
              <div class="form-row">
                <div class="col-md-6 form-group">
                  <%= form.text_field :title, class: "form-control", placeholder: "Party Title" %>
                </div>

                <div class="col-md-6 form-group">
                  <%= form.text_field :game, class: "form-control", placeholder: "Game" %>
                </div>
              </div>



              <div class="row">
                <div class='col-md-6'>
                  <div class='form-group'>
                    <%= form.label :start_time, 'Start Date and Time', class: 'control-label' %><br>
                    <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                      <%= form.text_field(:start_time, 
                        value: form.object.start_time ? form.object.start_time.strftime('%B %d, %Y %I:%M %p') : nil, 
                        class: "form-control datetimepicker-input", data: {target:"#datetimepicker1"}) %>
                      <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fas fa-calendar-plus"></i></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class='col-md-6'>
                  <div class='form-group'>
                    <%= form.label :end_time, 'End Date and Time', class: 'control-label' %><br>
                    <div class="input-group date" id="datetimepicker2" data-target-input="nearest">
                      <%= form.text_field(:end_time, 
                        value: form.object.end_time ? form.object.end_time.strftime('%B %d, %Y %I:%M %p') : nil, 
                        class: "form-control datetimepicker-input", data: {target:"#datetimepicker2"}) %>
                      <div class="input-group-append" data-target="#datetimepicker2" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fas fa-calendar-plus"></i></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>


              <div class="col-md-6 form-group">
              </div>
                <%= form.text_area :description, class: "form-control", size: "24x6", placeholder: "Describe your meetup"%>
              </div>

              <div class="text-center "><%= form.button "Sign up", class: "sub-but" %></div>
            <% end %>


          </div>

用于查看的 Javascript:

$('#datetimepicker1').datetimepicker({
  format: 'MMMM D, YYYY h:mm A',
  stepping: 15,
  minDate: Date(),
  maxDate: new Date(Date.now() + (365 * 24 * 60 * 60 * 1000)),
  sideBySide: true,
  icons: {
    up: 'fas fa-arrow-up',
    down: 'fas fa-arrow-down',
    previous: 'fas fa-chevron-left',
    next: 'fas fa-chevron-right',
    close: 'fas fa-times'
  },
  buttons: {showClose: true }
});

$('#datetimepicker2').datetimepicker({
  format: 'MMMM D, YYYY h:mm A',
  stepping: 15,
  useCurrent: false,
  sideBySide: true,
  icons: {
    up: 'fas fa-arrow-up',
    down: 'fas fa-arrow-down',
    previous: 'fas fa-chevron-left',
    next: 'fas fa-chevron-right',
    close: 'fas fa-times'
  },
  buttons: {showClose: true }
});
$("#datetimepicker1").on("change.datetimepicker", function (e) {
  $('#datetimepicker2').datetimepicker('minDate', e.date);
  console.log(e.date);
});
$("#datetimepicker2").on("change.datetimepicker", function (e) {
  $('#datetimepicker1').datetimepicker('maxDate', e.date);
});

标签: ruby-on-rails

解决方案


我认为您没有正确链接到参数,而且我注意到您:start_time在上面的代码中都进入了两者,我认为这是一个错字,所以我在答案中进行了更改。如果不是拼写错误,请保持原样。

...
start_time: time_parse(params[:event][:start_time]), 
end_time: time_parse(params[:event][:end_time]),
...

推荐阅读