1

我正在創建一個新的應用程序,除了提取約會的日期之外,一切運行正常。Rails 4引導程序3日期時間選擇器 - 日曆不顯示

我可以在那裏鍵入一個日期字符串,但沒有辦法從日曆中選擇一個日期。

這是我的代碼。

applicatiopn.html.erb

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title><%= content_for?(:title) ? yield(:title) : "My App" %></title> 
    <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "Levi''s Vet Clinic" %>"> 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
    <%= csrf_meta_tags %> 
    </head> 
    <body> 
    <div id="wrap"> 
      <div id="main" class="container clear-top"> 
     <%= render 'layouts/navigation' %> 
     <div id="push"> 
      <%= render 'layouts/messages' %> 
      <%= yield %> 
     </div> 
     </div> 
    </div> 
    </body> 
    <footer class="footer"> 
    <%= render 'layouts/footer' %> 
    </footer> 
</html> 

的application.js

//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require moment 
//= require bootstrap 
//=require bootstrap-sprockets 
//= require bootstrap-datetimepicker 
//= require underscore 
//= require_tree . 

application.css

*= require_tree . 
*= require_self 

custom.css.scss

@import "bootstrap-sprockets"; 
@import "bootstrap"; 
@import 'bootstrap-datetimepicker'; 

_form.html.erb

<%= form_for(@appointment) do |f| %> 
    <% if @appointment.errors.any? %> 
    <div id="error_explanation"> 
     <h2><%= pluralize(@appointment.errors.count, "error") %> prohibited this pet from being saved:</h2> 

     <ul> 
     <% @appointment.errors.full_messages.each do |message| %> 
     <li><%= message %></li> 
     <% end %> 
     </ul> 
    </div> 
    <% end %> 
    ... 
    <div class="row"> 
    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8"> 
     <%= f.label :appointment_date, "Appointment date" %> 
    </div> 
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"> 
     <%= f.text_field :appointment_date, class: "datetimepicker", placeholder: "yyyy-mm-dd" %> 
    </div> 
    </div> 

    <div class="actions"> 
    <%= f.button 'Submit', class: "btn btn-sm btn-info" %> 
    </div> 
<% end %> 

<script type="text/javascript"> 
    $(function() { 
    $('.datetimepicker').datetimepicker({ 
     pickTime: false, 
     useCurrent: false, 
     format: "YYYY-MM-DD", 
     autoclose: true, 
     todayBtn: true, 
     todayHighlight: true, 
     //todayBtn: 'linked', 
     pickerPosition: "bottom-center", 
     clearBtn: true 
    }); 
    }); 
</script> 

任何線索我怎麼能做出這方面的工作?

回答

2

application.js移動你的JavaScript代碼和改變

$(document).on('click', function(){ 
    $('#datetimepicker').datetimepicker({ 
    ... 
    ... 
    }); 
}); 

_form.html.erb

<div class="row"> 
    <div class="col-xs-8"> 
    <%= f.label :appointment_date, "Appointment date", class: 'control-label' %> 
    </div> 
    <div class="col-xs-4"> 
    <%= f.text_field :appointment_date, id: datetimepicker', class: 'form-control', placeholder: "yyyy-mm-dd" %> 
    </div> 
</div> 

希望,它可以幫助你!