如何设置默认的“选择”选项在三个日期下拉框(年,月和日)在以下场景
How to set default "Select" option in three date dropdowns(for year, month and day) in following scenario?
我在我的网站上使用三个单独的下拉菜单(三个HTML选择控件),目的是获取用户的出生日期。为了让它工作,我使用了一个名为jquery. datelists .min.js的jquery库。我使用 jquery-1.9.1.min.js 和 jquery-ui-1.10.0.custom.min.js 。
现在我的问题是,当页面加载时,日期下拉菜单中选择了当前日期值,月份下拉菜单中选择了当前月份,而年份下拉菜单中选择了包含的年份中的第一年(目前是1914年)。我想将值为"的项"Select"设置为默认选择值。我该如何做到这一点?为了您的参考,我把下面的库代码以及它的HTML实现。
jquery.dateLists.min.js
/*
* jQuery dateDropDowns
*
* url http://www.amdonnelly.co.uk/jquery/date-drop-down-lists
* author Alan Donnelly 2011
* version 1.0.1
* license MIT and GPL licenses
*/
(function(a){a.fn.dateDropDowns=function(k){var g={dateFormat:"dd-mm-yy",monthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],yearStart:"1914",yearEnd:"2000"},k=a.extend(g,k);return this.each(function(){function l(){var c=d.getMonth()+1,p="",f=1;_daysInMonth=m(c,d.getFullYear())+1;a("#"+e+"_list").children().length<_daysInMonth?f=a("#"+e+"_list").children().length+1:a("#"+e+"_list").children().remove();for(_x=f;_x<_daysInMonth;_x++)c=d.getDate()==_x?"selected='true'": "",p+="<option value='"+_x+"' "+c+">"+_x+"</option>";a("#"+e+"_list").append(p)}function m(c,a){var d=31;c==4||c==6||c==9||c==11?d=30:c==2&&(d=a%4==0?29:28);return d}function n(){var c=d.getDate(),a=d.getMonth()+1,f=d.getFullYear(),b=g.dateFormat;b.indexOf("DD")>-1&&c.toString().length<2&&(c="0"+c);b.indexOf("MM")>-1&&a.toString().length<2&&(a="0"+a);b=g.dateFormat.toLowerCase();b=b.replace("dd",c);b=b.replace("mm",a);b=b.replace("yy",f);j.val(b)}var j=a(this);j.html();var b=j.attr("id")+"_dateLists", e=b+"_day",h=b+"_month",i=b+"_year",k=j.val(),d=new Date,o=g.dateFormat.indexOf("/")>-1?"/":"-";(function(){if(k.length>0){var a=g.dateFormat.split(o),b=k.split(o),f=new Date;for(_x=0;_x<b.length;_x++)a[_x].toLowerCase().indexOf("d")>-1?f.setDate(b[_x]):a[_x].toLowerCase().indexOf("m")>-1?f.setMonth(b[_x]-1):a[_x].toLowerCase().indexOf("y")>-1&&f.setYear(b[_x]);d=f}})();(function(){var c=g.dateFormat.split(o),d=j;j.replaceWith("<div id='"+b+"' class='dateLists_container'></div>");for(_x=0;_x<c.length;_x++)c[_x].toLowerCase().indexOf("d")> -1?(a("#"+b).append("<div id='"+e+"' class='day_container'>"),a("#"+e).append("<select id='"+e+"_list' name='"+e+"_list' class='list'></select>"),a("#"+b).append("</div>")):c[_x].toLowerCase().indexOf("m")>-1?(a("#"+b).append("<div id='"+h+"' class='month_container'>"),a("#"+h).append("<select id='"+h+"_list' name='"+h+"_list' class='list'></select>"),a("#"+b).append("</div>")):c[_x].toLowerCase().indexOf("y")>-1&&(a("#"+b).append("<div id='"+i+"' class='year_container'>"),a("#"+i).append("<select id='"+ i+"_list' name='"+i+"_list' class='list'></select>"),a("#"+b).append("</div>"));a("#"+b).append(d);j.hide()})();l();(function(){a("#"+h+"_list").children().remove();for(_x=0;_x<12;_x++){var c=d.getMonth()==_x?"selected='true'":"";a("#"+h+"_list").append("<option value='"+_x+"' "+c+">"+g.monthNames[_x]+"</option>")}})();(function(){a("#"+i+"_list").children().remove();for(_x=parseInt(g.yearStart);_x<parseInt(g.yearEnd)+1;_x++){var c=d.getFullYear()==_x?"selected='true'":"";a("#"+i+"_list").append("<option value='"+ _x+"' "+c+">"+_x+"</option>")}})();(function(){a("#"+e+"_list").change(function(){d.setDate(a("#"+e+"_list").val());n()});a("#"+h+"_list").change(function(){var c=parseInt(a("#"+h+"_list").val()),b=d.getDate();_daysInMonth=m(c+1,d.getFullYear());b>_daysInMonth&&(b=_daysInMonth);d=new Date(d.getFullYear(),c,b,0,0,0,0);l();n()});a("#"+i+"_list").change(function(){var b=a("#"+i+"_list").val(),e=d.getDate(),f=d.getMonth();_daysInMonth=m(f+1,b);e>_daysInMonth&&(e=_daysInMonth);d=new Date(b,f,e,0,0,0,0); l();n()})})()})}})(jQuery);
实现如下(上面所说的所有必要的jQuery库都包括在内)
<script language="javascript">
/*The jQuery code to work the functionality*/
$().ready(function() {
$('#dob').dateDropDowns({dateFormat:'yy-mm-dd'});
});
</script>
<style type="text/css">
.dateLists_container {
}
.dateLists_container .list {
float:left;
}
.dateLists_container .day_container {
}
.dateLists_container .day_container .list {
margin-right:10px;
}
.dateLists_container .month_container {
}
.dateLists_container .month_container .list {
margin-right:10px;
margin-left:10px;
}
.dateLists_container .year_container{
}
.dateLists_container .year_container .list{
}
</style>
<div class="col-xs-6">
<label for="name" class="col-lg-6">Date of Birth<span style="color:#FF0000">*</span></label>
<div class="col-lg-6">
<input class="form-control date_control" type="text" name="dob" id="dob" value="">
</div>
</div>
如果您想查看功能演示,可以在以下URL查看:
http://www.amdonnelly.co.uk/jquery/date-drop-down-lists
有人能在这方面帮助我吗?
我想你要找的是这样的东西:
$('#listid').prepend("<option>Select</option>");
$('#listid').prop("selected", true);
这将在列表的开头添加一个新选项并选择它,但它会破坏插件。
如果你还在尝试使用它,我找出旧的源代码并上传https://github.com/amdonnelly/jQuery-Date-List-Plugin
如果我有时间,我会尝试添加一个默认消息选项。
$("#sub2sub").append("<option value='0'>--Select--</option>");
var drop = $("#sub2cate");
drop[0].selectedIndex = 0;
<tr>
<td>
<select id="sub2sub" style="width: 144px;">
</select>
</td>
</tr>
你需要使用Javascript来获取当前日期,并在页面加载时将其设置为选项值,并使它们在option中为'selected'。
试试这个
var current_date = new Date();
var dd = current_date.getDate(); // day
var MM = current_date.getMonth(); // month
var yyyy = current_date.getFullYear(); //year
相关文章:
- jquerydatetimepicker日期和时间应在框默认值中,而无需单击框
- jquery日期选择器年份范围默认值
- jQuery Datepicker从日期开始设置默认值
- 使用默认js函数的javascript中的日期的第二天
- 默认情况下,引导日期时间选取器当前日期和当前时间
- 使用 javascript 在页面加载时设置默认引导日期和日期时间值
- 如何通过javascript为输入类型日期分配默认值
- 从日期选择器中获取默认格式的日期,并在jquery UI中转换为其他格式
- Bootstrap 3 Datepicker v4-设置默认日期
- d3.js中日期的默认表示形式是什么
- 如何使用日期选择器将默认日期设置为从当前日期起两天
- 如何在页面加载时将当前时间和日期的格式设置为默认格式
- 使用angularJS设置HTML5日期输入字段的默认值
- 具有默认运行日期值的动态生成的日期选取器
- UIWebView - 以编程方式设置默认日期
- 如何在引导日期输入中使今天的日期默认值
- 如何在附有日期选择器的文本框中设置默认日期(以这种格式“dd/mm/yy”)
- 在文本框中输入值时,它会自动采用完整日期默认的角度 JS
- 离子输入日期默认设置为今天
- 移动浏览器上的 HTML5 输入日期默认值行为