日期选择器使用所有字段的下拉菜单JavaScript和JQuery W/O日历
Date Picker Using Dropdown Menu for all fields JavaScript and JQuery W/O Calendar
你好,
我正在尝试创建一个日期选择器,其中所有字段(Y M D)都是下拉菜单,所选月份会自动影响可在日期字段中选择的天数。
我不希望以任何方式显示日历。
感谢任何关于该怎么做的建议。
谢谢。
您可以从这里下载并包含jquery日期选择器:-然后在你的页面中包括以下js
(function()
{
// initialise the "Select date" link
$('#date-pick')
.datePicker(
// associate the link with a date picker
{
createButton:false,
startDate:(new Date()).asString(),
endDate:'31/12/2020'
}
).bind(
// when the link is clicked display the date picker
'click',
function()
{
updateSelects($(this).dpGetSelected()[0]);
$(this).dpDisplay();
return false;
}
).bind(
// when a date is selected update the SELECTs
'dateSelected',
function(e, selectedDate, $td, state)
{
updateSelects(selectedDate);
}
).bind(
'dpClosed',
function(e, selected)
{
updateSelects(selected[0]);
}
);
var updateSelects = function (selectedDate)
{
var selectedDate = new Date(selectedDate);
$('#d option[value=' + selectedDate.getDate() + ']').attr('selected', 'selected');
$('#m option[value=' + (selectedDate.getMonth()+1) + ']').attr('selected', 'selected');
$('#y option[value=' + (selectedDate.getFullYear()) + ']').attr('selected', 'selected');
}
// listen for when the selects are changed and update the picker
$('#d, #m, #y')
.bind(
'change',
function()
{
var d = new Date(
$('#y').val(),
$('#m').val()-1,
$('#d').val()
);
$('#date-pick').dpSetSelected(d.asString());
}
);
// default the position of the selects to today
var today = new Date();
updateSelects(today.getTime());
// and update the datePicker to reflect it...
$('#d').trigger('change');
});
通过此操作,您的日期选择器将转换为选择框,其中只有在给定范围内可选择的未来日期。
供参考:http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerIntoSelects.html
这可能会有所帮助。
$(function () {
$("#monthSelect").on("change", function () {
BindDays();
});
$("#yearSelect").on("change", function () {
BindDays();
});
BindDays();
});
function BindDays() {
var month = $("#monthSelect").val();
var dayDropDown = $("#daySelect");
dayDropDown.empty();
if (month == 2) {
for (var i = 1; i <= 28; i++) {
dayDropDown.append("<option value=" + i + ">" + i + "</option>");
}
var year = $("#yearSelect").val();
if (parseInt(year) % 4 == 0) {
dayDropDown.append("<option value='29'>29</option>");
}
}
else if (month == 4 || month == 6 || month == 9 || month == 11) {
for (var i = 1; i <= 30; i++) {
dayDropDown.append("<option value=" + i + ">" + i + "</option>");
}
}
else {
for (var i = 1; i <= 31; i++) {
dayDropDown.append("<option value=" + i + ">" + i + "</option>");
}
}
}
http://jsfiddle.net/zTTQY/
相关文章:
- jQuery/Javascript.toggleClass/.classList.toggle的特殊行为
- 学生搜索项目jquery/javascript
- jQuery/JavaScript在线公文包表单-打印样式表
- 如何在页面加载中使用Jquery/Javascript确定img源
- DataTables合并了两个独立表中的jQuery/Javascript函数
- 在 Jquery/Javascript 中使用多个 OR (||) 运算符时如何设置变量
- 如何在jquery+javascript中只在输入框中输入数字(使用regex)
- 在Jquery/Javascript中的Array中插入Textbox值
- 使用Jquery/Javascript替换CSS属性
- Jquery/Javascript:通过按下按钮显示数组中的随机图像
- 选中复选框的Jquery/Javascript问题使用输入框操作将行从一个表添加到另一个表
- 在for循环中未获取JQuery/JavaScript对象值
- 使用jQuery/Javascript在Facebook上发送消息
- jQuery/Javascript foreach If/Else |如果为空(不执行任何操作)Else(显示forea
- 使用jQuery+Javascript识别一个空文本节点
- jquery/javascript字符串中的撇号
- jQuery/Javascript在内容可编辑的当前段落后插入元素
- 在页面加载时激活jQuery/Javascript函数
- 如何创建php函数或任何脚本/jquery Javascript,使我能够获取与复选框关联的值并添加它们
- Jquery/Javascript使用IF/ELSE语句更改img SRC