JSFiddle - React, Tailwind, and code Playground

by tu genhua

HTML

<label>出生日期: </label>
	<select id="year"> </select>年
	<select id="month"> </select>月
	<select id="day"> </select>日


	<ul>
		<li><em>getDate</em> : <button id="testDate">日期</button><input id="textDate"/></li>
		<li><em>getYear</em> : <button id="testYear">年</button><input id="textYear"/></li>
		<li><em>getMonth</em> : <button id="testMonth">月</button><input id="textMonth"/></li>
		<li><em>getDay</em> : <button id="testDay">日</button><input id="textDay"/></li>
	</ul>

CSS

em{font-style:normal;}

JavaScript

/**
 * JS日期级联组件
 * @constructor DateCascade
 * @param {object} 可配置的对象
 * @time 2014-1-13
 * @author 879083421@qq.com
 */
 
 function DateCascade(options) {
	
	this.config = {
		nodeYear          : '#year',        // 年份下拉框dom
		nodeMonth         : '#month',       // 月份下拉框dom
		nodeDay           : '#day',         // 日期下拉框dom
		dateStart         : '',             // 开始日期
		dateEnd           : '',             // 结束日期(可选 默认为空就为当前时间)
		dateDefault       : ''              // 默认日期
	};
 
	this.cache = {
		_dayInMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]  // 月份对应的天数
	};
	this.init(options);
 }

 DateCascade.prototype = {

	constructor: DateCascade,

	init: function(options) {
		
		this.config = $.extend(this.config,options || {});
		var self = this,
			_config = self.config,
			_cache = self.cache;
		
		var y,
			m;

		/* 开始时间 和 截至时间 默认时间*/

		// 开始时间可选 如果为空的话 那么默认开始时间是1900-01-01
		if(_config.dateStart != '') {

			this.startDate = {
				y: new Date(_config.dateStart).getFullYear(),
				m: new Date(_config.dateStart).getMonth() + 1,
				d: new Date(_config.dateStart).getDate()
			};
		}else {
			var dateStart = '1900/01/01';

			this.startDate = {
				y: new Date(dateStart).getFullYear(),
				m: new Date(dateStart).getMonth() + 1,
				d: new Date(dateStart).getDate()
			};
		}
		
		// dateEnd 默认为空 如果没有传入的话 就取当前的时间
		if(_config.dateEnd == '') {
			this.endDate = {
				y: new Date().getFullYear(),
				m: new Date().getMonth() + 1,
				d: new Date().getDate()
			};
		}else {
			this.endDate = {
				y: new Date(_config.dateEnd).getFullYear(),
				m: new Date(_config.dateEnd).getMonth() + 1,
				d: new Date(_config.dateEnd).getDate()
			};
		}
		
		// 默认时间可选 如果默认时间为空的话 那么就取当前的时间
		if(_config.dateDefault != '') {
			this.defaultDate = {
				y: new Date(_config.dateDefault).getFullYear(),
				m: new Date(_config.dateDefault).getMonth() + 1,
				d: new Date(_config.dateDefault).getDate()
			};
		}else {
			this.defaultDate = {
				y: new Date().getFullYear(),
				m:...