Bootstrap Datepicker using moment.js


	<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>
	<script type="text/javascript"></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'); 
                }
            });
        }
        
    });
});