Wijmo 5 - InputDate & Calendar

pure JS

by Troy Taylor

HTML

<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<div>
  <label>Bound InputDate with min &amp; max</label>
  <input id="idcInputDate" type="text" />
</div>
<br>
<div>
  <input id="disable" disabled=true type="button" value="Disable InputDate" />
  <input id="enable" type="button" value="Enable InputDate" />
</div>

JavaScript

var inputDate = new wijmo.input.InputDate('#idcInputDate');
var today = new Date();
var minDate = new Date(today.getFullYear(), 0, 1);
var maxDate = new Date(today.getFullYear(), 11, 31);

inputDate.value = today;
inputDate.min = minDate;
inputDate.max = maxDate;
inputDate.isDisabled = true;
 
var disableButton = document.getElementById('disable');
var enableButton = document.getElementById('enable');

disableButton.addEventListener('click', disable);
enableButton.addEventListener('click', enable);
 
function enable(){
	if(inputDate.isDisabled) {
  	inputDate.isDisabled = false;
    enableButton.disabled = true;
    disableButton.disabled = false;
  }
}

function disable(){
  if(!inputDate.isDisabled) {
  	inputDate.isDisabled = true;
    enableButton.disabled = false;
    disableButton.disabled = true;
  }
}