Mobile-first Date Picker Component - jQuery timePicker.js

timePicker.js is a simple, mobile-first date picker component for webapp that makes it easier to select a date from a bottom sheet. Supports both jQuery and Zepto.js libraries.

Click/tap the date input you will see a calendar interface sliding from the bottom of the screen.

How to use it:

1. Insert jQuery library together with the timePicker.css and timePicker.js into the document.

<link rel="stylesheet" href="timePicker.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="timePicker.js"></script>

2. Create the HTML for the date picker component.

<div class="items date">
  <label type="date" class="item">Pick A Date</label>
  <div class="drop-item">
    <span class="drop-text"></span>
    <span class="drop-icon"></span>
  </div>
</div>

3. Override the default month names.

getMonth: function(m) {
  return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'][m];
}

4. The default HTML template for the date picker.

<div class="md_mask"></div>
<div class="md_panel">
  <div class="md_bar"> <span class="md_cancel">Cancel</span><span class="md_ok">Okey</span></div>
  <div class="md_head">
    <div class="md_selectarea"><span class="md_prev change_year"><</span><span class="md_headtext yeartag"></span><span class="md_next change_year">></span></div>
    <div class="md_selectarea"><span class="md_prev change_month"><</span><span class="md_headtext monthtag"></span> <span class="md_next change_month" >></span></div>
  </div>
  <div class="md_body">
    <ul class="md_weekarea">
      <li>Su</li>
      <li>Mo</li>
      <li>Tu</li>
      <li>We</li>
      <li>Th</li>
      <li>Fr</li>
      <li>Sa</li>
    </ul>
    <ul class="md_datearea in">
    </ul>
  </div>
</div>

---

This awesome jQuery plugin is developed by Lyd9607. For more Advanced Usages, please check the demo page or visit the official website.