Demo - InputDate

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">

  <h1>
    InputDate
  </h1>

  <p>
    The InputDate control allows users to enter and edit dates.
    It has the following advantages over regular input elements:</p>
  <ol>
    <li>
      Users cannot enter non-numeric values at all.</li>  
    <li>
      You can use the <b>format</b> property to format the number 
      as it is edited, making it easy to read.</li>  
    <li>
      You can use the <b>min</b> and <b>max</b> properties to 
      specify the valid range of values (users will not be
      able to enter values outside this range).</li>  
    <li>
      You can use the <b>step</b> property to specify an
      increment that is added to the value when the user
      clicks the increment/decrement buttons on the control.</li>  
  </ol>
  
  <p>
    For example, here is an InputDate with default
    settings:</p>
  <label for="theDate">InputDate</label>
  <input id="theDate">
  <div>
    The current date is <b><span id="theDateOutput"></span></b>.
  </div>
  
  <p></p>
  <p>
    By default, InputDate values are required, so you can't
    delete the entire content of the control. If you want to
    enter dates that are optional, set the <b>isRequired</b>
    property to false:</p>
  <label for="theDateNotRequired">Not Required</label>
  <input id="theDateNotRequired">
</div>

CSS

label {
  width: 100px;
  text-align: right;
}
.wj-dropdown {
  margin-bottom: 12px;
}

body {
  margin-bottom: 36px;
}

JavaScript

onload = function() {

	// a regular input date
  var theDate = new wijmo.input.InputDate('#theDate', {
  	valueChanged: function(s, e) {
    	showCurrentDate();
    }
  });

	// you can clear this one
  var theDateNotRequired = new wijmo.input.InputDate('#theDateNotRequired', {
  	isRequired: false,
    value: null,
    placeholder: 'Your birth date (optional)'
  });

	// show the currently selected date
	function showCurrentDate() {
  	var el = document.getElementById('theDateOutput');
    el.textContent = wijmo.Globalize.format(theDate.value, 'D');
  }
  showCurrentDate();
}