JSFiddle - React, Tailwind, and code Playground

by damngoto

HTML

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://h5.dataeye.com/assets/build/base.js?52f155a291cd28d9e97976bbb8d53a05"></script>
<div class="wrapper">
		<div id="el"></div>
	</div>

	<script id="main"  type="text/plain" >
		<h3>设置连选模式：</h3>
		<div class="btn btn-group">
			<button class="btn btn-default" on-click="selectMultiDays:-7">
				前7天
			</button>
			<button class="btn btn-default" on-click="selectMultiDays:-30">
				前30天
			</button>
			<button class="btn btn-default" on-click="selectMultiDays:7">
				后7天
			</button>
			<button class="btn btn-default" on-click="selectMultiDays:30">
				后30天
			</button>
			<button class="btn btn-default" on-click="selectMultiDays:0">
				自定义
			</button>
		</div>

		<calendar start="2014-11-06" end="2014-11-06"></calendar>
		<hr>
		<h3>单日选择模式：</h3>
		<calendar selected="2014-11-06"></calendar>
	</script>

	<script id="ractive-calendar" type="text/plain">
	<div class="de-calendar">
		<span class="form-control" on-click="toggle" style="cursor: pointer;">
			{{format(startDate)}}
			{{#isRange}}
				~ {{format(endDate)}}
			{{/}}
			<i class="fa fa-calendar"></i>
		</span>
		{{#show}}
		<div class="de-calendar-container {{next ? 'de-calendar-range':''}}">
			<div class="de-calendar-current">
				<table class="table">
					<thead>
						<tr>
							<td>
								<a href="javascript:;"><i class="fa fa-backward" on-click="goto:-1"></i></a>
							</td>
							<td colspan="5" style="text-align: center;">{{currentYear}}年{{currentMonth}}月</td>
							{{^next}}
							<td>
								<a href="javascript:;"><i class="fa fa-forward"...

CSS

.de-calendar {
	display: inline-block;
	position: relative;
	width:auto;
}

.de-calendar .form-control {
	display: inline-block;
}

.de-calendar .table {
	margin: 0;
}

.de-calendar .table thead td, .de-calendar .table tbody td {
	padding: 0;
	text-align: center;
	border-top: 0 !important;
	border-bottom: 0 !important;
}

.de-calendar .table thead a {
	color: #666;
}

.de-calendar .table thead td {
	padding: 10px 0;
}

.de-calendar .day div {
	width: 40px;
	padding: 5px 0;
	line-height: 18px;
	margin: 3px 0;
}

.de-calendar input {
	text-align: center;
}

.de-calendar .day {
	cursor: pointer;
}

.de-calendar .day div {
	color: #484848;
}

.de-calendar .day.selected div {
	background-color: #5A92C7;
	color: #fff;
}

.de-calendar .day.hovered div {
	background-color: #D1EEFC;
	color: #696969;
}

.de-calendar .day.start-date div{
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
}

.de-calendar .day.end-date div{
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
}

.de-calendar .day.hovered.start-date div{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.de-calendar .day.hovered.end-date div{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.de-calendar-range {
	width: 600px;
}

.de-calendar-container {
	position: absolute;
	top: 38px;
	left: 0;
	border: 1px solid #e1e1e1;
	background-color: #ffffff;
	border: 1px solid #AAAAAA;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;
	z-index: 9999;
}

.de-calendar-current {
	float:left;
	padding: 0 10px;
	width: 50%;
}

.de-calendar-next {
	float: right;
	padding: 0 10px;
	width: 50%;
}

.de-calendar-footer {
	background: #F3F3F3;
	background-image: -ms-linear-gradient(top, #FFFFFF,...

JavaScript

(function(global, factory) {
	'use strict';
	// Common JS (i.e. browserify) environment
	if (typeof module !== 'undefined' && module.exports && typeof require === 'function') {
		factory(require('ractive'));
	}
	// AMD?
	else if (typeof define === 'function' && define.amd) {
		define(['ractive'], factory);
	}
	// browser global
	else if (global.Ractive) {
		factory(global.Ractive);
	} else {
		throw new Error('Could not find Ractive! It must be loaded before the ractive-calendar plugin');
	}
}(typeof window !== 'undefined' ? window : this, function(Ractive) {

	// 获取月份相关信息：年、月、天数、本月首日周几
	var getMonthInfo = function(year, month) {
		var date = new Date(year, month, 1)
		var current = new Date(date.getTime() - 24 * 3600 * 1000)
		return {
			year: current.getFullYear(),
			month: current.getMonth() + 1,
			days: current.getDate(),
			// 周日按最后一天算
			day: new Date(year, month - 1, 1).getDay() || 7
		}
	}

	// 表格化数据，按周 6 * 7
	var tablify = function(items, rowLen, colLen) {
		var len = items.length
		var results = []
		for (var i = 0; i < rowLen; i++) {
			var array = []
			for (var j = 0; j < colLen; j++) {
				array.push(items[i * colLen + j])
			}
			results.push(array)
		}
		return results
	}

	// 获取当月日历表信息（固定42条数据）
	var getCalendarDays = function(year, month) {
		var current = getMonthInfo(year, month)
		var prev = getMonthInfo(year, month - 1)
		var next = getMonthInfo(year, month + 1)

		var items = []
		for (var i = 0; i < current.day - 1; i++) {
			items.unshift({
				year: prev.year,
				month: prev.month,
				date: prev.days - i,
				day: prev.day
			})
		}
		for (var i = 1; i <= current.days; i++) {
			items.push({
				year: current.year,
				month: current.month,
				date: i,
				day: current.day
			})
		}
		var paddingLen = 6 * 7 - current.days - (current.day - 1)
		for (var i = 1; i <= paddingLen; i++) {
			items.push({
				year: next.year,
				month: next.month,
				date: i,
				day: next.day
			})
		}
		return tablify(items, 6, 7)
	}

	//...