`
ganglong99
  • 浏览: 161380 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

日历日期控件

阅读更多

自己做了一个日历日期控件,说实话,还存在很多问题,不过基本可以用,呵呵,先发出来再慢慢改。

 

目录结构见附件图片。

 

date.js源代码:

var monthArr = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一", "十二");

function $(id) {
	return document.getElementById(id);
}

function showMonthDiv() {
	var monthDiv = $("monthDiv");
	monthDiv.style.display = "block";
}

function closeMonthDiv() {
	var monthDiv = $("monthDiv");
	monthDiv.style.display = "none";
}

function mInuptOnfocus() {
	var month = $("month");
	month.style.border = "solid 1px #38B1B9";
	month.style.background = "#FFFFFF";
	month.style.cursor = "text";
	showMonthDiv();
}

function mInputOnblur() {
	var month = $("month");
	month.style.border = "solid 1px transparent";
	month.style.background = "transparent";
	month.style.cursor = "pointer";
	closeMonthDiv();
}

var backYearTd = "<td onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"backYear()\">←</td>";
var xYearTd = "<td onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"closeYearDiv()\">x</td>";
var forwardYearTd = "<td onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"forwardYear()\">→</td>";
function showYearDiv() {
	var yearDiv = $("yearDiv");
	var year = parseInt($("year").value);
	var html = "<table>";
	for (var i = 0; i < 5; i++) {
		html += "<tr><td colspan=\"3\" onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"selectYear(" + (year+i-2) + ")\">" + (year+i-2) + "</td></tr>";
	}
	html += "<tr>";
	html += backYearTd + xYearTd + forwardYearTd;
	html += "</tr>";
	html += "<table>";
	yearDiv.innerHTML = html;
	yearDiv.style.display = "block";
}

function backYear() {
	var yearDiv = $("yearDiv");
	var year = parseInt((yearDiv.getElementsByTagName("td"))[0].childNodes[0].nodeValue);
	var html = "<table>";
	for (var i = 0; i < 5; i++) {
		html += "<tr><td colspan=\"3\" onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"selectYear(" + (year+i-1) + ")\">" + (year+i-1) + "</td></tr>";
	}
	html += "<tr>";
	html += backYearTd + xYearTd + forwardYearTd;
	html += "</tr>";
	html += "<table>";
	yearDiv.innerHTML = html;
	yearDiv.style.display = "block";
}

function forwardYear() {
	var yearDiv = $("yearDiv");
	var year = parseInt((yearDiv.getElementsByTagName("td"))[0].childNodes[0].nodeValue);
	var html = "<table>";
	for (var i = 0; i < 5; i++) {
		html += "<tr><td colspan=\"3\" onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"selectYear(" + (year+i+1) + ")\">" + (year+i+1) + "</td></tr>";
	}
	html += "<tr>";
	html += backYearTd + xYearTd + forwardYearTd;
	html += "</tr>";
	html += "<table>";
	yearDiv.innerHTML = html;
	yearDiv.style.display = "block";
}

function closeYearDiv() {
	var yearDiv = $("yearDiv");
	yearDiv.style.display = "none";
}

function yInuptOnfocus() {
	var year = $("year");
	year.style.border = "solid 1px #38B1B9";
	year.style.background = "#FFFFFF";
	year.style.cursor = "text";
	showYearDiv();
}

function yInputOnblur() {
	var year = $("year");
	year.style.border = "solid 1px transparent";
	year.style.background = "transparent";
	year.style.cursor = "pointer";
	closeYearDiv();
}


function getDaysInMonth(month,year)  {
	var days;
	if (month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12)  
		days=31;
	else if (month==4 || month==6 || month==9 || month==11) 
		days=30;
	else if (month==2)  {
		if (isLeapYear(year)) { 
			days=29; 
		} else { 
			days=28; 
		}
	}
	return days;
}

function isLeapYear (Year) {
	if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0)) {
		return true;
	} else { 
		return false; 
	}
}

function overdate(obj) {
	obj.style.background = "#B3E6EA";
	obj.style.cursor = "pointer";
}

function outdate(obj) {
	obj.style.background = "#EDFBFB";
}

function displayCalendar(month, year) {
	var dateDiv = $("dateDiv");
	var html = "<table id=\"dateTab\"><tr class=\"day\"><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>";
	month = parseInt(month);
	year = parseInt(year);
	var i = 0;
	var days = getDaysInMonth(month + 1, year);
	var firstOfMonth = new Date(year, month, 1);//创建某年某月的第一天日期对象
	var startingPos = firstOfMonth.getDay();//得到这个月第一天是星期几
	var today = new Date();
	var tDate = today.getDate();
	var tMonth = today.getMonth();
	var tYear = today.getYear();
	days += startingPos;
	html += "<tr class='date'>";
	for (i = 0; i < startingPos; i++) {
		html += "<td>&nbsp</td>";
	}
	var j = 0;
	for (i = startingPos; i < days; i++) {
		j++;
		var date = "";
		if ( i%7 == 0 ) 
			html += "</tr><tr class='date'>";
		if (i - startingPos + 1 < 10)
			date += "0";
		date += i - startingPos + 1;
		if (i%7 == 0 || (i+1)%7 == 0) {// 周六或周日
			if (j == tDate && tMonth == month && tYear == year) 
				// 今天
				html += "<td class='thisDay' onmouseover='overdate(this)' onmouseout='outdate(this)' onmousedown='selectDate(this)'>" + date + "</td>";
			else 
				html += "<td class='weekday' onmouseover='overdate(this)' onmouseout='outdate(this)' onmousedown='selectDate(this)'>" + date + "</td>";
		} else {// 周一至周五
			if (j == tDate && tMonth == month && tYear == year)
				// 今天
				html += "<td class='thisDay' onmouseover='overdate(this)' onmouseout='outdate(this)' onmousedown='selectDate(this)'>" + date + "</td>";
			else
				html += "<td onmouseover='overdate(this)' onmouseout='outdate(this)' onmousedown='selectDate(this)'>" + date + "</td>";
		}
	}
	if (days < 35 && days > 28) {
		for (i = days; i < 35; i++) {
			html += "<td>&nbsp;</td>";
		}
	} else if (days > 35) {
		for (i = days; i < 42; i++) {
			html += "<td>&nbsp;</td>";
		}
	}
	html += "</tr></table>";
	dateDiv.innerHTML = html;
}

function isFourDigitYear(year) {
	if (year.length != 4) {
		alert ("Sorry, the year must be four-digits in length.");
		$("year").select();
		$("year").focus();
		return false;
	} else { 
		return true; 
	}
}

function getMonthIndex(month) {
	for (var i = 0; i < monthArr.length; i++) {
		if (month == monthArr[i]) {
			return i;
		}
	}
	return 0;
}

function setPreviousYear() {
	var year  = $("year").value;
	if (isFourDigitYear(year)) {
		var month = getMonthIndex($("month").value);
		year--;
		$("year").value = year;
		displayCalendar(month, year);
   }
}

function setPreviousMonth() {
	var year  =$("year").value;
	if (isFourDigitYear(year)) {
		var month = getMonthIndex($("month").value);
		if (month == 0) {
			month = 11;
			if (year > 1000) {
				year--;
				$("year").value = year;
			}
		} else { 
			month--; 
		}
		$("month").value = monthArr[month];
		displayCalendar(month, year);
   }
}

function setNextMonth() {
	var year  =$("year").value;
	if (isFourDigitYear(year)) {
		var month = getMonthIndex($("month").value);
		if (month == 11) {
			month = 0;
			year++;
			$("year").value = year;
		} else { 
			month++; 
		}
		$("month").value = monthArr[month];
		displayCalendar(month, year);
   }
}

function setNextYear() {
	var year  =$("year").value;
	if (isFourDigitYear(year)) {
		var month = getMonthIndex($("month").value);
		year++;
		$("year").value = year;
		displayCalendar(month, year);
   }
}

function leftFill(str, digit, char) {
	var string = str.toString();
	var ret = "";
	if (string.length < digit) {
		for (var i = 0; i < digit - string.length; i++) {
			ret += char;
		}
	} else {
		return string;
	}
	ret += string;
	return ret;
}

//设置今天日期
function setToday() {
	var now   = new Date();
	var day   = now.getDate();
	var month = now.getMonth();
	var year  = now.getYear();
	var hour = leftFill(now.getHours(), 2, "0");
	var minute = leftFill(now.getMinutes(), 2, "0");
	var second = leftFill(now.getSeconds(), 2, "0");
	if (year < 2000)    // Y2K Fix, Isaac Powell
		year = year + 1900; 
	$("month").value = monthArr[month];
	$("year").value = year;
	displayCalendar(month, year);
	$("hh").value = hour;
	$("mm").value = minute;
	$("ss").value = second;
}

function selectMonth(month) {
	var year  = $("year").value;
	$("month").value = monthArr[month];
	displayCalendar(month, year);
	closeMonthDiv();
}

function selectYear(year) {
	var month = getMonthIndex($("month").value);
	$("year").value = year;
	displayCalendar(month, year);
	closeYearDiv();
}

var curFocus = null;
function selectInput(obj) {
	curFocus = obj;
	obj.select();
}

function increaseTime() {
	var hh = $("hh");
	if (curFocus == null) {
		return;
	}
	var curValue = parseInt(curFocus.value, 10);
	var value;
	if ((curFocus == hh && curValue < 23) || (curFocus != hh && curValue < 59)) {
		value = curValue + 1;
	} else {
		value = 0;
	}
	curFocus.value = leftFill(value, 2, "0");
	curFocus.focus();
}

function decreaseTime() {
	var hh = $("hh");
	if (curFocus == null) {
		return;
	}
	var curValue = parseInt(curFocus.value, 10);
	var value;
	if (curValue > 0) {
		value = curValue - 1;
	} else {
		 if (curFocus == hh)
			 value = 23;
		 else
			 value = 59;
	}
	curFocus.value = leftFill(value, 2, "0");
	curFocus.focus();
}

function getScriptPath() {
	var elements = document.getElementsByTagName("script");
	for (var i = 0; i < elements.length; i++) {
        if (elements[i].src && elements[i].src.match(/date[\w\-\.]*\.js/) != null) {
            return elements[i].src.substring(0, elements[i].src.lastIndexOf('/') + 1);
        }
    }
	return "";
}

var object = null;
var mainDiv = null;
var scriptPath = getScriptPath();
function DateHandler(obj) {
	closeDate();//确保已存在的日期窗口被关闭,一个页面中同时只能存在一个日期窗口
	object = obj;
	var str = ""
		+ "<div class='WdateDiv'>"
			+ "<div id='dpTitle'>"
				+ "<div style='float:left;margin:2px;width:45px'>"
					+ "<img style='cursor:pointer;' src='" + scriptPath + "images/navLeft.gif' onclick='setPreviousYear()'>"
					+ "<img style='cursor:pointer;' src='" + scriptPath + "images/left.gif' onclick='setPreviousMonth()'>"
				+ "</div>"
				+ "<div style='float:left;margin:2px;'>"
					+ "<div style='width:62px' class='ymsel' id='monthDiv'>"
						+ "<table>";
							for (var i = 0; i < 6; i++) {
								var monthTd1 = "<td onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"selectMonth(" + i + ")\">" + monthArr[i] + "</td>";
								var monthTd2 = "<td onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"selectMonth(" + (i+7) + ")\">" + monthArr[i+7] + "</td>";
								var xTd = "<td onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"closeMonthDiv()\">x</td>";
								str += "<tr>";
								if (i != 5) {
									str += monthTd1 + monthTd2;
								} else {
									str += monthTd1 + xTd;
								}
								str += "</tr>";
							}
						str += "</table>"
					+ "</div>"
					+ "<input id='month' style='margin-top:1px;width:30px;' maxlength='3' onfocus='mInuptOnfocus()' onblur='mInputOnblur()' onkeydown='return false' />"
				+ "</div>"
				+ "<div style='float:left;margin:2px;'>"
					+ "<div class='ymsel' id=\"yearDiv\"></div>"
					+ "<input id=\"year\" style='width:40px;' maxlength=4 onfocus=\"yInuptOnfocus()\" onblur=\"yInputOnblur()\">"
				+ "</div>"
				+ "<div style='float:right;margin:2px;'>"
					+ "<img style='cursor:pointer;' src='" + scriptPath + "images/right.gif' onclick='setNextMonth()'>"
					+ "<img style='cursor:pointer;' src='" + scriptPath + "images/navRight.gif' onclick='setNextYear()'>"
				+ "</div>"
			+ "</div>"
			+ "<div id=\"dateDiv\"></div>"
			+ "<div style='float:left;>"
				+ "<div id='timeDiv' style='float:left;margin-top:3px;text-align:left;'>"
					+ "<table class='timeTab'><tr><td rowspan='2'><span class='time'>时间</span>"
					+ "<span class='timeSpan'><input id='hh' class='time' type='text' value='' size='2' onfocus='selectInput(this)' />:"
					+ "<input id='mm' class='time' type='text' value='' size='2' onfocus='selectInput(this)' />:"
					+ "<input id='ss' class='time' type='text' value='' size='2' onfocus='selectInput(this)' /></span></td>"
					+ "<td><button class='selTimeBtn' onclick='increaseTime()'><img style='cursor:pointer' src='" + scriptPath + "images/timeUp.gif' /></button></td></tr>"
					+ "<tr><td><button class='selTimeBtn' onclick='decreaseTime()'><img style='cursor:pointer;margin-left:1px;' src='" + scriptPath + "images/timeDown.gif' /></button></td></tr></table>"
				+ "</div>"
				+ "<div id=dpButton style='float:right;margin-top:3px;text-align:right;'>"
					+ "<input class=\"bttn\" type=button value=\"今天\" onclick=\"setToday()\" />" 
				+ "</div>"
			+ "</div>"
		+ "</div>";
	if (mainDiv == null) {
		mainDiv = document.createElement("div");
		mainDiv.innerHTML = str;
		var top = object.offsetTop + object.clientTop;
		var left = object.offsetLeft + object.clientLeft;
		var height = object.clientHeight;
		mainDiv.style.position = "absolute";
		mainDiv.style.left = left+7 + "px";
		mainDiv.style.top = top + height+17 + "px";
		document.body.appendChild(mainDiv);
	}
	mainDiv.style.display = "block";
	setToday();
}

function closeDate() {
	if (mainDiv != null) {
		mainDiv.style.display = "none";
		mainDiv.innerHTML = "";
		mainDiv = null;
	}
}

function selectDate(obj) {
	var year = $("year").value;
	var month = getMonthIndex($("month").value) + 1;
	var date = obj.childNodes[0].nodeValue;
	var str = year + "-";
	str += leftFill(month, 2, "0");
	str += "-" + date;
	str += " " + $("hh").value + ":" + $("mm").value + ":" + $("ss").value;
	object.value = str;
	closeDate();
}

 

date.css源代码:

 

.WdateDiv{
	width:190px;
	background-color:#FFFFFF;
	border:#C5E1E4 1px solid;
	padding:2px;
}

.WdateDiv *{font-size:9pt;}

.WdateDiv #dpTitle{
	height:24px;
	border: solid 1px #C5E1E4;
	color:#13777E;
	background:url(images/bg.jpg) repeat #EDFBFB;
	margin-bottom:2px;
}

/* 年份月份选择框 DIV */
.ymsel{
	position:absolute;
	margin-left:0px;
	top:28px;
	background-color:#FFFFFF;
	padding:2px;
	border:#A3C6C8 1px solid;
	display:none;
	text-align:center;
}

#month {
	background:transparent;
	border:solid 1px transparent;
	color:#08575B;
	cursor:pointer;
}

#year {
	background:transparent;
	border:solid 1px transparent;
	color:#08575B;
	cursor:pointer;
}

.bttn {
	background:#CFEBEE;
	border:solid 1px #38B1B9;
	color:#08575B;
	text-align:center;
	padding-top:2px;
}

.timeSpan {
	border:solid 1px #38B1B9;
}

.time {
	color:#085758;
	background:#FFFFFF;
	border:none;
	text-align:center;
}

.timeTab {
	border-collapse:collapse;
	border-spacing:0px;
	border:none;
}

.selTimeBtn {
	background:#FFFFFF;
	border:none;	
	text-align:center;
	height:8px;
}

#dateTab {
	background:#EDFBFB;
	width:100%;
	border-collapse:collapse;
	border:	solid 1px #C5E1E4;
}

.day {
	background:#BDEBEE;
	margin:0px;
	padding:0px;
}

.day td {
	color:#13777E;
	width:14%;
	margin:0px;
	padding:2px;
	text-align:center;
}

.date {
	background:#EDFBFB;
}

.date td {
	color:#13777E;
	margin:0px;
	padding:2px;
	text-align:center;
}

td.weekday {
	color:#CD527B;
}

td.thisDay {
	color:red;
}

.mouseover{
	background:#B3E6EA;
	cursor:pointer;
	color:#13777E;
	text-align:center;
}

.mouseout {
	background:#FFFFFF;
	color:#13777E;
	text-align:center;
}

 

 

images目录下放置了所有使用到的图片.

 

下面是一个使用这个空间的测试页面:

<?xml version="1.0" encoding="GBK" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="./date/date.css"/>
<script type="text/javascript" src="./date/date.js"></script>
</head>
<body>
<input type="text" onfocus="new DateHandler(this)"/>
</body>
</html>

 

 

  • 大小: 9.5 KB
1
1
分享到:
评论

相关推荐

    ext4.2 日历日期控件,可以选择时分秒

    "ext4.2 日历日期控件,可以选择时分秒"是一个专门针对这个需求的组件,它允许用户在网页应用中方便地选择日期、时间和秒数。这个控件是EXTJS库的一个组成部分,EXTJS是一个基于JavaScript的富客户端应用框架,广泛...

    原生js日历日期控件带时分秒日期选择器

    在JavaScript(JS)编程中,创建一个功能完备的日历日期控件,特别是带有时分秒选择功能,是一项常见的需求。这种控件常用于网页表单,让用户能够方便地选取精确到秒的时间点。本篇文章将深入探讨如何使用原生...

    日历控件(jsp+js)

    在IT行业中,日历控件是一种常见的用户界面元素,它允许用户方便地选择日期,常用于事件安排、日期输入等场景。本项目是基于JSP(JavaServer Pages)和JavaScript技术实现的一个日历控件。下面我们将深入探讨这两个...

    wps中excel日期控件下载

    在WPS Office的Excel应用中,日期控件是一种非常实用的功能,它允许用户在工作表中插入一个可交互的日历小部件,以便于选择和输入日期。标题“wps中excel日期控件下载”提示我们要关注如何在WPS Excel中获取和安装这...

    VBA EXCEL制作日历控件

    在EXCEL中,可以通过双击单元格,调出日历控件,通过对日历控件的操作,将所选日期更新到单元格中,该控件代码完全开放免费,供大家学习和使用,感兴趣的同学可以多多关注www.allmlp.com,让我们共同成长共同学习。

    可多选的日期控件

    在IT领域,尤其是在前端开发中,"可多选的日期控件"是一个常见的需求,它允许用户在日历界面中选择多个日期,而非只能选择单个日期。这种控件广泛应用于各种应用程序,如行程规划、会议安排或者数据分析等场景。在本...

    强大的日历控件

    【强大的日历控件】是一种在软件开发中广泛使用的组件,尤其在Web应用程序和桌面应用程序中,它为用户提供了一个直观的界面来选择日期或者进行日期相关的操作。在信息技术领域,日历控件是用户界面(UI)设计的一个...

    日历控件12

    在IT领域,日历控件是一种常见的用户界面元素,它允许用户方便地选择日期或进行日期相关的操作。在“日历控件12”中,我们可能会遇到一系列关于如何集成、自定义以及优化这种控件的知识点。下面将详细介绍这些内容。...

    所有的日期控件,日期时间控件,PowerBuilder

    在IT行业中,日期控件和日期时间控件是软件开发中不可或缺的部分,特别是在构建用户界面时。PowerBuilder作为一款强大的Windows应用程序开发工具,提供了丰富的控件库,包括用于处理日期和时间的控件。这些控件允许...

    介绍一个ActiveX日历控件.ocx

    "ActiveX日历控件.ocx"就是这样一个专门用于显示日期和时间的组件。 日历控件是用户界面设计中的常见元素,它允许用户方便地选择日期,常用于事件预订、任务管理或任何形式的日期输入。在ActiveX框架下,这个`.ocx`...

    提供excel 日历控件9.0下载(工具必须的插件)

    在Excel中,日历控件是一种非常实用的功能,它允许用户通过一个直观的日历界面来选择日期,这对于处理与时间相关的数据尤其有用。标题提到的"提供excel 日历控件9.0下载"指的是为不支持或缺少此功能的Excel版本提供...

    C# 滑动日历选择控件

    在本场景中,我们关注的是一个特定的GUI组件,即“滑动日历选择控件”,它常用于PC和IPC(Industrial Personal Computer,工业个人计算机)上的用户界面,以帮助用户方便地选取日期。这个控件对于需要用户输入日期的...

    powerbuild日历控件的调用示例

    在PowerBuilder(简称PB)开发环境中,日历控件是一种常用的用户界面元素,它允许用户方便地选择日期,常用于日期输入字段。本教程将详细解释如何在PowerBuilder中调用和使用日历控件,以`dateitemfunc.pbl`、`...

    wxpython 设计日历控件.rar

    本项目聚焦于利用wxPython设计一个日历控件,这个控件允许用户选择日期,并能打印所选日期,同时支持月份的翻转。在Python的GUI领域,虽然Tkinter是一个常见的选择,但wxPython因其更接近原生操作系统界面的外观和...

    Qt 自定义 Calendar 日历控件

    8. **国际化和本地化**: 为了支持多语言环境,日历控件需要考虑日期格式、星期的起始日以及节假日等本地化信息。Qt提供了QLocale类来处理这些需求。 9. **性能优化**: 对于大型日历或实时更新的需求,性能优化是...

    js日历DIV控件

    JS日历DIV控件是一种使用JavaScript实现的轻量级日历组件,它通过在页面上动态创建一个可浮动的DIV元素来展示日历,用户可以选择日期并将其值返回到页面上的特定输入元素。 **1. JS基础知识** JavaScript(简称JS...

    组态王应用——日历控件的使用

    微软日历控件“Microsoft Date and Time Picker Control 6.0”是一款强大的日期和时间选择组件,能够以直观的方式展示和选择日期和时间。它支持多种格式,包括但不限于日期、时间和星期显示,为用户提供灵活的选择...

    swift-RCalendarPicker日历控件日历选择控件日历日期选择

    `swift-RCalendarPicker` 是一个专为Swift编程语言设计的日历选择控件,它提供了一个美观且易于使用的界面,使用户能够方便地浏览和选择日期。这个库特别适用于那些需要集成自定义日历功能的iOS应用。 首先,`...

    java日期日历控件

    Java日期日历控件是Java开发中用于显示和选择日期的一种UI组件,它在各种桌面应用和Web应用中都有广泛的应用。在Java中,我们可以使用内置的`java.util.Calendar`类和`java.time`包(Java 8及以上版本)来处理日期和...

    很好用的日历控件,日历、控件

    日历控件通常包含一个可视化的日历布局,用户可以通过它来查看日期、选择日期或者设置特定日期的事件。在本主题中,我们将深入探讨日历控件的设计、功能、实现方式以及其在不同平台的应用。 1. 设计原则:日历控件...

Global site tag (gtag.js) - Google Analytics