vsakaria/gist:ecab1c880c8552fbf1e6

## gistfile1.js
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<head>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title></title>
</head>

<body>


  <div id="container">

    <input id='checkInDateEl' type='hidden' value='' name='checkinDate'/>
    <div id="calendar-drop-down">
      <select id='day'>
        <option value="DD">DD</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
      </select>

      <select id='month'>
        <option value="MM">MM</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
      </select>

      <select id='year'>
        <option value="YYYY">YYYY</option>
        <option value="2013">2013</option>
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
      </select>
    </div>

  </div> <!--! end of #container -->

  <!-- Set the number of days for different months -->
  <script type = 'text/javascript'>
    var month = document.getElementById('month'),
        optionList = document.getElementById("day").getElementsByTagName("option");

    var monthToDays = {
      "_1": 31,
      "_2": 28,
      "_3": 31,
      "_4": 30,
      "_5": 31,
      "_6": 30,
      "_7": 31,
      "_8": 31,
      "_9": 30,
      "_10": 31,
      "_11": 30,
      "_12": 31
    }

    var getDaysInMonth = function (monthNumber) {
      return monthToDays["_" + monthNumber];
    }

    var resetDays = function () {
      for(var i =0; i < optionList.length; i++) {
        optionList[i].style.display = "";
      }
    }

    var filterDays = function (number) {
      resetDays();

      for(var i =0; i < optionList.length; i+=1) {
        if(i > number) {
          optionList[i].style.display = "none";
        }
      }
    }

    month.addEventListener("change", function (e) {
      var monthValue = parseInt(e.target.value);
      filterDays(getDaysInMonth(monthValue));
    });
  </script>

  <!-- Set the formatted date into hidden field -->
  <script type = 'text/javascript'>
    var cal = document.getElementById('calendar-drop-down'),
        checkInDateEl = document.getElementById('checkInDateEl');

    cal.addEventListener("change", function () {
      checkInDateEl.value = getDate();
    });

    function getDate () {
     var day = document.getElementById('day').value,
         month = document.getElementById('month').value,
         year = document.getElementById('year').value,
         checkInDate = day + '-' + month + '-' + year;
         return checkInDate;
    };
  </script>


</body>

</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

	<head>
	<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
	<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
	Remove this if you use the .htaccess -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title></title>
	</head>

	<body>


	<div id="container">

	<input id='checkInDateEl' type='hidden' value='' name='checkinDate'/>
	<div id="calendar-drop-down">
	<select id='day'>
	<option value="DD">DD</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
	<option value="10">10</option>
	<option value="11">11</option>
	<option value="12">12</option>
	<option value="13">13</option>
	<option value="14">14</option>
	<option value="15">15</option>
	<option value="16">16</option>
	<option value="17">17</option>
	<option value="18">18</option>
	<option value="19">19</option>
	<option value="20">20</option>
	<option value="21">21</option>
	<option value="22">22</option>
	<option value="23">23</option>
	<option value="24">24</option>
	<option value="25">25</option>
	<option value="26">26</option>
	<option value="27">27</option>
	<option value="28">28</option>
	<option value="29">29</option>
	<option value="30">30</option>
	<option value="31">31</option>
	</select>

	<select id='month'>
	<option value="MM">MM</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
	<option value="10">10</option>
	<option value="11">11</option>
	<option value="12">12</option>
	</select>

	<select id='year'>
	<option value="YYYY">YYYY</option>
	<option value="2013">2013</option>
	<option value="2014">2014</option>
	<option value="2015">2015</option>
	<option value="2016">2016</option>
	</select>
	</div>

	</div> <!--! end of #container -->

	<!-- Set the number of days for different months -->
	<script type = 'text/javascript'>
	var month = document.getElementById('month'),
	optionList = document.getElementById("day").getElementsByTagName("option");

	var monthToDays = {
	"_1": 31,
	"_2": 28,
	"_3": 31,
	"_4": 30,
	"_5": 31,
	"_6": 30,
	"_7": 31,
	"_8": 31,
	"_9": 30,
	"_10": 31,
	"_11": 30,
	"_12": 31
	}

	var getDaysInMonth = function (monthNumber) {
	return monthToDays["_" + monthNumber];
	}

	var resetDays = function () {
	for(var i =0; i < optionList.length; i++) {
	optionList[i].style.display = "";
	}
	}

	var filterDays = function (number) {
	resetDays();

	for(var i =0; i < optionList.length; i+=1) {
	if(i > number) {
	optionList[i].style.display = "none";
	}
	}
	}

	month.addEventListener("change", function (e) {
	var monthValue = parseInt(e.target.value);
	filterDays(getDaysInMonth(monthValue));
	});
	</script>

	<!-- Set the formatted date into hidden field -->
	<script type = 'text/javascript'>
	var cal = document.getElementById('calendar-drop-down'),
	checkInDateEl = document.getElementById('checkInDateEl');

	cal.addEventListener("change", function () {
	checkInDateEl.value = getDate();
	});

	function getDate () {
	var day = document.getElementById('day').value,
	month = document.getElementById('month').value,
	year = document.getElementById('year').value,
	checkInDate = day + '-' + month + '-' + year;
	return checkInDate;
	};
	</script>


	</body>

	</html>