我在工作的时候需要一个让用户选择日期的东西,由于要求不高,而且只需要简单的选择年月日时就行了,也就没有用Canledar从中学到一些js的处理知识,这里就把代码贴出来,欢迎大家拍砖.
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function FillYears() {
var date = new Date();
var currYear = date.getFullYear();
for (var i = currYear; i < currYear + 10; i++) { // 这个只能显示未来十年的
selYear.options[selYear.options.length] = new Option(i.toString(), i);
}
}
function FillMonths() {
var date = new Date();
var currYear = date.getFullYear();
var currMonth = date.getMonth() + 1;
// 清除原有月份
for (var i = selMonth.options.length; i > 0; i--) {
selMonth.options.remove(i - 1);
}
var selectedYear = parseInt(selYear.options[selYear.selectedIndex].value);
// 如果选择今年,那么从本月开始显示月份
if (selectedYear == currYear) {
// 添加新的月份
for (var i = currMonth; i <= 12; i++) {
selMonth.options[selMonth.options.length] = new Option(i, i);
}
}
else {
for (var i = 1; i <= 12; i++) {
selMonth.options[selMonth.options.length] = new Option(i, i);
}
}
}
function FillDays() {
var date = new Date();
var currYear = date.getFullYear();
var currMonth = date.getMonth() + 1;
var currDay = date.getDate();
// 清除所有的天
for (var i = selDay.options.length; i > 0; i--) {
selDay.options.remove(i - 1);
}
var selectedYear = parseInt(selYear.options[selYear.selectedIndex].value);
var selectedMonth = parseInt(selMonth.options[selMonth.selectedIndex].value);
if (selectedYear == currYear && selectedMonth == currMonth) {
var tempDate = new Date(currYear, currMonth, 0);
for (var i = currDay; i <= tempDate.getDate(); i++) {
selDay.options[selDay.options.length] = new Option(i, i);
}
}
else {
var tempDate = new Date(selectedYear, selectedMonth, 0);
var days = tempDate.getDate();
for (var i = 1; i <= days; i++) {
selDay.options[selDay.options.length] = new Option(i, i);
}
}
}
function FillHours() {
var date = new Date();
var currYear = date.getFullYear(); // 这个获取的就是今年
var currMonth = date.getMonth() + 1;
var currDay = date.getDate(); // 这个获取的就是今天的日期
var currHour = date.getHours();
for (var i = selHour.options.length; i > 0; i--) {
selHour.options.remove(i - 1);
}
var selectedYear = parseInt(selYear.options[selYear.selectedIndex].value);
var selectedMonth = parseInt(selMonth.options[selMonth.selectedIndex].value);
var selectedDay = parseInt(selDay.options[selDay.selectedIndex].value);
if ((selectedYear == currYear) &&
(selectedMonth == currMonth)
&& (selectedDay == currDay)) {
for (var i = currHour; i <= 24; i++) {
selHour.options[selHour.options.length] = new Option(i, i);
}
} else {
for (var i = 1; i <= 24; i++) {
selHour.options[selHour.options.length] = new Option(i, i);
}
}
}
上面就是填充selYear,selMonth,selDay的源代码.在jQuery的$(document).ready中填充并指定其行为,具体代码如下:
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
$(document).ready(function() {
FillYears();
FillMonths();
FillDays();
FillHours();
selYear.onchange = function() { FillMonths(); FillDays(); FillHours(); };
selMonth.onchange = function() { FillDays(); FillHours(); };
selDay.onchange = function() { FillHours(); };
});
这里面使用到了selYear,selMonth,selDay这三个select.我在下面模拟这个效果一下,但是不再采用在$(document).ready中来填充select而是在button中启用事件的,别告诉我你不知道怎么在button中实现这个效果,其实就是把ready中的东西搬过来.
年 月 日 时