I am creating a web app using Ruby on Rails. In the reservations form page. i have added jQuery date picker plugin for the start date and the end date. when i click on the start date the calendar doesn't show up even though i have added the jquery-ui-rails gem and the //= require jquery-ui/datepickerhere's in applicaiton.js file. here's my code:
assets/application.js
//
//= require jquery
//= require jquery_ujs
//= require jquery-ui/datepicker
//= require toastr
//= require rails-ujs
//= require_tree .
gemfile
gem 'devise'
gem 'toastr-rails' , '~> 1.0'
gem 'jquery-rails', '~> 4.3', '>= 4.3.1'
gem 'omniauth', '~> 1.7', '>= 1.7.1'
gem 'omniauth-facebook', '~> 4.0'
gem "paperclip", "~> 5.0.0"
gem 'geocoder', '~> 1.3', '>= 1.3.7'
gem 'jquery-ui-rails', '~> 5.0'
views/reservations/_form.html.erb
<div class="panel panel-default">
<div class="panel-heading">
<span><i class="fa fa-bolt" style="#ffb00"></i>$<%= @room.price%></span>
<span class="pull-right">Per Night</span>
</div>
<div class="panel-body">
<%= form_for ([@room, @room.reservations.new])do |f|%>
<div class="row">
<div class="col-md-6">
<label>Check In</label>
<%= f.text_field :start_date, readonly: true , placeholder:"Start Date", class:"form-control datepicker"%>
</div>
<div class="col-md-6">
<label>Check Out</label>
<%= f.text_field :end_date, readonly: true , placeholder:"End Date", class:"form-control datepicker", disabled: true%>
</div>
</div>
<div id="preview" style="display: none">
<table class="reservation-table">
<tbody>
<tr>
<td>Price</td>
<td class="text-right"><%= @room.price%></td>
</tr>
<tr>
<td>Night(s)</td>
<td class="text-right"><span id="reservation_days">X</span></td>
</tr>
<tr>
<td class="total">Total</td>
<td class="text-right"><span id="reservation_total">$</span></td>
</tr>
</tbody>
</table>
</div>
<br/>
<%= f.submit "Book Now", clasS: "btn btn-normal btn-block"%>
<%end%>
</div>
</div>
<script>
function checkDate(data){
dmy = date.getDate() + "-" + (date.getMonth()+ 1) + "-" + date.getFullYear();
return[$.inArray(dmy,unavilableDates) == -1];
}
$(function() {
unavilableDates = [];
$.ajax({
url: '<%= preload_room_path(@room)%>',
dateTyp: 'json',
success: function(data){
$.each(data,function(arrId,arrValue){
for(var d = new Date(arrValue.start_date);
d <= new Date(arrValue.end_date); d.setDate(d.getDate() unavilableDates.push($.datepicker.formatDate('d-m-yy'));
}
});
$(function(){
$('#reservation_start_date').datepicker({
dateFormat: 'dd-mm-yy',
minDate: 0,
maxDate: '3m',
beforeShowDay: checkDate,
onSelect: function(selected) {
$('#reservation_end_date').datepicker("option", "minDate", selected);
$('#reservation_end_date').attr("disabled", false);
}
});
$('#reservation_end_date').datepicker ({
dateFromat: 'dd-mm-yy',
minDate: 0,
maxDate: '3m',
beforeShowDay: checkDate,
onSelect: function(selected){
$('#reservation_start_date'.datepicker("option","maxDate",selected);
}
});
}
});
});
</script>
layouts/application.html.erb
<head>
<title>IGloo</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://ift.tt/2apRjw3" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="http://ift.tt/2aHU2x3" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="http://ift.tt/2aHTozy" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="http://ift.tt/2g6N0YS">
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<link rel="stylesheet" href="http://ift.tt/2cMkdWW">
</head>
Aucun commentaire:
Enregistrer un commentaire