JSFiddle - React, Tailwind, and code Playground

Datepickers with moment.js

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-4">
             <h1>By Day</h1>

            <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">
             <h1>By Week</h1>

            <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...

CSS

@import url(http://fonts.googleapis.com/css?family=Dosis:400, 300);
 @import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
 body {
    padding: 10px 0px;
    font-family:'Dosis';
}
h1 {
    color: #4679bd;
    font-weight: 400;
    font-size: 28px;
}
.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-weight: 400;
}
.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;
    }
}

JavaScript

// Bootstrap v3.1.0
// Font Awesome 4.1.0

$(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'),
          ...