-
-
Save ffffranklin/21a89f4ade221ad5a202 to your computer and use it in GitHub Desktop.
JS Bin// source https://jsbin.com/kecokok
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment