datetime picker base master

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css">
<div class="form-group row">
  <div class="col-sm-10 col-lg-10">
    <label for="ticker1">Stock 1</label>
    <input class="form-control" id="ticker1" name="stock1" placeholder="e.g., GOOG" type="text" value="">
    <div id="data1"></div>   <!-- Used to flash min date of stock1 -->
  </div>
</div>

<div class="form-group row">
  <div class="col-sm-10 col-lg-10">
    <label for="ticker2">Stock 2</label>
    <input class="form-control" id="ticker2" name="stock2" placeholder="e.g., AAPL" type="text" value="">
    <div id="data2"></div>   <!-- Used to flash min date of stock2 -->
  </div>
</div>

<div class="form-group row">
  <div class="col-sm-10 col-lg-10">
    <label for="date_start">Start Date</label>
    <div class='input-group date' id='date_start' style="color:black">
      <input name='date_start' class="form-control" />
      <span class="input-group-addon">
									<span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
</div>

<div class="form-group row">
  <div class="col-sm-10 col-lg-10">
    <label for="date_end">End Date</label>
    <div class='input-group date' id='date_end' style="color:black">
      <input name='date_end' class="form-control" />
      <span class="input-group-addon">
									<span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
</div>

<div class="form-group row">
  <div class="col-sm-10 col-lg-10">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</div>

JavaScript

/* Start -- Initializing the date pickers on the page load */

var from_default = moment().subtract(1, 'years')
var from_max = moment().subtract(7, 'days')

var to_default = moment().subtract(1, 'days')
var to_max = moment().subtract(1, 'days')

$('#date_start').datetimepicker({
  useCurrent: false,
  format: 'YYYY-MM-DD',
  daysOfWeekDisabled: [0, 6],
  maxDate: from_max,
  defaultDate: from_default
});
$('#date_end').datetimepicker({
  useCurrent: false,
  format: 'YYYY-MM-DD',
  daysOfWeekDisabled: [0, 6],
  //minDate: from_default
  maxDate: to_max,
  defaultDate: to_default
});

/* End -- Initializing the date pickers on the page load */


/* Start -- Make the datepickers linked, when either one changes, creates 7 day window */

$("#date_start").on("dp.change", function(e) {
  $('#date_end').data("DateTimePicker").minDate(e.date.add(7, 'days'));
});
$("#date_end").on("dp.change", function(e) {
  $('#date_start').data("DateTimePicker").maxDate(e.date.subtract(7, 'days'));
});

/* End -- Make the datepickers linked, when either one changes, creates 7 day window */


/* Start -- Initilization outer scope variables for the min data dates of Stock 1 and Stock 2 */

var value1 = null;
var value2 = null;

/* End -- Initilization outer scope variables for the min data dates of Stock 1 and Stock 2 */


/* Start -- Callback functions to update value1 and value2 */

function ajaxCallBack1(min1) {
  value1 = min1;

  var dates = [];
  dates.push(new Date(value1))
  dates.push(new Date(value2))

  var maxDate = new Date(Math.max.apply(null, dates));

  var minoverlap = maxDate.getUTCFullYear() + '-' + (maxDate.getUTCMonth() + 1) + '-' + maxDate.getUTCDate();

  $('#date_start').data("DateTimePicker").minDate(minoverlap);
  $('#date_end').data("DateTimePicker").minDate(minoverlap);
}

function ajaxCallBack2(min2) {
  value2 = min2;

  var dates = [];
  dates.push(new Date(value2))
  dates.push(new Date(value1))

  var maxDate = new Date(Math.max.apply(null, dates));

 ...