Bootstrap datepicker disable dates - ruby-on-rails

Question

I have two datepickers on the same page the first one (start date) I want to disable all previous dates which I've managed to do. The second datepicker (end date) I want it to disable all previous dates from when the first date picker is selected.
I've got the following code:
The start date - this is working as intended.
<div class="field">
<%= form.label :startDate %>
<%= form.text_field :startDate, {class: "form-control custom datepicker"}%>
<script type="text/javascript">
$(".datepicker").attr('readOnly', 'true');
$(document).ready(function(){
$('.datepicker').datepicker({
minDate: 0,
yearRange : '+0:+1',
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
autoclose: true});
});
</script>
</div>
end date - I'd like it to disable all previous dates from when start date is selected
<div class="field">
<%= form.label :endDate %>
<%= form.text_field :endDate, {class: "form-control custom date"}%>
<script type="text/javascript">
$(".date").attr('readOnly', 'true');
$(document).ready(function(){
$('.date').datepicker({
minDate: 0 ,
yearRange : '+0:+1',
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
autoclose: true});
});
</script>
</div>
I've also got another date picker which keeps selecting today's date I don't want it to do this how do I disable this? This date picker goes back 70 years on the year it shows 1948 but today's date is selected so if the user selects a date without changing the year or month it picks today's date.
Thanks in advance for any help.

Answer 1

Don't need to write JS script twice, I think it will be some complex if you write script twice, you can this to write script only once, for example, see this below snippets.
I think it will help you.
$( document ).ready(function() {
$( function($) {
var dateToday = new Date();
var dates = $("#start-date, #end-date").datepicker({
defaultDate: "+2d",
changeMonth: true,
numberOfMonths: 1,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "start-date" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
});
});
label {
display: inline-block;
margin-bottom: 5px;
font-weight: 700;
}
.form-control {
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.book-now-form {
padding-top: 10px;
}
.book-now-form .form-group {
margin-right: 1.5em;
}
.book-now-form label {
font-size: 13px;
display: block;
color: #fff;
padding-top: 5px;
}
.book-now-form .form-control {
height: 25px;
line-height: 25px;
background: white;
display: block;
font-size: 12px;
color: #969696;
padding: 4px 6px;
}
.book-now-form #start-date, .book-now-form #end-date {
padding-right: 22px;
background: url(https://www.solodev.com/assets/booking-form/icon_calendar.png) no-repeat scroll 98% center rgb(255, 255, 255);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<form class="form book-now-form" role="form" id="widget_booking_form" name="widget_booking_form" >
<input id="campaign" type="hidden" value="visitflagler_topNavWidget" name="campaign"> <input id="clone_id" type="hidden" value="278" name="clone_id">
<!--check in element-->
<div class="form-group">
<label for="check-in">Check In</label> <!-- <input type="textfield" class="form-control" id="check-in" placeholder="12.20.2014"> -->
<input type="text" class="form-control" id="start-date" name="start-date" placeholder="mm/dd/yyyy">
</div>
<!--check out element-->
<div class="form-group">
<label for="check-out">Check Out</label> <!-- <input type="textfield" class="form-control" id="check-out" placeholder="12.27.2014"> -->
<input type="text" class="form-control" id="end-date" name="end-date" placeholder="mm/dd/yyyy" >
</div>
<!--submit-->
<div class="form-group">
<button name="Submit" href="#" class="btn btn-sm btn-success">Submit</button>
</div>
</form>