/*
* jQuery Date Selector Plugin
* 日期联动选择插件
*
* Demo:
$("#calendar").DateSelector({
ctlYearId: <年控件id>,
ctlMonthId: <月控件id>,
ctlDayId: <日控件id>,
defYear: <默认年>,
defMonth: <默认月>,
defDay: <默认日>,
minYear: <最小年|默认为1882年>,
maxYear: <最大年|默认为本年>
});
HTML:<div id="calendar"><SELECT id=idYear></SELECT>年 <SELECT id=idMonth></SELECT>月 <SELECT id=idDay></SELECT>日</div>
*/
(function ($) {
//SELECT控件设置函数
function setSelectControl(oSelect, iStart, iLength, iIndex) {
oSelect.empty();
for (var i = 0; i < iLength; i++) {
if ((parseInt(iStart) + i) == iIndex)
oSelect.append("<option selected='selected' value='" + (parseInt(iStart) + i) + "'>" + (parseInt(iStart) + i) + "</option>");
else
oSelect.append("<option value='" + (parseInt(iStart) + i) + "'>" + (parseInt(iStart) + i) + "</option>");
}
}
$.fn.DateSelector = function (options) {
options = options || {};
//初始化
this._options = {
ctlYearId: null,
ctlMonthId: null,
ctlDayId: null,
defYear: 0,
defMonth: 0,
defDay: 0,
minYear: 1882,
maxYear: new Date().getFullYear()
}
for (var property in options) {
this._options[property] = options[property];
}
this.yearValueId = $("#" + this._options.ctlYearId);
this.monthValueId = $("#" + this._options.ctlMonthId);
this.dayValueId = $("#" + this._options.ctlDayId);
var dt = new Date(),
iMonth = parseInt(this.monthValueId.attr("data") || this._options.defMonth),
iDay = parseInt(this.dayValueId.attr("data") || this._options.defDay),
iMinYear = parseInt(this._options.minYear),
iMaxYear = parseInt(this._options.maxYear);
this.Year = parseInt(this.yearValueId.attr("data") || this._options.defYear) || dt.getFullYear();
this.Month = 1 <= iMonth && iMonth <= 12 ? iMonth : dt.getMonth() + 1;
this.Day = iDay > 0 ? iDay : dt.getDate();
this.minYear = iMinYear && iMinYear < this.Year ? iMinYear : this.Year;
this.maxYear = iMaxYear && iMaxYear > this.Year ? iMaxYear : this.Year;
//初始化控件
//设置年
setSelectControl(this.yearValueId, this.minYear, this.maxYear - this.minYear + 1, this.Year);
//设置月
setSelectControl(this.monthValueId, 1, 12, this.Month);
//设置日
var daysInMonth = new Date(this.Year, this.Month, 0).getDate(); //获取指定年月的当月天数[new Date(year, month, 0).getDate()]
if (this.Day > daysInMonth) { this.Day = daysInMonth; };
setSelectControl(this.dayValueId, 1, daysInMonth, this.Day);
var oThis = this;
//绑定控件事件
this.yearValueId.change(function () {
oThis.Year = $(this).val();
setSelectControl(oThis.monthValueId, 1, 12, oThis.Month);
oThis.monthValueId.change();
});
this.monthValueId.change(function () {
oThis.Month = $(this).val();
var daysInMonth = new Date(oThis.Year, oThis.Month, 0).getDate();
if (oThis.Day > daysInMonth) { oThis.Day = daysInMonth; };
setSelectControl(oThis.dayValueId, 1, daysInMonth, oThis.Day);
});
this.dayValueId.change(function () {
oThis.Day = $(this).val();
});
}
})(jQuery);
demo.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>jQuery 多级联动下拉菜单</title>
</head>
<body>
<div id="dateSelector">
<select id="idYear" name="idYear" data=""></select>年 <select id="idMonth" name="idMonth" data="12"></select>月 <select id="idDay" name="idDay" data="1"></select>日
</div>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="date.js"></script>
<script>
$(function(){
var myDate = new Date();
$("#dateSelector").DateSelector({
ctlYearId: 'idYear',
ctlMonthId: 'idMonth',
ctlDayId: 'idDay',
defYear: myDate.getFullYear(),
defMonth: (myDate.getMonth()+1),
defDay: myDate.getDate(),
minYear: 1800,
maxYear: (myDate.getFullYear()+1)
});
});
</script>
</body>
</html>
效果图：
相关推荐
"jq 日期控件 可选择时间，日期，星期等等" 是一个专为JavaScript（js）环境设计的日期选择插件，它提供丰富的功能，让用户能够方便地选择日期、时间甚至是星期。下面我们将深入探讨这个主题。 首先，`jq`通常指的...
"jQuery年月日三级联动(生日)插件"就是为了简化这一过程而设计的，它使得用户能更直观、高效地选择日期，提高了用户体验。这个插件通过将年、月、日分别作为三个下拉菜单，实现联动效果，即用户在选择一个年份后，...
这个“js日期三级联动-滑动选择.rar”压缩包提供了一个解决方案，适用于PC和H5平台，旨在优化用户体验，实现日期选择的三级联动功能。下面我们将详细探讨这个功能的实现原理以及涉及到的相关知识点。 1. **日期选择...
4. **事件监听**：插件提供了丰富的事件接口，如日期改变、区间选择完成等，便于进行联动操作和数据处理。 5. **API控制**：开发者可以通过JavaScript API来初始化、设置或获取日期，实现动态控制。 ### 使用方法 ...
在.NET框架下，结合jQuery和JavaScript技术，可以创建出高效、友好的用户界面，其中“省市联动”和“日期选择”是常见的功能需求，尤其在用户注册页面中尤为重要。这两个功能提高了用户输入的便捷性和准确性，提升了...
时间、日期和颜色选取插件 - **jQuery UI Datepicker**: 功能丰富的日期选择器。 - **jQuery Datepicker plugin**: 简洁的日期选择器。 - **jQuery TimePicker**: 时间选择器。 - **Farbtastic jQuery Color Picker...
【标题】"YMDClass年月日三级联动纯JS封装类精简插件"是一个用于网页表单的日期选择组件，旨在实现用户友好的交互体验。这个插件使用JavaScript编程语言，无需依赖其他库如jQuery，因此在轻量级项目中尤为适用。它...
在网页开发中，用户输入有时需要精确到日期，如填写生日等个人信息时。为了提高用户体验，年、月、日的三级联动选择器被广泛应用。jQuery作为一款轻量级的JavaScript库，提供了丰富的DOM操作和事件处理功能，非常...
总的来说，jQuery提供的这些工具和插件极大地简化了对`<select>`元素的操作，使得在Web应用中实现日期联动和其他动态交互变得轻松。在实际开发中，结合CSS和Ajax，我们可以构建出更加智能和用户友好的界面。
更新日期为2022年2月，意味着数据是最新的，覆盖了中国的所有行政区域。 "城市选择"通常涉及地理信息系统（GIS），但在这里，它更侧重于用户界面的交互。为了实现联动效果，需要在选择每个层级时动态更新下一级别的...
日期选择器是网页应用中常见的一种控件，主要用于用户输入日期或选择日期。基于jQuery的H5移动端日期选择器可以提供直观、易用的用户界面，支持触摸操作，并能根据手机屏幕尺寸进行适配。通常，这样的选择器会包含年...
以上是jQuery插件的一些典型示例，它们覆盖了文件上传、表单验证、选择框处理、表单基础、时间日期选择以及搜索和评级等功能。这些插件极大地扩展了jQuery的功能，让开发者能够快速构建功能丰富的交互式网页应用。
日期选择简易demo,非常方便使用,没有使用插件.完全js,jq代码实现.非常方便,下载过来直接可用! 免积分下载 https://download.lllomh.com/cliect/#/product/J417124329840643
通过这个插件，开发者可以轻松创建适应不同场景的多级选择器，不仅限于常见的下拉菜单，还能扩展到特定的需求，例如时间选择器（可能包括日期、时间和时区的选择），以及地理位置选择器（如省市区三级联动）。...