"datepiker re"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/RobVermeer/pen/zBgdwg?depth=everything&order=popularity&page=8&q=react&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400,700'> <style class="cp-pen-styles">body { font-family: 'Roboto', sans-serif; background-color: #f8f7fa; color: #333; } .calendar { position: absolute; top: 50%; left: 50%; margin-top: -225px; margin-left: -195px; width: 360px; padding: 15px; box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.4); border-radius: 12px; overflow: hidden; } .calendar--nav { margin: -15px -15px 15px; padding: 0 15px; background-color: #b670f4; color: #fff; height: 70px; position: relative; } .calendar--nav a { position: absolute; cursor: pointer; left: 10px; font-size: 32px; line-height: 1; top: 16px; width: 30px; text-align: center; display: inline-block; color: rgba(255, 255, 255, 0.4); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .calendar--nav a:hover { color: #fff; } .calendar--nav a:last-child { left: auto; right: 10px; } .calendar--nav h1 { margin: 0; position: absolute; left: 40px; right: 40px; text-align: center; cursor: pointer; font-weight: 400; font-size: 30px; line-height: 66px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .calendar--nav small { font-weight: 300; font-size: 60%; } .calendar--days { font-size: 0; } .calendar--days span { width: 14.28571%; display: inline-block; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; margin: 8px 0; line-height: 34px; position: relative; font-size: 16px; } .calendar--days span.label { text-transform: uppercase; font-weight: 700; color: rgba(0, 0, 0, 0.3); font-size: 14px; cursor: initial; } .calendar--days span.active { font-weight: 700; background-color: rgba(182, 112, 244, 0.05); border-radius: 12px; } .calendar--days span.muted { color: rgba(0, 0, 0, 0.3); } .calendar--days span.between { border-radius: 0; } .calendar--days span.start, .calendar--days span.between, .calendar--days span.end { background-color: #b670f4; color: #fff; } .calendar--days span.start { border-radius: 12px 0 0 12px; } .calendar--days span.end { border-radius: 0 12px 12px 0; } .calendar--days span.start.end { border-radius: 12px; } .calendar--days span.between:nth-child(7n):after, .calendar--days span.start:nth-child(7n):after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; background-color: #b670f4; width: 20px; } .calendar--days span.between:nth-child(7n + 1):after, .calendar--days span.end:nth-child(7n + 1):after { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; background-color: #b670f4; width: 20px; } .calendar--days span.start.end:after { display: none; } </style></head><body> <div id="calendar"></div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://npmcdn.com/react@15.3.0/dist/react.min.js'></script><script src='https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment-with-locales.min.js'></script> <script >'use strict'; function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } var Heading = function Heading(_ref) { var date = _ref.date; var changeMonth = _ref.changeMonth; var resetDate = _ref.resetDate; return React.createElement( 'nav', { className: 'calendar--nav' }, React.createElement( 'a', { onClick: function onClick() { return changeMonth(date.month() - 1); } }, '‹' ), React.createElement( 'h1', { onClick: function onClick() { return resetDate(); } }, date.format('MMMM'), ' ', React.createElement( 'small', null, date.format('YYYY') ) ), React.createElement( 'a', { onClick: function onClick() { return changeMonth(date.month() + 1); } }, '›' ) ); }; var Day = function Day(_ref2) { var currentDate = _ref2.currentDate; var date = _ref2.date; var startDate = _ref2.startDate; var endDate = _ref2.endDate; var _onClick = _ref2.onClick; var className = []; if (moment().isSame(date, 'day')) { className.push('active'); } if (date.isSame(startDate, 'day')) { className.push('start'); } if (date.isBetween(startDate, endDate, 'day')) { className.push('between'); } if (date.isSame(endDate, 'day')) { className.push('end'); } if (!date.isSame(currentDate, 'month')) { className.push('muted'); } return React.createElement( 'span', { onClick: function onClick() { return _onClick(date); }, currentDate: date, className: className.join(' ') }, date.date() ); }; var Days = function Days(_ref3) { var date = _ref3.date; var startDate = _ref3.startDate; var endDate = _ref3.endDate; var _onClick2 = _ref3.onClick; var thisDate = moment(date); var daysInMonth = moment(date).daysInMonth(); var firstDayDate = moment(date).startOf('month'); var previousMonth = moment(date).subtract(1, 'month'); var previousMonthDays = previousMonth.daysInMonth(); var nextsMonth = moment(date).add(1, 'month'); var days = []; var labels = []; for (var i = 1; i <= 7; i++) {if (window.CP.shouldStopExecution(1)){break;} labels.push(React.createElement( 'span', { className: 'label' }, moment().day(i).format('ddd') )); } window.CP.exitedLoop(1); for (var i = firstDayDate.day(); i > 1; i--) {if (window.CP.shouldStopExecution(2)){break;} previousMonth.date(previousMonthDays - i + 2); days.push(React.createElement(Day, { key: moment(previousMonth).format('DD MM YYYY'), onClick: function onClick(date) { return _onClick2(date); }, currentDate: date, date: moment(previousMonth), startDate: startDate, endDate: endDate })); } window.CP.exitedLoop(2); for (var i = 1; i <= daysInMonth; i++) {if (window.CP.shouldStopExecution(3)){break;} thisDate.date(i); days.push(React.createElement(Day, { key: moment(thisDate).format('DD MM YYYY'), onClick: function onClick(date) { return _onClick2(date); }, currentDate: date, date: moment(thisDate), startDate: startDate, endDate: endDate })); } window.CP.exitedLoop(3); var daysCount = days.length; for (var i = 1; i <= 42 - daysCount; i++) {if (window.CP.shouldStopExecution(4)){break;} nextsMonth.date(i); days.push(React.createElement(Day, { key: moment(nextsMonth).format('DD MM YYYY'), onClick: function onClick(date) { return _onClick2(date); }, currentDate: date, date: moment(nextsMonth), startDate: startDate, endDate: endDate })); } window.CP.exitedLoop(4); return React.createElement( 'nav', { className: 'calendar--days' }, labels.concat(), days.concat() ); }; var Calendar = function (_React$Component) { _inherits(Calendar, _React$Component); function Calendar(props) { _classCallCheck(this, Calendar); var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); _this.state = { date: moment(), startDate: moment().subtract(5, 'day'), endDate: moment().add(3, 'day') }; return _this; } Calendar.prototype.resetDate = function resetDate() { this.setState({ date: moment() }); }; Calendar.prototype.changeMonth = function changeMonth(month) { var date = this.state.date; date.month(month); this.setState(date); }; Calendar.prototype.changeDate = function changeDate(date) { var _state = this.state; var startDate = _state.startDate; var endDate = _state.endDate; if (startDate === null || date.isBefore(startDate, 'day') || !startDate.isSame(endDate, 'day')) { startDate = moment(date); endDate = moment(date); } else if (date.isSame(startDate, 'day') && date.isSame(endDate, 'day')) { startDate = null; endDate = null; } else if (date.isAfter(startDate, 'day')) { endDate = moment(date); } this.setState({ startDate: startDate, endDate: endDate }); }; Calendar.prototype.render = function render() { var _this2 = this; var _state2 = this.state; var date = _state2.date; var startDate = _state2.startDate; var endDate = _state2.endDate; return React.createElement( 'div', { className: 'calendar' }, React.createElement(Heading, { date: date, changeMonth: function changeMonth(month) { return _this2.changeMonth(month); }, resetDate: function resetDate() { return _this2.resetDate(); } }), React.createElement(Days, { onClick: function onClick(date) { return _this2.changeDate(date); }, date: date, startDate: startDate, endDate: endDate }) ); }; return Calendar; }(React.Component); ReactDOM.render(React.createElement(Calendar, null), document.getElementById('calendar')); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: