Kendo Datepicker Test2

by bulutkartal

HTML

<script src="http://cdn.kendostatic.com/2015.1.318/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css">

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

<script async defer>
var map;
var chicago = {lat: 41.85, lng: -87.65};


function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Test';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = '<div id="aishistorydiv"><div class="k-content"><h4><label for="size">Cap Size</label></h4><select id="size"><option>S - 6 3/4"</option><option>M - 7 1/4"</option><option>L - 7 1/8"</option><option>XL - 7 5/8"</option></select><h4 style="margin-top: 2em;">Start date</h4><input id="start" /><h4 style="margin-top: 2em;">End date</h4> <input id="end" /></div></div>';
  controlUI.appendChild(controlText);

}

function initMap() {
  map = new...

CSS

#map {
  height: 100%;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

$(document).ready(function(){function startChange(){var startDate=start.value(),endDate=end.value();if(startDate){startDate=new Date(startDate);startDate.setDate(startDate.getDate());end.min(startDate);}else if(endDate){start.max(new Date(endDate));}else{endDate=new Date();start.max(endDate);end.min(endDate);}} function endChange(){var endDate=end.value(),startDate=start.value();if(endDate){endDate=new Date(endDate);endDate.setDate(endDate.getDate());start.max(endDate);}else if(startDate){end.min(new Date(startDate));}else{endDate=new Date();start.max(endDate);end.min(endDate);}} var today=kendo.date.today();var start=$("#start").kendoDateTimePicker({value:today,change:startChange,parseFormats:["MM/dd/yyyy"]}).data("kendoDateTimePicker");var end=$("#end").kendoDateTimePicker({value:today,change:endChange,parseFormats:["MM/dd/yyyy"]}).data("kendoDateTimePicker");start.max(end.value());end.min(start.value());});