`

jquery datefield

 
阅读更多

支持年月日、年月、年月日时分秒、年月日时分、时分秒、时分六种下拉选择

注意,需要moment.js插件作为前提

;
(function($) {
	/** 国际化 **/
	$.i18n = $.i18n || {};
	$.i18n.week = '周';
	$.i18n.days = [ '日', '一', '二', '三', '四', '五', '六' ];
	$.i18n.shortDays = [ '日', '一', '二', '三', '四', '五', '六' ];
	$.i18n.months = [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月",
			"十月", "十一", "十二" ];
	$.i18n.shortMonths = [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月",
			"九月", "十月", "十一", "十二" ];

	$.i18n.datepicker={
		OK:'确定',
		CLEAR:'清空',
		TODAY:'今天'
	}
	
	if (!$.browser) {
		var userAgent = navigator.userAgent.toLowerCase();
		// Figure out what browser is being used
		$.browser = {
			version : (userAgent.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [])[1],
			safari : /webkit/.test(userAgent),
			opera : /opera/.test(userAgent),
			chrome: /chrome/.test(userAgent),
			msie : /msie/.test(userAgent) && !/opera/.test(userAgent),
			mozilla : /mozilla/.test(userAgent)
					&& !/(compatible|webkit)/.test(userAgent)
		};
	}

	/** 高版本浏览器支持 **/
	var ele = document.createElement("input");
	var _support_placeholder = 'placeholder' in ele;
		
	//TNND IE9在WIN7卸载会退到IE8后,内核版本仍然是IE9BUG:'opacity' in ele.style
	var ltIE9 = $.browser.msie && (!('opacity' in ele.style) || $.browser.version < 9);
	
	ele = null;
/** 国际化文本 **/
    moment.lang('cn', {
	    weekdays : ["星期日", "星期一","星期二", "星期三", "星期四", "星期五", "星期六"]
	});

	// 日期解析
	Date.parseDate = function(str, format) {
		
		if (!str) {return null;}

		if (Date.isDate(str)) {return str;}

		if(format){var d=moment(str, format);return d.isValid() ? d.toDate() : null;}

		var date =  moment(str,"YYYYMMDDThhmmss");
		
		!date.isValid() ? date=moment(str,"YYYYMMDDhhmmss") : false;

		!date.isValid() ? date=moment(str) : false;

		return date.isValid() ? date.toDate() : null;

	};

    // 是否日期
	Date.isDate = function(date) { return Object.prototype.toString.call(date) == '[Object Date]' || date instanceof Date;};

	// 日期格式化
	Date.prototype.formatDate = function(format) {return moment(this).format(format || 'YYYY-MM-DD hh:mm:ss');};

	// 周数 ISO 8601
	Date.prototype.getWeek = function() {return moment(this).week();};
	/**
	 * datepicker
	 * @constructor
	 */
	$.datepicker = function($element, options) {
		
		var self = this,timestamp=+new Date();

		// datetime、dateminute、date、month、time、minute
		this.type=options.type || 'date';

		// 默认值
		this.value = Date.parseDate(options.value,this.getFormat(this.type)) || new Date();

		this.$element = $element.addClass("date-picker");
	
		options.cls && $element.addClass(options.cls);

		options.width ? $element.width(options.width) : false;
		
		options.height ? $element.height(options.height) : false;

		$element.html('<div class="view-top">'
						+'<table style="width:100%;" cellspacing=0 cellpadding=0><tbody>'
							+'<tr>'
								+'<td><span class="cell-icon icon-prev-year"></span></td>'
								+'<td><span class="cell-icon icon-prev-month"></span></td>'
								+'<td class="cell-selected-month">'+this.textMonth(this.value.getMonth() + 1)+'</td>'
								+'<td class="cell-selected-year">'+this.textYear(this.value.getFullYear())+'</td>'
								+'<td><span class="cell-icon  icon-next-month"></span></td>'
								+'<td><span class="cell-icon icon-next-year"></span></td>'
							+'</tr>'
						+'</tbody></table>'
					  +'</div>' 
					  +'<div class="view-date" style="display:block;">'
					 	+'<table style="width:100%;" cellspacing=0 cellpadding=0><tbody></tbody></table>'
					  +'</div>' 
					  +'<div class="view-month" style="display:none;">'
					 	+'<table style="width:100%;" cellspacing=0 cellpadding=0><tbody></tbody></table>'
					  +'</div>' 
					  +'<div class="view-time" style="display:none;">'
					 	+'<table style="width:100%;" cellspacing=0 cellpadding=0><tbody></tbody></table>'
					  +'</div>');

		// 工具栏
		var html=[];
		
		(this.type==='datetime' || this.type==='dateminute') && html.push('<span id="dp_'+timestamp+'_clock" class="icon-clock"></span>');
		
		options.showClear && html.push('<input type="button" id="dp_'+timestamp+'_clear" class="btn-clear" value="'+$.i18n.datepicker.CLEAR+'" />');
		
		options.showToday && html.push('<input type="button" id="dp_'+timestamp+'_today" class="btn-today" value="'+$.i18n.datepicker.TODAY+'" />');
		
		options.showOK && html.push('<input type="button" id="dp_'+timestamp+'_ok" class="btn-ok" value="'+$.i18n.datepicker.OK+'" />');
	
		html.length && $element.append('<div class="view-bottom">'+html.join("")+'</div>');
		
		this.$top=$element.find("> .view-top");

		this.$dateView=this.$top.next();
		
		this.$monthView=this.$dateView.next();
		
		this.$timeView=this.$monthView.next();
				
		this.$bottom=$element.find("> .view-bottom");
		
		if(this.type === 'date'){
			
			this.$timeView.remove();
			this.$timeView=null;

		}
		
		if(this.type === 'month'){
			
			this.$timeView.remove();
			this.$timeView=null;
			
			this.$dateView.remove();
			this.$dateView=null;
			
			this.$monthView.css("display","");

		}
		
		// 时间选择器
		if(this.type==='time' || this.type==='minute'){
			
			this.$top.remove();
			this.$top=null;
			
			this.$dateView.remove();
			this.$dateView=null;
			
			this.$monthView.html("");
			this.$monthView=null;
			
			this.$timeView.css("display","");
		}

		this.showWeek = !!options.showWeek;
		
		// 显示上月/下月日期
		this.showOtherMonth = !!options.showOtherMonth;

		// 每周第一天
		this.firstDayOfWeek = options.firstDayOfWeek;
	
		// 最大值
		this.setMaxDate(options.maxDate,true);
		
		// 最小值
		this.setMinDate(options.minDate,true);
		
		// 禁用星期
		this.setDisableDays(options.disableDays,true);
		
		// 正则禁用
		this.setDisableDates(options.disableDates,false);

		var selector = "td.cell-date,td.cell-month,td.cell-year";
		
		$element
				.on("mouseover.datepicker", selector, function() {

					!/cell-disabled/.test(this.className) && $(this).addClass("cell-hover");
					
				})
				.on("mouseout.datepicker", selector, function() {

					!/cell-disabled/.test(this.className) && $(this).removeClass("cell-hover");
					
				}).on(
		"click.datepicker",
		"td.cell,.cell-icon,td.cell-selected-year,td.cell-selected-month,.icon-clock,.icon-prev-hour,.icon-next-hour,.icon-prev-minute,.icon-next-minute,.icon-prev-second,.icon-next-second,.btn-clear,.btn-ok,.btn-today",
		function(e) {
		
			// 事件分发处理
			var sf=self;
			
			// TIME VIEW: 小时点选
			if(/cell-hour/.test(this.className)){
				
				var date=sf.value;
		
				date.setHours(+$(this).text());
			
				sf.draw(date,"time");

				sf.trigger("timepick",!/cell-disabled/.test(this.className) && /row-time/.test(this.parentNode.className) ? false : true);
				
				return;
			}
			
			// TIME VIEW: 分点选
			if(/cell-minute/.test(this.className)){
				
				var date=sf.value;
		
				date.setMinutes(+$(this).text());
			
				sf.draw(date,"time");
				
				sf.trigger("timepick",!/cell-disabled/.test(this.className) && /row-time/.test(this.parentNode.className) ? false : true);
				
				return;
			}
			
			// TIME VIEW: 秒点选
			if(/cell-second/.test(this.className)){
				
				var date=sf.value;
		
				date.setSeconds(+$(this).text());
			
				sf.draw(date,"time");
				
				sf.trigger("timepick",!/cell-disabled/.test(this.className) && /row-time/.test(this.parentNode.className) ? false : true);
				
				return;
			}
			
			// TIME VIEW: 小时递减
			if(/icon-prev-hour/.test(this.className)){
				
				var date=sf.value;
		
				date.setHours((date.getHours()-5+24)%24);
			
				sf.draw(date,"time");
				
				sf.trigger("timepick",true);
				
				return;
			}
			
			// TIME VIEW: 分递减
			if(/icon-prev-minute/.test(this.className)){
				
				var date=sf.value;
					
				date.setMinutes((date.getMinutes()-5+60)%60);
				
				sf.draw(date,"time");
				
				sf.trigger("timepick",true);
				
				return;
			}
			
			// TIME VIEW: 秒递减
			if(/icon-prev-second/.test(this.className)){
				
				var date=sf.value;
				
				date.setSeconds((date.getSeconds()-5+60)%60);
				
				sf.draw(date,"time");
				
				sf.trigger("timepick",true);
				
				return;
			}
			
			// TIME VIEW: 小时递增
			if(/icon-next-hour/.test(this.className)){

				var date=sf.value;
				
				date.setHours((date.getHours()+5+24)%24);
				
				sf.draw(date,"time");
				
				sf.trigger("timepick",true);
				
				return;
			}
			
			// TIME VIEW: 分递增
			if(/icon-next-minute/.test(this.className)){
			
				var date=sf.value;
				
				date.setMinutes((date.getMinutes()+5+60)%60);
				
				sf.draw(date,"time");
				
				sf.trigger("timepick",true);
				
				return;
			}
			
			// TIME VIEW: 秒递增
			if(/icon-next-second/.test(this.className)){
			
				var date=sf.value;
				
				date.setSeconds((date.getSeconds()+5+60)%60);
				
				sf.draw(date,"time");
				
				sf.trigger("timepick",true);
				
				return;
			}

			// 禁用
			if (/cell-disabled/.test(this.className)) {return;}

			// DATE VIEW: 点选下一月日期
			if (/cell-next-month/.test(this.className)) {
				
				var $top = sf.$top,day = +this.className.match(/\d{1,2}/);

				var date = sf.value,year = date.getFullYear(),month = date.getMonth();

				// 当前月没有这天怎么办,必须先置为1
				date.setDate(1);
				
				date.setMonth(month + 1);
				date.setDate(day);

				sf.$dateView && sf.draw(date,"date");
				
				sf.$monthView && sf.draw(date,"month");

				sf.trigger('datepick');

				return;
			}

			// DATE VIEW:点选上一月日期
			if (/cell-prev-month/.test(this.className)) {
				
				var $top = sf.$top,day = +this.className.match(/\d{1,2}/);

				var date = sf.value,year = date.getFullYear(),month = date.getMonth();

				// 当前月没有这天怎么办,必须先置为1
				date.setDate(1);
				
				date.setMonth(month - 1);
				date.setDate(day);

				sf.$dateView && sf.draw(date,"date");
				
				sf.$monthView && sf.draw(date,"month");

				sf.trigger('datepick');

				return;
			}

			// DATE VIEW:点选当月日期
			if (/cell-date/.test(this.className)) {
				
				var date=sf.value,day = +this.className.match(/\d{1,2}/);

				if (day !== date.getDate()) {
					
					var $cell = $(this);
					
					date.setDate(day);

					// 移除选中样式
					$cell.parent().parent().find(".cell-date.cell-selected").removeClass("cell-selected");

					$cell.addClass("cell-selected");
				
				}

				sf.trigger('datepick');

				return;
			}

			// MONTH View:点选月份
			if (/cell-month/.test(this.className)) {
				
				var date = sf.value,month = +this.className.match(/\d{1,2}/);

				if (month !== date.getMonth()+1) {

					var $cell = $(this) , $top=sf.$top;
					
					date.setMonth(month - 1);

					$top.find("td.cell-selected-month").html(sf.textMonth(month));

					// 移除选中样式
					$cell.parent().parent().find(".cell-month.cell-selected").removeClass("cell-selected");
					
					$cell.addClass("cell-selected");

					sf.$dateView && sf.draw(date, "date");

				}

				sf.trigger('monthpick');
				
				return;
			}

			// MONTH VIEW: 点选年份
			if (/cell-year/.test(this.className)) {
				
				var date = self.value,year = +this.className.match(/\d{4}/);

				if (year !== date.getFullYear()) {

					var $top=sf.$top , $cell=$(this);
					
					date.setFullYear(year);

					$top.find("td.cell-selected-year").html(sf.textYear(year));
					
					// 移除选中样式
					$cell.parent().parent().find(".cell-year.cell-selected").removeClass("cell-selected");
					
					$cell.addClass("cell-selected");

					sf.$dateView && sf.draw(date, "date");

				}
				
				sf.trigger('yearpick');
				
				return;
			}

			// MONTH VIEW: 点选下10年箭头
			if (/cell-next-10/.test(this.className)) {
				
				var year = +sf.$monthView.find("> table > tbody > tr:eq(0) > td:eq(3)")[0].className.match(/\d{4}/);
				
				var date = new Date(+self.value);
				
				date.setFullYear(year + 10);
				
				sf.draw(date, "month");

				return;
			}

			// MONTH VIEW: 点选上10年箭头
			if (/cell-prev-10/.test(this.className)) {
				
				var year = +sf.$monthView.find("> table > tbody > tr:eq(0) > td:eq(3)")[0].className.match(/\d{4}/);
				
				var date = new Date(+self.value);
				
				date.setFullYear(year - 10);
				
				sf.draw(date, "month");

				return;
			}

			// TOP VIEW: 点选下一月箭头
			if (/icon-next-month/.test(this.className)) {
				
				var date = sf.value;
				
				date.setMonth(date.getMonth() + 1);

				sf.draw(date,"date");

				sf.draw(date,"month");

				sf.$timeView && sf.$timeView.css("display")!=="none" && sf.draw(date,"time");
				
				sf.trigger('monthpick');

				return;
			}

			// TOP VIEW: 点选上一月箭头 
			if (/icon-prev-month/.test(this.className)) {

				var date = sf.value;
				
				date.setMonth(date.getMonth() - 1);

				sf.draw(date,"date");

				sf.draw(date,"month");
				
				sf.$timeView && sf.$timeView.css("display")!=="none" && sf.draw(date,"time");

				sf.trigger('monthpick');

				return;
			}

			// TOP VIEW: 点选下一年箭头 
			if (/icon-next-year/.test(this.className)) {

				var date = sf.value;
				
				date.setYear(date.getFullYear() + 1);

				sf.draw(date,"date");

				sf.draw(date,"month");

				sf.$timeView && sf.$timeView.css("display")!=="none" && sf.draw(date,"time");
				
				sf.trigger('yearpick');

				return;
			}

			// TOP VIEW: 点选上一年箭头
			if (/icon-prev-year/.test(this.className)) {

				var date = sf.value;
				
				date.setYear(date.getFullYear() - 1);

				sf.draw(date,"date");

				sf.draw(date,"month");
				
				sf.$timeView && sf.$timeView.css("display")!=="none" && sf.draw(date,"time");
				
				sf.trigger('yearpick');
				
				return;
			}

			// TOP VIEW: 切换 日期 视图、年月视图
			if (/cell-selected-year/.test(this.className) || /cell-selected-month/.test(this.className)) {

				if(sf.$timeView && sf.$timeView.css("display")!=='none'){
					
					sf.$timeView.hide();
					
					sf.$dateView && sf.$dateView.show();
					
					sf.$monthView && sf.$monthView.hide();
				
				}else{

					if(sf.$dateView){
						sf.$dateView.css("display")==="none" ? sf.$dateView.show() && sf.$monthView && sf.$monthView.hide() : sf.$dateView.hide() && sf.$monthView && sf.$monthView.show();
					} 

				}
				
				return;
			}
			
			// BOTTON VIEW: 工具栏闹钟图标
			if(/icon-clock/.test(this.className)){
				
				var show=sf.$timeView.css("display")==="none";
	
				sf.$monthView && sf.$monthView.hide();
				
				sf.$dateView && sf.$dateView[show ? "hide" : "show"]();

				show && sf.draw(sf.value,"time");
				
				sf.$timeView.toggle();
				
				return;
			}
			
			// BOTTOM VIEW:工具栏今天按钮
			if(/btn-today/.test(this.className)){
				
				sf.value=new Date();
				
				sf.redraw();
				
				sf.trigger("datepick");
				
				return;
				
			}
			
			// BOTTOM VIEW:工具栏今天按钮
			if(/btn-clear/.test(this.className)){
				
				sf.trigger("clear");
				
				return;				
			}
			
			// BOTTOM VIEW:工具栏今天按钮
			if(/btn-ok/.test(this.className)){
				
				sf.trigger("datepick");
				
				return;
			}
			
		}).on("mousewheel.datepicker",function(e){// 鼠标滚轮

			var sf=self,date=sf.value,cls=e.target.className;
			
			if(/cell-hour/.test(cls)){
				
				date.setHours((date.getHours()-e.deltaY+24)%24);
				
				sf.draw(date,"time");
				
				sf.trigger("timepick",true);
				
			}
			
			if(/cell-minute/.test(cls)){
				
				date.setMinutes((date.getMinutes()-e.deltaY+60)%60);
				
				sf.draw(date,"time");
				
				sf.trigger("timepick",true);
				
			}
			
			if(/cell-second/.test(cls)){
				
				date.setSeconds((date.getSeconds()-e.deltaY+60)%60);
				
				sf.draw(date,"time");
				
				sf.trigger("timepick",true);
				
			}

			return false;
		});
	};
	
	$.datepicker.prototype.textMonth=function(month){return $.i18n.months[+month - 1];};
	
	$.datepicker.prototype.textYear=function(year){return year;};

	// 重新绘制日期
	$.datepicker.prototype.redraw = function(date) {
		
		this.value = date || this.value;

		this.$dateView && this.draw(this.value, 'date');
		
		this.$monthView && this.draw(this.value, 'month');
		
		this.$timeView && this.draw(this.value, 'time');
		
		return this;
	};

	// 绘制日期
	$.datepicker.prototype.draw = function(date, type) {

		var $view = this["$"+type+"View"];
		
		if (!$view) {return this;}

		$view = $view.find(" > table > tbody");
		
		// 当前日期
		var current_date=new Date(),cyear=current_date.getFullYear(),cmonth=current_date.getMonth(),cday=current_date.getDate(),chour=current_date.getHours(),cminute=current_date.getMinutes(),csecond=current_date.getSeconds(),cmill=current_date.getMilliseconds();
		
		// 选中日期
		var syear = this.value.getFullYear(), smonth = this.value.getMonth() + 1, sday = this.value.getDate(),shour=this.value.getHours(),sminute=this.value.getMinutes(),ssecond=this.value.getSeconds(),smill=this.value.getMilliseconds();
		
		this.$top && this.$top.find("td.cell-selected-year").html(this.textYear(syear));
			
		this.$top && this.$top.find("td.cell-selected-month").html(this.textMonth(smonth));
		
		// 绘制日期
		var year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate(),hour=date.getHours(),minute=date.getMinutes(),second=date.getSeconds(),mill=date.getMilliseconds();
		
		// 临时计算参数
		var real_date = new Date(year, month - 1, day,hour,minute,mill), real_year = year, real_month = month, real_day = day,real_hour=hour,real_minute=minute,real_second=second,real_mill=mill;

		var y = m = d = 0,fmt;

		var count = 0, html = [];

		// 补0函数
		var rpad = function(value) {return value > 9 ? value : "0" + value;};

		/** ---------------------------Draw Date View--------------------------- **/
		if (type == 'date') {
				
			fmt=this.getFormat("date");
			
			var selected_str=this.value.formatDate(fmt);
			
			var current_str=current_date.formatDate(fmt);

			var

			// 指定月多少天
			days_in_month = new Date(year, month, 0).getDate(),

			// get the selected month's starting day (from 0 to 6)
			first_day = new Date(year, month - 1, 1).getDay(),

			// 上月显示多少天
			days_in_previous_month = new Date(year, month - 1, 0).getDate(),

			// 下月显示多少天
			days_from_previous_month = first_day - this.firstDayOfWeek;

			// the final value of how many days are there to be shown from the previous month
			days_from_previous_month = days_from_previous_month < 0 ? 7 + days_from_previous_month
					: days_from_previous_month;

			// 显示周
			if (this.showWeek) {
				
				html[count++] = '<tr  class="row-week"><th>'+$.i18n.week+'</th>';
				
				for ( var i = 0; i < 7; i++) 
					html[count++] = '<th>'+$.i18n.days[(this.firstDayOfWeek + i) % 7]+'</th>';
				
				html[count++] = '</tr>';
				
			}
			
			html[count++] = '<tr>';

			// 42单元格
			for (i = 0; i < 42; i++) {

				// 一周7天
				if (i > 0 && i % 7 === 0) {html[count++] = '</tr><tr>';}

				//ISO 8601 周序号
				if (this.showWeek && i % 7 === 0)
					html[count++] = '<td class="cell-week">'+rpad(new Date(year, month - 1, (i- days_from_previous_month + 1)).getWeek(), 2)+'</td>';

				// the number of the day in month
				var day = (i - days_from_previous_month + 1);
				
				real_date = new Date(year, month - 1, day,real_hour,real_minute,real_second,real_mill);

				if (i < days_from_previous_month) {

					// 不显示上一月日期
					if (!this.showOtherMonth) {html[count++] = '<td class="cell cell-date cell-disabled">&nbsp;</td>';continue;}

					//'<td class="cell cell-{value} cell-date{prev}{next}{selected}{disabled}">{value}</td>'
					html[count++]='<td class="cell cell-';
					html[count++]=rpad(days_in_previous_month- days_from_previous_month + i + 1, 2);
					html[count++]=' cell-date cell-prev-month';
					html[count++]=!this.isLegal(real_date,'date') ? ' cell-disabled" >' : '" >';
					html[count++]=rpad(days_in_previous_month- days_from_previous_month + i + 1, 2);
					html[count++]='</td>';

					continue;
				} 
				
				if (day > days_in_month) {

					// 不显示下一月日期
					if (!this.showOtherMonth) {html[count++] = '<td class="cell cell-date cell-disabled">&nbsp;</td>';continue;}

					//'<td class="cell cell-{value} cell-date{prev}{next}{selected}{disabled}">{value}</td>'
					html[count++]='<td class="cell cell-';
					html[count++]=rpad(day - days_in_month, 2);
					html[count++]=' cell-date cell-next-month';
					html[count++]=!this.isLegal(real_date,'date') ? ' cell-disabled" >' : '" >';
					html[count++]=rpad(day - days_in_month, 2);
					html[count++]='</td>';

					continue;
					
				} 

				var real_str=real_date.formatDate(fmt);
				
				//'<td class="cell cell-{value} cell-date{prev}{next}{selected}{disabled}">{value}</td>'
				html[count++]='<td class="cell cell-';
				html[count++]=rpad(day, 2);
				html[count++]=' cell-date';
				html[count++]= current_str==real_str ? ' cell-current' : '';
				html[count++]= real_str==selected_str ? ' cell-selected' : '';
				html[count++]=!this.isLegal(real_date,'date') ? ' cell-disabled" >' : '" >';
				html[count++]=rpad(day, 2);
				html[count++]='</td>';
					
			}

			html[count++] = '</tr>';
			
			$view.html(html.join(""));
			
			return this;
		}

		/** ---------------------------Draw Month View--------------------------- **/
		if (type == 'month') {

			var mod=0;
			
			for ( var i = 0; i < 22; i++) {
				
				mod = i % 4;
				
				mod === 0 ? html[count++] = "<tr>" : false;

				tpl = '<td class="cell cell-{type} cell-{value}{selected}{disabled}" >{text}</td>';

				/** month **/
				if (mod == 0 || mod == 1) {
								
					fmt=this.getFormat("month");
			
					real_date.setFullYear(year);

					m = mod === 0 ? i / 4 + 1 : (i - 1) / 4 + 7;
					
					real_date.setMonth(m - 1);
					
					//'<td class="cell cell-{type} cell-{value}{current}{selected}{disabled}" >{text}</td>';
					html[count++]='<td class="cell cell-month cell-'+rpad(m, 2);
	
					real_date.formatDate(fmt) == current_date.formatDate(fmt) ? html[count++]=' cell-current' : false;
					real_date.formatDate(fmt) == this.value.formatDate(fmt) ? html[count++]=' cell-selected' : false;
	
					html[count++]=!this.isLegal(real_date,"month") ? ' cell-disabled" >' : '" >';
					
					html[count++]=this.textMonth(m);
					html[count++]='</td>';


				} else {
					
					/** year **/
					
					fmt=this.getFormat("year");

					y = i % 2 == 0 ? year - (5 - Math.floor(i / 4)) : year
							+ Math.floor(i / 4);
					
					real_date.setFullYear(y);
					
					//'<td class="cell cell-{type} cell-{value}{current}{selected}{disabled}" >{text}</td>';
					html[count++]='<td class="cell cell-year cell-'+y;
	
					real_date.formatDate(fmt) == current_date.formatDate(fmt) ? html[count++]=' cell-current' : false;
					real_date.formatDate(fmt) == this.value.formatDate(fmt) ? html[count++]=' cell-selected' : false;
	
					html[count++]=!this.isLegal(real_date,"year") ? ' cell-disabled" >' : '" >';
					
					html[count++]=this.textYear(y);
					html[count++]='</td>';
					
				}

				mod === 3 ? html[count++] = "</tr>" : false;

			}

			html[count++] = '<td class="cell cell-prev-10">←</td>';
			html[count++] = '<td class="cell cell-next-10">→</td>';
			html[count++] = "</tr>";

			$view.html(html.join(""));
	
			return this;
		}

		if(type === 'time'){
	
			var allowSecond = this.type==='datetime' || this.type==='time';
			
			var fHour=(real_hour-2+24)%24,fMinute=(real_minute-2+60)%60,fSecond=(real_second-2+60)%60;
			
			html[count++]='<tr><td><span class="icon-time icon-prev-hour"></span></td><td><span class="icon-time icon-prev-minute"></span></td>';
			
			allowSecond ? html[count++]='<td><span class="icon-time icon-prev-second"></span></td>' : false;
			
			html[count++]='</tr>';
			
			for(var i=0;i<5;i++){
				
				html[count++]='<tr class="'+( i==2 ? "row-time" : "")+'">';
				
				// HOUR
				html[count++]='<td class="cell cell-hour cell-';
				
				html[count++]=(fHour+i)%24;
				
				real_date.setHours((fHour+i)%24);
				html[count++]=!this.isLegal(real_date,"datehour") ? ' cell-disabled" >' : '" >';
				
				html[count++]=rpad((fHour+i)%24,2);
				
				i==2 ? html[count++]='<i class="icon-hour"></i>' : false;
				
				html[count++]='</td>';
				
				// MINUTE
				html[count++]='<td class="cell cell-minute cell-';
				
				html[count++]=(fMinute+i)%60;
				
				real_date.setHours(real_hour);
				real_date.setMinutes((fMinute+i)%60);
				html[count++]=!this.isLegal(real_date,"dateminute") ? ' cell-disabled" >' : '" >';
				
				html[count++]=rpad((fMinute+i)%60,2);
				
				i==2 ? html[count++]='<i class="icon-minute"></i>' : false;
				
				html[count++]='</td>';
				
				// SECOND
				if(allowSecond){
					
					html[count++]='<td class="cell cell-second cell-';
					
					html[count++]=(fSecond+i)%60;
					
					real_date.setHours(real_hour);
					real_date.setMinutes(real_minute);
					real_date.setSeconds((fSecond+i)%60);
					html[count++]=!this.isLegal(real_date,"datetime") ? ' cell-disabled" >' : '" >';
					
					html[count++]=rpad((fSecond+i)%60,2);
				
					i==2 ? html[count++]='<i class="icon-second"></i>' : false;
				
					html[count++]='</td>';
				
				}
			
				html[count++]='</tr>';
				
			}
			
			html[count++]='<tr><td><span class="icon-time icon-next-hour"></span></td><td><span class="icon-time icon-next-minute"></span></td>';
			
			allowSecond ? html[count++]='<td><span class="icon-time icon-next-second"></span></td>' : false;
			
			html[count++]='</tr>';
			
			$view.html(html.join(""));
			
			return this;
		}
		
		return this;

	};

	// 日期最大值
	$.datepicker.prototype.setMaxDate=function(maxDate,ignoreRedraw){

		var format=this.getFormat();
		
		this.maxDate = maxDate ? (Date.isDate(maxDate) ? moment(maxDate.formatDate(format),format).toDate() : moment(maxDate,format).toDate()) : false ;
		
		!!ignoreRedraw && this.redraw();
		
		return this;
	};
	
	// 日期最小值
	$.datepicker.prototype.setMinDate=function(minDate,ignoreRedraw){

		var format=this.getFormat();
	
		this.minDate = minDate ? (Date.isDate(minDate) ? moment(minDate.formatDate(format),format).toDate() : moment(minDate,format).toDate()) : false ;

		!!ignoreRedraw && this.redraw();

		return this;
	};
	
	// 正则星期
	$.datepicker.prototype.setDisableDays=function(disableDays,ignoreRedraw){
		
		this.disableDays=disableDays;
	
		!!ignoreRedraw && this.redraw();

		return this;
	};
	
	// 正则禁用
	$.datepicker.prototype.setDisableDates=function(disableDates,ignoreRedraw){
		
		this.disableDates=disableDates;
	
		!!ignoreRedraw && this.redraw();

		return this;
	};	
	
	$.datepicker.prototype.getFormat=function(type){
		
		type= type || this.type;
		
		var formaters={
			datetime:'YYYY-MM-DD HH:mm:ss',
			dateminute:'YYYY-MM-DD HH:mm',
			datehour:'YYYY-MM-DD HH',
		  	date:'YYYY-MM-DD',
		  	month:'YYYY-MM',
		  	year:'YYYY',
		  	time:'HH:mm:ss',
		  	minute:'HH:mm',
		  	hour:'HH'
		};
		
		return formaters[type];

	};
	
	// YYYY-MM-DD hh:mm:ss
	$.datepicker.prototype.isLegal = function(date, type) {
		
		var l = 0,format=this.getFormat(),fmt=this.getFormat(type);
		
		//最大日期
		if (this.maxDate){
			var f=Date.parseDate(this.maxDate.formatDate(fmt),fmt),t=Date.parseDate(date.formatDate(fmt),fmt);
			if(f.getTime() < t.getTime()) {return false;}
		} 

		//最小日期
		if (this.minDate){
			var f=Date.parseDate(this.minDate.formatDate(fmt),fmt),t=Date.parseDate(date.formatDate(fmt),fmt);
			if(f.getTime() > t.getTime()) {return false;}
		}

		// 禁用星期
		if (type === 'date' && (l=this.disableDays && this.disableDays.length || 0)) {
			var day=date.getDay();
			while (l--) 
				if(day == this.disableDays[l]) 
					return false;

		}
		
		// 正则禁用
		if(l = this.disableDates && this.disableDates.length || 0){

			for(var i=0,l=format.length - fmt.length;i<l;i++)
			fmt+=".";

			var date_str=date.formatDate(fmt);
		
			while (l--) 
				if (new RegExp(this.disableDates[l]).test(date_str))
					return false;
		}

		return true;
	};

	$.datepicker.prototype.destroy=function(){
		
		this.off();
		
		this.$element.off(".datepicker").removeData().remove();

		return this;		
	};
	
	$.datepicker.prototype.trigger = function(event) {
		
		var date = this.isLegal(this.value) ? this.value : null;
		
		var params = [ this, date ];
		for ( var i = 1, l = arguments.length; i < l; i++) {
			params[i+1] = arguments[i];
		}

		var type=event.toUpperCase();
		event=new jQuery.Event(type, type+"."+this.widget );
		this.$element.triggerHandler(event, params);
	
		return event;
	};

	$.datepicker.prototype.on = function(event, handler) {
		this.$element.on(event.toUpperCase() + "." + this.widget, handler);
		return this;
	};
	
	$.datepicker.prototype.one = function(event, handler) {
		this.$element.one(event.toUpperCase() + "." + this.widget, handler);
		return this;
	};

	$.datepicker.prototype.off = function(event, handler) {
		this.$element.off(event.toUpperCase() + "." + this.widget, handler);
		return this;
	};

	$.datepicker.prototype.widget = 'datepicker';

	/**
	 * datepicker plugin
	 */
	$.fn.datepicker = function(options) {
	
		var f=null,fields=[];

		for(var i=0,l=this.length;i<l;i++){
				f=$.data(this[i], "widget");
				!f ? (f=new $.datepicker(this.eq(i), $.extend( {}, $.fn.datepicker.defaults, options)),$.data(this[i], "widget", f)) : false;
				fields[i]=f;
		}

		return l===1 ? fields[0] : fields;
	
	};

	/**
	 * Default options for autocomplete plugin
	 */
	$.fn.datepicker.defaults = {
		/** class on input **/
		cls : '',

		width : 200,

		height : false,

		// datetime、dateminute、date、month、time、minute
		type : 'date',

		disableDays : [],

		disableDates : [],

		minDate : false,

		minDate : false,

		showWeek : true,

		showOtherMonth : true,
		
		// 今天按钮
		showToday:false,
		
		// OK按钮
		showOK:false,
		
		// 清空
		showClear:false,

		firstDayOfWeek : 0,

		value : false
	};

	////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////
	///////////////////////////////////////////////////////
	///////////////////////////////////////////////////////
	
	$.datefield = function($element, options) {
		
		var self = this,input = $element[0],value=options.value || input.value,name=options.name || input.name;
		this.$element = (options.cls ? $element : $element.addClass(options.cls)).removeAttr("name");
		input.autocomplete = 'off';;
		input.value='';
		
		// 只读状态
		this._read_only=false;
		!!options.readOnly || $element.prop("readOnly") ? this.readOnly(true) : false;
		
		// 隐藏域
		this.$hidden = $("<input type='hidden' ignoreElement='true' name='"+ name + "' value='' />").appendTo(input.parentNode);
		
		// 日期显示格式
		this.format = options.format || $.datepicker.prototype.getFormat(options.type);
		
		// 日期前后台交互格式
		this.valueFormat = options.valueFormat || this.format;

		this.$list = $("<div class='c-list date-picker' style='display:none;'></div>").appendTo(document.body);				
		
		// 浏览器支持placeholder
		var ph = options.placeholder;
		if (ph) {
			_support_placeholder ? $element.attr("placeholder", ph)
					: this.placeholder = ph;
		} else {
			if (!_support_placeholder) {
				ph = $element.attr("placeholder");
				if (ph) {
					this.placeholder = ph;
					$element.removeAttr("placeholder");
				}
			}
		}
	
		// 初始日期处理
		value= Date.parseDate(value,this.valueFormat) || Date.parseDate(value, this.format) || Date.parseDate(value);
		
		// 参数处理
		var opts = {
			width : 200,
			value : value,
			type : options.type,
			maxDate:options.maxDate,
			minDate:options.minDate,
			showOK:options.showOK,
			showToday:options.showToday,
			showClear:options.showClear,
			disableDays : options.disableDays,
			disableDate : options.disableDates
		};

		var _pick_date = function(event, picker, date,keepVisible) {

			var sf=self;
			
			var text = date && date.formatDate(sf.format) || "";
			
			var value = date && date.formatDate(sf.valueFormat) || "";
			
			sf.$element[0].value = text;
			
			sf.$hidden[0].value = value;
			
			// 保存引用,在失去焦点时有用
			sf._selected_=value;
			
			sf.selectRange(0, text.length);
		
			!keepVisible && (event.type == 'DATEPICK' || event.type == 'TIMEPICK') ? sf.hide() : false;
		
			sf.trigger("select",value);
			
		};

		this.datepicker = this.$list.datepicker(opts).on('datepick', _pick_date).on('monthpick', _pick_date).on('yearpick',_pick_date).on("timepick",_pick_date).on("clear",function(e,p){
			
			//模拟调用
			_pick_date({type:'DATEPICK'},p,null,false);
			
		});

		this.reset(value,true);

		$element.focus(function() {
			
			var sf=self,$this=$(this);
			
			// 只读
			if(sf.isReadOnly()){return true;}

			// 已聚焦
			if($this.hasClass("focus")){return true;}

			$this.removeClass("placeholder").addClass("focus");

			// 有可能需要消除placeholder影响 
			var ph=sf.placeholder;
			ph && this.value === ph ? this.value = '' : sf.selectRange(0, this.value.length);

			// 触发事件
			sf.trigger('focus');
			
			// 下拉DOM已显示
			if(sf.isActive()){return true;}
			
			// 展示下拉DOOM
			sf.show();

		}).blur(function() {

			var sf=self;
			
			// IE7&&8 BUG处理
			if (sf._ignore_blur_) {this.focus();sf.selectRange(0, this.value.length);sf._ignore_blur_ = false;return false;}
			
			if(sf.isReadOnly()){return true;}

			$(this).removeClass("focus");

			var value=this.value,ph=sf.placeholder;
	
			// 如果用户录入非空但不合法字符,那么使用最近一次正确值
			value = ph && value == ph ?  '' : value.replace(/(^\s+)|(\s+$)/g,"");
			value = value == '' ? null : Date.parseDate(value,sf.valueFormat) || Date.parseDate(value) || Date.parseDate(sf._selected_,sf.valueFormat);
	
			sf.value(value);
			
			// 隐藏下拉
			sf.hide();

			// 触发blur事件
			sf.trigger("blur");

			// 校验
			sf.validate();

		}).click(function() {
					
			!self.isReadOnly() && !self.isActive() && self.show();
					
		}).keyup(function(e){
			
			var sf=self;
			
			if(sf.isReadOnly()){return true;}
			
			switch (e.keyCode) {
			
				case 40: // down
					
					!sf.isActive() && sf.show();

					return false;
					
				case 13: // enter
				
					sf.isActive() && sf.datepicker.trigger("datepick");

					return false;

				case 27: // escape
					
					sf.isActive() && sf.hide();
					
					return false;

				default:

					return true;
				}
		});

		// 为表格编辑器做铺垫,必须做判断
		var celleditor=options.celleditor;
		
		this.$list.mousedown(function(e) {
			
			e.preventDefault();

			// @IE6/7/8 even prevent default behavior , blur event triggered also
			self._ignore_blur_ = $.browser.msie && (+$.browser.version) < 9;
			
			// 为表格编辑器做铺垫,必须做判断
			return celleditor ? false : true;
		});
	}

	// 日期下拉是否已经打开
	$.datefield.prototype.isActive = function() {return this.$list[0].style.display === 'block';};

	// 隐藏日期选择框 
	$.datefield.prototype.hide = function() {
		
		if(this.isReadOnly()){return this;}
		
		if(!this.isActive()){return this;}
		
		this.$list[0].style.display = 'none';
		
		// 触发事件
		this.trigger("deactive");
		
		return this;
	}

	// 显示日期选择框
	$.datefield.prototype.show = function() {
	
		if(this.isReadOnly()){return this;}
		
		var isActive=this.isActive();
		
		this.$list[0].style.display='block';
		
		// jquery ui position plugin
		if ($.ui && $.position && $.fn.position) {

			this.$list.position( {
				my : "left top",
				at : "left bottom",
				collision : "flip",
				of : this.$element
			});
			
		} else {

			var bottom = 0, offset = this.$element.offset();
			
			this.$list.css( {
				top : (offset.top + this.$element[0].offsetHeight) + 'px',
				left : offset.left + 'px'
			});

		}
		
		// 触发事件
		!isActive && this.trigger("active");

		return this;

	}

	// MY GOD DOM
	$.datefield.prototype.selectRange = function(start, end) {
		
		var input = this.$element[0];
		
		if (input.setSelectionRange) {
		
			input.focus();
			
			input.setSelectionRange(start, end);
		
		} else if (input.createTextRange) {
			
			var range = input.createTextRange();
			
			range.collapse(true);
			
			range.moveEnd('character', end);
			
			range.moveStart('character', start);
		
			range.select();
		
		}
		
		return this;
	};
	
	// 数据校验
	$.datefield.prototype.validate=function(){
		
		var state=$.validate ? $.validate(this.$element) : true;
		
		return state;
	};
	
	// 日期最大值,如果是字符串,必须和隐藏值域格式一致
	$.datefield.prototype.maxDate=function(maxDate,ignoreRedraw){

		this.datepicker.setMaxDate(maxDate,ignoreRedraw);
		
		return this;
	};
	
	// 日期最小值,如果是字符串,必须和隐藏值域格式一致
	$.datefield.prototype.minDate=function(minDate,ignoreRedraw){

		this.datepicker.setMinDate(minDate,ignoreRedraw);

		return this;
	};
	
	// 正则禁用,如:disableDates:['5$'] 表示禁用以 5 结尾 日期
	$.datefield.prototype.disableDays=function(disableDays,ignoreRedraw){
		
		this.datepicker.setDisableDays(disableDays,ignoreRedraw);

		return this;
	};
	
	// 禁用星期,如:disableDates:[0,4] 表示禁用周四、周日
	$.datefield.prototype.disableDates=function(disableDates,ignoreRedraw){
		
		this.datepicker.setDisableDates(disableDates,ignoreRedraw);

		return this;
	};
	
	// 只读
	$.datefield.prototype.isReadOnly=function(){return this._read_only===true;};

	// 设置只读
	$.datefield.prototype.readOnly = function(readOnly) {
		
		readOnly=!!readOnly;
		
		this._read_only=readOnly;
	
		this.$element[readOnly ? "addClass" : "removeClass"]("readOnly").prop("readOnly",readOnly);
		
		return this;
	};

	// 值处理
	$.datefield.prototype.value = function(value, ignoreRedraw) {
		
		//获值方法
		if (value === undefined) {return this.$hidden[0].value;}

		var oldValue=this.value();
		
		// 解析日期
		var date = Date.parseDate(value,this.valueFormat) ||  Date.parseDate(value);

		// 合法性判定
		date = date && this.datepicker.isLegal(date) ? date : null;

		var newValue=date && date.formatDate(this.valueFormat) || '';
		
		// 保存最新值
		this._selected_=newValue;
		
		// 格式化隐藏值
		this.$hidden[0].value = newValue;

		// 格式化显示文本
		var text = date && date.formatDate(this.format) || '';
		
		this.$element[0].value=text;

		// placeholder样式处理
		var ph=this.placeholder;
		ph && this.$element[(text ? "remove" : "add") + "Class"]("placeholder");
		ph && text==="" ? this.$element[0].value=ph : false; 

		// 触发事件
		oldValue!=newValue && this.trigger("change",newValue,oldValue);
	
		// 触发事件
		oldValue!=newValue && this.trigger("select",newValue);
		
		// 重绘日期下拉
		date && !ignoreRedraw && oldValue!=newValue && this.datepicker.redraw(date);

		return this;
	};

	$.datefield.prototype.reset = function(value,ignoreRedraw) {

		this.value(value,ignoreRedraw);

		this._default_value = this.value();
		
		return this;
	}

	$.datefield.prototype.destroy=function(keep){
		
		this.picker.destroy && this.picker.destroy();
		
		this.$list.off().remove();
		
		this.$element.off(".datefield").removeData();

		if(!!keep){
			
			this.$element.attr("name",this.$hidden[0].name);
			this.$hidden.remove();
			
		}else{
			this.$hidden.remove();
			this.$element.remove();
		}

	};
		
	$.datefield.prototype.trigger = function(event) {
		var params = [ this];
		for ( var i = 1, l = arguments.length; i < l; i++) {
			params[i] = arguments[i];
		}
		
		var type=event.toUpperCase();
		event=new jQuery.Event(type, type+"."+this.widget );
		this.$element.triggerHandler(event, params);
	
		return event;
	};

	$.datefield.prototype.destroy=function(keep){
		
		this.datepicker && this.datepicker.destroy && this.datepicker.destroy();
		
		this.$list.off(".datefield").remove();
		
		this.$element.off(".datefield").removeData();

		this.off();
		
		var name=this.$hidden[0].name;
		
		this.$hidden.remove();
		
		!!keep ? this.$element[0].name=name : this.$element.remove();
		
	};
		
	$.datefield.prototype.on = function(event, handler) {
		this.$element.on(event.toUpperCase() + "." + this.widget, handler);
		return this;
	};
	
	$.datefield.prototype.one = function(event, handler) {
		this.$element.one(event.toUpperCase() + "." + this.widget, handler);
		return this;
	};

	$.datefield.prototype.off = function(event, handler) {
		this.$element.off(((event && event.toUpperCase()) || '') + "." + this.widget, handler);
		return this;
	};

	$.datefield.prototype.widget = 'datefield';

	$.fn.datefield = function(options) {
		
		var f=null,fields=[];

		for(var i=0,l=this.length;i<l;i++){
				f=$.data(this[i], "widget");
				!f ? (f=new $.datefield(this.eq(i), $.extend( {}, $.fn.datefield.defaults, options)),$.data(this[i], "widget", f)) : false;
				fields[i]=f;
		}

		return l===1 ? fields[0] : fields;
	
	};

	$.fn.datefield.defaults = {
		
		// 额外class
		cls : '',

		// 前后台交互属性 
		name : '',

		// 默认值
		value : false,

		// 日期下拉类型:datetime、dateminute、datehour、date、month、time、minute
		type:'date',
		
		// 日期显示格式
		format : false,//'YYYY-MM-DD',

		// 前后台交互格式
		valueFormat : false,// 'YYYY-MM-DD',

		// 日期最大值
		maxDate : false,

		// 日期最小值
		minDate : false,

		// 今天按钮
		showToday:false,
		
		// OK按钮
		showOK:false,
		
		// 清空按钮
		showClear:false,
		
		// 禁用星期
		disableDays : false,

		// 正则禁用日期 
		disableDates : false,

		// 占位文本
		placeholder : '',
		
		// 为表格单元格编辑保留,不要修改
		celleditor:false

	};

})(jQuery);

 

分享到:
评论

相关推荐

    使用jquery-easyui写的简单通用查询

    $("#dateField").my97DatePicker({ width: 200, // 设置宽度 format: "yyyy-MM-dd", // 设置日期格式 isShowClear: true, // 是否显示清除按钮 isShowToday: true // 是否显示今日按钮 }); ``` 在创建通用查询...

    仿DateField的时间组件

    在前端开发中,这类组件可以使用JavaScript库如jQuery UI、React、Vue或Angular等来实现,配合CSS进行样式定制,以适应各种应用场景。 源码分析是理解此类组件的关键,因为它揭示了组件的工作原理。开发者可能需要...

    jquery_validate_(验证控件)详解

    dateField: { date: true } } ``` 6. **dateISO: true** 验证字段是否为 ISO 格式的日期(例如:2009-06-23 或 1998/01/22)。 ```javascript rules: { isoDateField: { dateISO: true } } ``` 7. *...

    项目里 Jquery 日期空间,vilidation,highchars控件

    本文将详细讲解在项目中如何利用Jquery库结合vilidate、laydate和highcharts这三种工具来提升用户体验和数据可视化。 首先,Jquery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和Ajax交互。在标题中...

    jQuery实现的简单日历组件定义与用法示例

    接下来,我们看到一个名为`dateField`的jQuery扩展方法。这个方法用于将日期选择功能附加到页面上的某个元素(例如一个输入框)。`dateField`接受两个参数:`options`和`callback`。`options`是一个对象,用于设置...

    Extjs4.2时间选择插件精确到时分秒

    在使用这个插件之前,确保项目已经引入了jQuery,因为这个插件可能依赖jQuery的一些功能。jQuery是一个广泛使用的JavaScript库,提供了一系列DOM操作、事件处理和动画效果的方法,使得JavaScript编程更加简便。 在...

    marionette.behaviors:Marionette 的行为集合

    木偶行为 Marionette Behaviors 是 Marionette 有用行为的集合。 它不会强迫您拥有所有依赖项,但您有责任在您的项目中拥有... '@ui.dateField': 'datepicker', '@ui.timeField': { timepicker: { format: 'HH:mm'

    可以选择年月日的时间控件

    前端部分,开发者可能会使用JavaScript库如jQuery UI的Datepicker,Bootstrap的DateTimePicker,或者React的Material-UI等,这些库提供了丰富的API和自定义选项,可以根据需求定制显示格式、禁用日期、设置默认值等...

    asp.net 学习系列4

    例如,`&lt;%: Model.DateField.ToString("d") %&gt;`会在视图中以默认的日期格式显示模型中的日期字段。 3. **自定义转换器(ValueConverter)** 当内置的格式化选项不能满足需求时,可以创建自定义的`IValueConverter`...

    gridview 控件中的日期使用

    可以使用jQuery或者其他JavaScript库来修改GridView中特定单元格的文本。 5. **CSS样式**:除了日期格式,我们还可以通过CSS调整日期显示的样式,例如字体、颜色、对齐方式等。在GridView的列定义中,可以添加`...

    ASP.NET实现日期格式大全

    5. **jQuery和Moment.js库**:为了获得更强大的日期和时间处理功能,可以引入jQuery库以及Moment.js,它提供了丰富的日期格式化选项,例如`moment(date).format('YYYY-MM-DD')`。 6. **ASP.NET MVC Razor语法**:在...

    ExtJS教程(深入介绍)

    - **表单及字段组件**:包括FormPanel、Checkbox、ComboBox、DateField、Field、FieldSet、Hidden、HtmlEditor、NumberField、Radio、TextArea、TextField和TimeField等,用于创建和管理用户输入。 EXT JS的文件...

    extjs总结.pdf

    可以通过修改此文件来集成其他库,例如 jQuery,以实现与 EXTJS 的协同工作。 3. **ext-all-bug.js / ext-all.js** - 这两个文件包含了所有EXTJS组件。前者用于开发阶段的调试,后者则用于生产环境。 4. **Ext....

    费用:Django费用记录器

    date = models.DateField() amount = models.DecimalField(max_digits=10, decimal_places=2) category = models.CharField(max_length=50) description = models.TextField() def __str__(self): return f"{...

    testBook:我的第一个 Django 项目

    在本项目"testBook:我的第一个 Django 项目"中,我们将会探讨如何使用 Django 框架构建...同时,项目中的 JavaScript 应用表明前端交互也是一个重要的组成部分,可能涉及到 jQuery、React 或 Vue.js 等库或框架的使用。

    wyvern:Django与PostgreSQL

    你可以使用JavaScript库(如jQuery或React)来增强用户体验,通过Ajax实现异步请求。Django提供了`django.views.decorators.csrf`中的`csrf_exempt`装饰器,以允许不受CSRF保护的API视图,方便前端发送跨域请求。 ...

    经典的GridView72种使用技巧

    - **方法一**:使用JavaScript或jQuery监听`onmouseover`和`onmouseout`事件,然后修改行的CSS类。 - **方法二**:使用CSS伪类`:hover`,这种方法更简洁,适用于支持`:hover`伪类的现代浏览器。 #### 7. GridView...

Global site tag (gtag.js) - Google Analytics