LayerCake is a calendar/date picker that allows separate selection of year, month, and date.

Most calendar pickers support selection of month and year together (_e.g._, "April 2011"). This means that if "April 2011" is currently selected and the user wants "December 2011", the user has to click 8 times. With LayerCake, the user only has to click twice: (1) select the month and (2) select the year. In cases where the current selection differs from the desired selection by either the month or the year, the user only has to click once.

Dependencies

LayerCake requires jQuery and Underscore. To start, you need to include the necessary files.

Include the CSS stylesheet

LayerCake provides a default stylesheet in the GitHub repository. You may include this stylesheet in the head tag.

<link rel="stylesheet" href="stylesheets/layercake.css" />

Include Javascript files

In the example below, we use the jQuery from the Google CDN. The code for Underscore and LayerCake are included in the GitHub repository.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="javascripts/underscore-1.3.0.js"></script>
<script type="text/javascript" src="javascripts/layercake.js"></script>

Basic initialization

<div id="example1" class="layercake"></div>

<script type="text/javascript">
  $(function () {
    var example1 = new LayerCake('#example1');
  });
</script>

Setting the initial date

<div id="example2" class="layercake"></div>

<script type="text/javascript">
  $(function () {
    var example2 = new LayerCake('#example2', {
      range: 'day',
      year: 2011,
      month: 10,  // November, based on 0-indexed month
      day: 11
    });
  });
</script>

Year Month Day

Setting the range

<p>
  <button id="example3-year" class="btn">Year</button>
  <button id="example3-month" class="btn">Month</button>
  <button id="example3-day" class="btn">Day</button>
</p>
<div id="example3" class="layercake"></div>

<script type="text/javascript">
  var example3 = new LayerCake('#example3', {
    range: 'year' // Default is 'day'
  });
  $('#example3-year').click(function () {
    example3.set({ range: 'year' });
  });
  $('#example3-month').click(function () {
    example3.set({ range: 'month' });
  });
  $('#example3-day').click(function () {
    example3.set({ range: 'day' });
  });
</script>

Show Range Selector

Showing the range selector

<p>
  <button class="btn" id="example4-btn">Show Range Selector</button>
</p>
<div id="example4" class="layercake"></div>

<script type="text/javascript">
  var example4 = new LayerCake('#example4', {
    showRangeSelector: false  // Default is true
  });

  $('#example4-btn').click(function () {
    if (example4.get('showRangeSelector')) {
      example4.set({ showRangeSelector: false });
      $(this).html('Show Range Selector')
        .removeClass('danger');
    } else {
      example4.set({ showRangeSelector: true });
      $(this).html('Hide Range Selector')
        .addClass('danger');
    }
  });
</script>