JSFiddle - React, Tailwind, and code Playground

by tu genhua

HTML

<p>
		我是时间控件1：<input name="mydate" type="text" class="input_cxcalendar" readonly style="width:200px;">
   </p>

CSS

/* 日期输入框
------------------------------ */
input.input_cxcalendar{width:78px;height:18px;padding:1px 5px;border:1px solid #555;background:url(http://m1.img.srcdd.com/farm4/d/2014/0707/22/A8CA91DF994286F747446C820C03DDC3_B500_900_16_16.png) no-repeat right center;font:12px/18px Arial;cursor:pointer;}
body,html{height:100%;}
/* 日期选择器
------------------------------ */
.cxcalendar{
	display:none;
	position:absolute;
	width:200px;
	font:12px Arial;
	border:1px solid #ccc;
	background:#fff;
	box-shadow:2px 2px 5px rgba(0,0,0,0.3);
	z-index:10000;
}
.cxcalendar .date_hd{
	position:relative;
	height:20px;
	padding:8px 6px 2px 6px;
	background:#fff;
}

.cxcalendar .date_pre,
.cxcalendar .date_next{position:absolute;top:9px;width:9px;height:10px;padding:3px 4px;border:1px solid #fff;border-radius:2px;color:#333;font:0/0 Arial;text-decoration:none;outline:0;
*top:7px;
*height:14px;
*font:bold 14px/14px Arial;}
.cxcalendar .date_pre{left:8px;}
.cxcalendar .date_next{right:8px;}
.cxcalendar .date_pre:before,
.cxcalendar .date_next:before{content:'';display:block;font:0/0 Arial;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;}
.cxcalendar .date_pre:before{border-right:9px solid #333;}
.cxcalendar .date_next:before{border-left:9px solid #333;}
.cxcalendar .date_pre:hover,
.cxcalendar .date_next:hover{border:1px solid #999;background:#eee;}

.cxcalendar .date_txt{width:120px;margin:0 auto;border:1px solid #fff;border-radius:2px;color:#333;font:bold 14px/18px Arial;text-align:center;cursor:pointer;}
.cxcalendar .date_txt:hover{border:1px solid #999;background:#eee;}
.cxcalendar .date_txt .y{padding:0 6px 0 0;}
.cxcalendar .date_txt .m{padding:0 6px;}

.cxcalendar .date_set{display:none;width:120px;margin:0 auto;text-align:center;}
.cxcalendar .year_set,
.cxcalendar .month_set{margin:0;padding:0;border:1px solid #999;border-radius:2px;background:#fff;font:12px/20px Arial;}

.cxcalendar...

JavaScript

/**
 * javascript日历控件
 */

 function Calendar(options,callback){
	var self = this;
	self.options = $.extend({},defaults,options || {});
	self.targetCls = $(self.options.targetCls);
	if(self.targetCls.length < 1) {return;}
	self.language = self.options.language;
	self.flag = false;
	self.callback = callback;

	self._init();
	self._bindEnv();
	
 };
 $.extend(Calendar.prototype,{
	
	_init: function(){
		var self = this;
		// 先渲染日历面板
		self._renderCalendarPanel();
	},
	_renderCalendarPanel: function(){
		var self = this,
			options = self.options;
		// 如果input输入框有日期的话 
		if(self.targetCls.val().length > 0) {
			self.date = self._dateParse(self.targetCls.val());
		}
		self.date = new Date(self.date);
		if(isNaN(self.date.getFullYear())){
			self.date = new Date();
		}
		var defYear = self.date.getFullYear(),
			defMonth = self.date.getMonth() + 1,
			defDay = self.date.getDate();

		// 定义每月的天数
		self.month_day = new Array(31,28+self._leapYear(defYear),31,30,31,30,31,31,30,31,30,31);

		// 定义每周的日期
		self.date_name_week = self.language.weekList;

		// 定义周末
		var saturday = 6 - options.wdays,
			sunday = (7-options.wdays >= 7) ? 0 : (7-options.wday);
		
		// 创建日历面板dom节点
		var date_pane = $('<div class="cxcalendar"></div>'),
			date_hd = $('<div class="date_hd"></div>').appendTo(date_pane),
			date_table = $('<table class="date_table"></table>').appendTo(date_pane);
		date_hd.html("<a class='date_pre' href='javascript://' rel='prev'>&lt;</a><a class='date_next' href='javascript://' rel='next'>&gt;</a>");
		
		var date_txt = $('<div class="date_txt"></div>').appendTo(date_hd),
			date_set = $('<div class="date_set"></div>').appendTo(date_hd),
			html = "";

		for(var i = options.beginyear; i < options.endyear; i++) {
			html +="<option value='"+i+"'>"+i+"</option>";
		}
		var year_list = $('<select class="year_set"></select>').html(html).appendTo(date_set).val(defYear);
		
		date_set.append(" - ");
		html = '';
		for(var i = 0; i < 12; i++) {
			html += '<option...