"Simple Datepicker with moment.js"
Bootstrap 3.1.0 Snippet by mouse0270

Post to Facebook Tweet this

<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"> <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-type="subtract" class="fa fa-angle-left"></span> <span data-toggle="datepicker" data-type="add" class="fa fa-angle-right"></span> <div class="input-group input-datepicker"> <input type="text" class="form-control" data-format="YYYY/MM/DD" placeholder="YYYY/MM/DD"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> <span data-toggle="calendar" class="fa fa-calendar"></span> </div> </div> <div class="col-sm-4"> <h2>By Week</h2> <hr/> <div class="date-picker"> <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-type="subtract" data-amt="7" class="fa fa-angle-left pull-left"></span> <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"> <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-type="subtract" data-amt="1" class="fa fa-angle-left pull-left"></span> <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"> <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-type="subtract" class="fa fa-angle-left pull-left"></span> <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"> <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-type="subtract" class="fa fa-angle-left pull-left"></span> <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"> <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-type="subtract" data-amt="1" class="fa fa-angle-left pull-left"></span> <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: 70px 0px; } .fa.pull-right { margin-left: 0.1em; } .date-picker, .date-container { position: relative; display: inline-block; width: 100%; 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: 0px 40px; } .date-picker h2, .date-picker h4 { margin: 0px; padding: 0px; font-family: 'Roboto', sans-serif; font-weight: 200; } .date-container .date { text-align: center; } .date-picker span.fa { position: absolute; font-size: 4em; font-weight: 100; padding: 8px 0px 7px; cursor: pointer; top: 0px; } .date-picker span.fa[data-type="subtract"] { left: 0px; } .date-picker span.fa[data-type="add"] { right: 0px; } .date-picker span[data-toggle="calendar"] { display: block; position: absolute; top: -7px; right: 45px; font-size: 1em !important; cursor: pointer; } .date-picker .input-datepicker { display: none; position: absolute; top: 50%; margin-top: -17px; width:100%; } .date-picker .input-datepicker.show-input { display: table; } @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')); $datepicker.find('.input-datepicker').removeClass('show-input'); } updateDisplay(cur_date); $datepicker.on('click', '[data-toggle="calendar"]', function(event) { event.preventDefault(); $datepicker.find('.input-datepicker').toggleClass('show-input'); }); $datepicker.on('click', '.input-datepicker > .input-group-btn > button', function(event) { event.preventDefault(); var $input = $(this).closest('.input-datepicker').find('input'), date_format = ($input.data('format') ? $input.data('format') : "YYYY/MM/DD"); if (moment($input.val(), date_format).isValid()) { updateDisplay(moment($input.val(), date_format)); }else{ alert('Invalid 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'); } }); } }); });

Related: See More

BLK• Design System
Simple Vertical timeline
Simple white navbar
BS4 clean & simple invoice template

Questions / Comments:

why i can not see any Left and Right Arrow keys either on Chrome or Safari?

Ida Bagus Gede Adhitya () - 7 years ago - Reply 0

Because the iframe containing the snippet is has the "http" protocol and the cdnjs library has the "https" protocol. Chrome and Firefox block cross "Mixed Content"

mouse0270 () - 7 years ago - Reply 0

how to add select date option? please help!

Maryam Ayub () - 9 years ago - Reply 0

What do you mean by "select date option"?

mouse0270 () - 9 years ago - Reply 0

Could someone guide on how this should be implemented? I am using Pingedo and the date picker doesn't seem to show once I reference the Javascript, add the CSS and insert the code into the HTML.

Wael () - 9 years ago - Reply 0

are you getting any errors in the browser console?

mouse0270 () - 9 years ago - Reply 0

Hey! This is a really slick snippet. I'm probably late to the party and at the risk of sounding like a total noob, how could I grab the resulting m/d/y output of this interface as INPUT for a form?

sollipse () - 10 years ago - Reply 0

The data-date attribute is updated when the date is changed so you would just need to do $("#yourDatePicker").data("date") to get the current date.

mouse0270 () - 10 years ago - Reply 0

Anyway you can have this support not allowing selection of a start date that is older than Today or a certain date, same applies as end date?

Yazeed Al Oyoun () - 10 years ago - Reply 0

The best way to do this would be to combine it with a datepicker plugin such as: http://eternicode.github.io... It shouldn't be to hard all you would really have to do is take out my checking in the js and than give the input an id and select it using the datepicker plugin of your choice. If you need assistance accomplish this you can email me at rmcintosh (at) remabledesigns (dot) com

mouse0270 () - 10 years ago - Reply 0

If you could help me out with this, you would be really awesome, as I'm really bad at JS. I do suggest to update your snippet to support this, it would be legendary. My e-mail address is yazeed (dot) aloyoun (at) gmail (dot) com :)

Yazeed Al Oyoun () - 10 years ago - Reply 0

Ill update this snippet over the next few days to include this. I'll email you at the address listed above once it has been updated.

mouse0270 () - 10 years ago - Reply 0

Thank you mate, will be waiting, appreciated. Most appreciated. :)

Yazeed Al Oyoun () - 10 years ago - Reply 0

I am so sorry for the delay. I am working on this. I am also trying to get my website complete and up and running. I took on 3 new projects and am going on vacation in 2 weeks. My plate just got filled quickly. I just wanted to let you know, this is still in my task list and I will be getting to it as soon as I can. Thank you for your patience.

mouse0270 () - 10 years ago - Reply 0

Thanks alot, appreciate your efforts, and will be waiting for it. :)

Yazeed Al Oyoun () - 10 years ago - Reply 0

The left button doesnt work on any of the examples (except on By Day), why is that ?

Chris () - 10 years ago - Reply 0

When I updated the CSS to keep the right button in a more static position, I had to move the buttons in the html to be right next to one another.... I forgot to make this change to the rest of them. They all work now. Thanks for pointing this out.

mouse0270 () - 10 years ago - Reply 0

Wow, thanks. That's interesting, why that would be different for jquery ? it's only a comestic change cause the '<' was still drawn.

Chris () - 10 years ago - Reply 0

It is because the arrow icons were changed to have absolute position rather than a relative. This means that base div with the date information was overlaying the left arrow icon, because in the HTML the arrow icon came first. So you have to move the arrow down further in the html so when the browser renders it, it renders it onto of the div that has the date information rather than under it. Hope that makes sense.

mouse0270 () - 10 years ago - Reply 0

it makes perfect sense, +1 for the great explanation :)

thanks mate, great code.

Chris () - 10 years ago - Reply 0

beautiful design and great concept. Any chance of adding hours/minutes as an extra option?

Callum West () - 10 years ago - Reply 0

I'll See what I can do.

mouse0270 () - 10 years ago - Reply 0

The first thing that jumped out at me with this snippet is that the previous/next arrows jump around when you move backward/forward through time, meaning you have to keep moving your mouse left or right to get the click target back. The arrows should stay still while clicking.

Derrick Nelson () - 10 years ago - Reply 0

Ask and it will be given to you. I have updated the code so the arrows are now absolutely positions and should now stay within the same position. Thank you for the feedback, and let me know if you have any other request. Sorry for the delay as well. I forgot to "Favorite" this Disqus so I was not getting updated on comments.

mouse0270 () - 10 years ago - Reply 0

I love the look of these date pickers however they would be very slow to pick dates that are a long way away from whatever the placeholder is. Do you think it would be possible to modify them to allow the manual input of a day/month/year when clicking on each section, in a way the maintained the look and feel of the originals.

Benjamin Smith () - 10 years ago - Reply 0

Actually, yes, the one in my project actually allows you to change if you moving by days, weeks or months and even has an option to enter the day and is still minimal like this. I didn't include all of that to keep the code short, but maybe I will. give me 24 hours?

mouse0270 () - 10 years ago - Reply 0

Thank you!

Benjamin Smith () - 10 years ago - Reply 0

The demo has been updated, the alert for if the date is invalid doesn't seem to be working within an iframe though. Sorry.

Guest () - 10 years ago - Reply 0

That's perfect. I think this is one of the most elegant looking snippets on the site. Thanks again.

Benjamin Smith () - 10 years ago - Reply 0

Thank you!

mouse0270 () - 10 years ago - Reply 0

Updated the code to include an input to select a date. The alert if a date isn't the greatest because I am using my Bootstrap Growl Plugin (http://bootstrap-growl.rema... for this in my project. For this demo I just used an alert, but it seems that alerts don't work within iframe here. So basically if the input doesn't disappear it is because it is an invalid date.

mouse0270 () - 10 years ago - Reply 0