Skip to content

Instantly share code, notes, and snippets.

/index.html

Created January 23, 2016 01:04
Show Gist options
  • Save anonymous/5eafa618a987a59e3df1 to your computer and use it in GitHub Desktop.
Save anonymous/5eafa618a987a59e3df1 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/kecokok
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment-with-locales.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.day {
display:inline-block;
width: 2rem;
height: 2rem;
border: 1px solid #ddd;
}
.selected {
background-color:#ddd;
}
</style>
</head>
<body>
<nav>
<a class="prev" href="#">Prev</a>
<a class="next" href="#">Next</a>
</nav>
<div class="pane"></div>
<script id="jsbin-javascript">
var state = {
currDay: (new Date).getDate(),
currMonth: (new Date).getMonth() + 1,
currYear: (new Date).getFullYear()
}
function month(month, year) {
var result = [];
var day = 1;
do {
result.push({
date: day,
year: year,
month: month,
isToday: false
});
day++;
} while (dateIsValid([month, day, year].join('/')))
return result;
}
function isToday(day) {
var date = new Date();
return day.date === date.getDate()
&& day.month === (date.getMonth() + 1)
&& day.year === date.getFullYear();
}
function selectToday(monthArr) {
return monthArr.map(function (day) {
return (isToday(day)) ? Object.assign(day, {isToday: true}) : day
})
}
function dateIsValid(str) {
return moment(str, 'MM/DD/YYYY').isValid();
}
function monthView (arr) {
return arr.reduce(function (accu, day) {
var selectedClass = (day.isToday) ? 'selected' : '';
return accu + '<div class="day '+selectedClass+'">' + day.date + '</div>'
}, '')
}
function render($view, html) {
$view.html(html);
$view.find('.day').each(function () {
$(this).on('click', function () {
$('.day').removeClass('selected');
$(this).addClass('selected');
});
});
}
function incrementMonthView($view) {
return function () {
if (state.currMonth <= 12) {
state.currMonth++;
render($view, monthView(selectToday(month(state.currMonth, state.currYear))));
}
}
}
function deincrementMonthView($view) {
return function () {
if (state.currMonth > 0) {
state.currMonth--;
render($view, monthView(selectToday(month(state.currMonth, state.currYear))))
}
}
}
function init() {
var next = $('.next');
var prev = $('.prev');
var $pane = $('.pane');
var monthViewHtml = monthView(selectToday(month(state.currMonth, state.currYear)));
next.on('click', incrementMonthView($pane))
prev.on('click', deincrementMonthView($pane))
render($pane, monthViewHtml)
}
init();
</script>
<script id="jsbin-source-css" type="text/css">.day {
display:inline-block;
width: 2rem;
height: 2rem;
border: 1px solid #ddd;
}
.selected {
background-color:#ddd;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var state = {
currDay: (new Date).getDate(),
currMonth: (new Date).getMonth() + 1,
currYear: (new Date).getFullYear()
}
function month(month, year) {
var result = [];
var day = 1;
do {
result.push({
date: day,
year: year,
month: month,
isToday: false
});
day++;
} while (dateIsValid([month, day, year].join('/')))
return result;
}
function isToday(day) {
var date = new Date();
return day.date === date.getDate()
&& day.month === (date.getMonth() + 1)
&& day.year === date.getFullYear();
}
function selectToday(monthArr) {
return monthArr.map(function (day) {
return (isToday(day)) ? Object.assign(day, {isToday: true}) : day
})
}
function dateIsValid(str) {
return moment(str, 'MM/DD/YYYY').isValid();
}
function monthView (arr) {
return arr.reduce(function (accu, day) {
var selectedClass = (day.isToday) ? 'selected' : '';
return accu + '<div class="day '+selectedClass+'">' + day.date + '</div>'
}, '')
}
function render($view, html) {
$view.html(html);
$view.find('.day').each(function () {
$(this).on('click', function () {
$('.day').removeClass('selected');
$(this).addClass('selected');
});
});
}
function incrementMonthView($view) {
return function () {
if (state.currMonth <= 12) {
state.currMonth++;
render($view, monthView(selectToday(month(state.currMonth, state.currYear))));
}
}
}
function deincrementMonthView($view) {
return function () {
if (state.currMonth > 0) {
state.currMonth--;
render($view, monthView(selectToday(month(state.currMonth, state.currYear))))
}
}
}
function init() {
var next = $('.next');
var prev = $('.prev');
var $pane = $('.pane');
var monthViewHtml = monthView(selectToday(month(state.currMonth, state.currYear)));
next.on('click', incrementMonthView($pane))
prev.on('click', deincrementMonthView($pane))
render($pane, monthViewHtml)
}
init();
</script></body>
</html>
Raw
jsbin.kecokok.css
.day {
display:inline-block;
width: 2rem;
height: 2rem;
border: 1px solid #ddd;
}
.selected {
background-color:#ddd;
}
Raw
jsbin.kecokok.js
var state = {
currDay: (new Date).getDate(),
currMonth: (new Date).getMonth() + 1,
currYear: (new Date).getFullYear()
}
function month(month, year) {
var result = [];
var day = 1;
do {
result.push({
date: day,
year: year,
month: month,
isToday: false
});
day++;
} while (dateIsValid([month, day, year].join('/')))
return result;
}
function isToday(day) {
var date = new Date();
return day.date === date.getDate()
&& day.month === (date.getMonth() + 1)
&& day.year === date.getFullYear();
}
function selectToday(monthArr) {
return monthArr.map(function (day) {
return (isToday(day)) ? Object.assign(day, {isToday: true}) : day
})
}
function dateIsValid(str) {
return moment(str, 'MM/DD/YYYY').isValid();
}
function monthView (arr) {
return arr.reduce(function (accu, day) {
var selectedClass = (day.isToday) ? 'selected' : '';
return accu + '<div class="day '+selectedClass+'">' + day.date + '</div>'
}, '')
}
function render($view, html) {
$view.html(html);
$view.find('.day').each(function () {
$(this).on('click', function () {
$('.day').removeClass('selected');
$(this).addClass('selected');
});
});
}
function incrementMonthView($view) {
return function () {
if (state.currMonth <= 12) {
state.currMonth++;
render($view, monthView(selectToday(month(state.currMonth, state.currYear))));
}
}
}
function deincrementMonthView($view) {
return function () {
if (state.currMonth > 0) {
state.currMonth--;
render($view, monthView(selectToday(month(state.currMonth, state.currYear))))
}
}
}
function init() {
var next = $('.next');
var prev = $('.prev');
var $pane = $('.pane');
var monthViewHtml = monthView(selectToday(month(state.currMonth, state.currYear)));
next.on('click', incrementMonthView($pane))
prev.on('click', deincrementMonthView($pane))
render($pane, monthViewHtml)
}
init();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment