<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-xs-12 show-focus-status"> <div class="alert alert-danger"> <strong>Out of Focus!</strong> This demo does support the use of your keyboard to change dates! But since it is contained within an iframe you must first click here! </div> <div class="alert alert-success hidden"> <strong>In Focus!</strong> You can use your left and right arrow keys to change the date of the first date picker. Try it out now! </div> </div> </div> <div class="row"> <div class="col-sm-4"> <h2>By Day</h2> <hr/> <div class="date-picker" data-date="2014/09/02" data-keyboard="true"> <span data-toggle="datepicker" data-type="subtract" class="fa fa-angle-left pull-left"></span> <div class="date-container pull-left"> <h4 class="weekday">Monday</h4> <h2 class="date">Februray 4th</h2> <h4 class="year pull-right">2014</h4> </div> <span data-toggle="datepicker" class="fa fa-angle-right pull-right"></span> </div> </div> <div class="col-sm-4"> <h2>By Week</h2> <hr/> <div class="date-picker"> <span data-toggle="datepicker" data-type="subtract" data-amt="7" class="fa fa-angle-left pull-left"></span> <div class="date-container pull-left"> <h4 class="weekday">Monday</h4> <h2 class="date">Februray 4th</h2> <h4 class="year pull-right">2014</h4> </div> <span data-toggle="datepicker" data-amt="7" class="fa fa-angle-right pull-right"></span> </div> </div> <div class="col-sm-4"> <h2>Start Date</h2> <hr/> <div class="date-picker" data-date="2014/10/31"> <span data-toggle="datepicker" data-type="subtract" data-amt="1" class="fa fa-angle-left pull-left"></span> <div class="date-container pull-left"> <h4 class="weekday">Monday</h4> <h2 class="date">Februray 4th</h2> <h4 class="year pull-right">2014</h4> </div> <span data-toggle="datepicker" data-amt="1" class="fa fa-angle-right pull-right"></span> </div> </div> </div> <hr /> <div class="row"> <div class="col-sm-4"> <h2>By Month</h2> <hr/> <div class="date-picker" data-type="months"> <span data-toggle="datepicker" data-type="subtract" class="fa fa-angle-left pull-left"></span> <div class="date-container pull-left"> <h4 class="weekday">Monday</h4> <h2 class="date">Februray 4th</h2> <h4 class="year pull-right">2014</h4> </div> <span data-toggle="datepicker" class="fa fa-angle-right pull-right"></span> </div> </div> <div class="col-sm-4"> <h2>By Year</h2> <hr/> <div class="date-picker" data-type="year" data-date="2014/12/25"> <span data-toggle="datepicker" data-type="subtract" class="fa fa-angle-left pull-left"></span> <div class="date-container pull-left"> <h4 class="weekday">Monday</h4> <h2 class="date">Februray 4th</h2> <h4 class="year pull-right">2014</h4> </div> <span data-toggle="datepicker" class="fa fa-angle-right pull-right"></span> </div> </div> <div class="col-sm-4"> <h2>Formatting</h2> <hr/> <div class="date-picker" data-date="2014/10/31"> <span data-toggle="datepicker" data-type="subtract" data-amt="1" class="fa fa-angle-left pull-left"></span> <div class="date-container pull-left"> <h4 class="weekday" data-format="ddd">Monday</h4> <h2 class="date" data-format="MMM Do">Februray 4th</h2> <h4 class="year pull-right" data-format="YY">2014</h4> </div> <span data-toggle="datepicker" data-amt="1" class="fa fa-angle-right pull-right"></span> </div> </div> </div> </div> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300); @import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css); body { padding: 30px 0px; } .fa.pull-right { margin-left: 0.1em; } .date-picker, .date-container { display: inline-block; padding-right: 15px; color: rgb(75, 77, 78); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .date-container { padding-right: 5px; } .date-picker h2, .date-picker h4 { margin: 0px; padding: 0px; font-family: 'Roboto', sans-serif; font-weight: 200; } .date-picker span.fa { font-size: 4em; font-weight: 100; padding: 8px 0px 7px; cursor: pointer; } @media (min-width: 768px) and (max-width: 1010px) { .date-picker h2{ font-size: 1.5em; font-weight: 400; } .date-picker h4 { font-size: 1.1em; } .date-picker span.fa { font-size: 3em; } }

$(document).ready(function() { $(window).on('focus', function(event) { $('.show-focus-status > .alert-danger').addClass('hidden'); $('.show-focus-status > .alert-success').removeClass('hidden'); }).on('blur', function(event) { $('.show-focus-status > .alert-success').addClass('hidden'); $('.show-focus-status > .alert-danger').removeClass('hidden'); }); $('.date-picker').each(function () { var $datepicker = $(this), cur_date = ($datepicker.data('date') ? moment($datepicker.data('date'), "YYYY/MM/DD") : moment()), format = { "weekday" : ($datepicker.find('.weekday').data('format') ? $datepicker.find('.weekday').data('format') : "dddd"), "date" : ($datepicker.find('.date').data('format') ? $datepicker.find('.date').data('format') : "MMMM Do"), "year" : ($datepicker.find('.year').data('year') ? $datepicker.find('.weekday').data('format') : "YYYY") }; function updateDisplay(cur_date) { $datepicker.find('.date-container > .weekday').text(cur_date.format(format.weekday)); $datepicker.find('.date-container > .date').text(cur_date.format(format.date)); $datepicker.find('.date-container > .year').text(cur_date.format(format.year)); $datepicker.data('date', cur_date.format('YYYY/MM/DD')); } updateDisplay(cur_date); $datepicker.on('click', '[data-toggle="datepicker"]', function(event) { event.preventDefault(); var cur_date = moment($(this).closest('.date-picker').data('date'), "YYYY/MM/DD"), date_type = ($datepicker.data('type') ? $datepicker.data('type') : "days"), type = ($(this).data('type') ? $(this).data('type') : "add"), amt = ($(this).data('amt') ? $(this).data('amt') : 1); if (type == "add") { cur_date = cur_date.add(date_type, amt); }else if (type == "subtract") { cur_date = cur_date.subtract(date_type, amt); } updateDisplay(cur_date); }); if ($datepicker.data('keyboard') == true) { $(window).on('keydown', function(event) { if (event.which == 37) { $datepicker.find('span:eq(0)').trigger('click'); }else if (event.which == 39) { $datepicker.find('span:eq(1)').trigger('click'); } }); } }); });