I am creating a new app and everything works well except picking up a date for an appointment.
I can type a date as string there, but no way to pick a date from a calendar.
Here is my code.
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>
Any clue how I can make this working?
move your javascript code in application.js and change it
$(document).on('click', function(){
$('#datetimepicker').datetimepicker({
...
...
});
});
in _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>
Hope, it helps you!