Date Split

by Harsh Bhatnagar

HTML

<div class="demo">

  <p id="fullDate">Date:
    <input id="fullDate1" type="text" style="display:block">
  </p>
  <div id="date-container">
    <select id="month" name="month">
      <option value="01">January</option>
      <option value="02">February</option>
      <option value="03">March</option>
      <option value="04">April</option>
      <option value="05">May</option>
      <option value="06">June</option>
      <option value="07">July</option>
      <option value="08">August</option>
      <option value="09">September</option>
      <option value="10">October</option>
      <option value="11">November</option>
      <option value="12">December</option>
    </select>
    <select id="day" name="day">
      <option value="01">1</option>
      <option value="02">2</option>
      <option value="03">3</option>
      <option value="04">4</option>
      <option value="05">5</option>
      <option value="06">6</option>
      <option value="07">7</option>
      <option value="08">8</option>
      <option value="09">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="year" name="year">
      <option value="2011">2011</option>
      <option value="2012">2012</option>
     ...

CSS

#year {
  border: none;
  font-size: 20px;
  color: blue;
  font-weight: bold;
  background-color: transparent;
}

#month {
  border: none;
  font-size: 20px;
  color: green;
  font-weight: bold;
  background-color: transparent;
}

#day {
  border: none;
  font-size: 20px;
  color: red;
  font-weight: bold;
  background-color: transparent;
}

select {
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
}

#date-container {
  background-color: #fff;
  padding: 4px;
  display: inline-block;
}

#ui-datepicker-div{ background:#fff;}

JavaScript

$(function() {
  $("#fullDate1").datepicker({
    onClose: function(dateText, inst) {
      $('#year').val(dateText.split('/')[2]);
      $('#month').val(dateText.split('/')[0]);
      $('#day').val(dateText.split('/')[1]);
    }
  });
});