<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() {
var selectedDate = moment("9/19/2016");
var fullDate = "9/01/2016";
var weekStart = 1;
var selectPeriod = 14;
var selectionEnd = moment(selectedDate).endOf('week').add({days: weekStart}).format('L');
var selectionStart = moment(selectionEnd).subtract({days: selectPeriod}).format('L');
let firstWeekDay = parseInt(moment(selectedDate).date(1).format('d'), 10)
var startDate = moment(fullDate).subtract({days: firstWeekDay}).format('L')
// console.log({selectedDate, fullDate, selectionStart, selectionEnd, firstWeekDay, startDate })
for (let i = 0; i < 42; i++) {
console.log({
offset: moment(startDate).month() - moment(startDate).add({days: i}).month(),
day: moment(startDate).add({days: i}).format('D'),
date: moment(startDate).add({days: i}).format('L'),
//selected: moment(fullDate).isBetween(selectionStart, selectionEnd, null, '(]'),
today: false,
});
}
});