简易的下拉框,用来满足用户以非日历的形式填写日期
满足需求:
- 页面加载时在select写入数据,月份和日期以当时时间为准(比如:用户与2018年5月20日点击页面,页面上两个select显示的是5 和 20);
- 日期可根据选择的月份即时发生变化;
html(xdata为自制样式,具体样式需求需自行更改)
<select id="startMon" class="xdata" οnchange="changeday(this.value,this.id);"></select>
<select id="startDay" class="xdata"></select>
<select id="endMon" class="xdata" οnchange="changeday(this.value,this.id);"></select>
<select id="endDay" class="xdata"></select>
js(页面开始载入时执行)
$(function(){
var mD = new Date().Format("MM-dd-ddyyyy");
for(var i=1;i<13;i++){
$("#startMon").append('<option value="'+i+'"> '+i+'月</option>');
$("#endMon").append('<option value="'+i+'"> '+i+'月</option>');
}
var mmm = mD.getMonth()*1+1;
$("#startMon").val(mD.getMonth()*1+1);
if(mmm==1||mmm==3||mmm==5||mmm==7||mmm==8||mmm==10||mmm==1){
for(var i=1;i<32;i++){
$("#startDay").append('<option value="'+i+'">'+i+'日</option>');
$("#endDay").append('<option value="'+i+'">'+i+'日</option>');
}
}else{ if(mmm==2){
for(var i=1;i<29;i++){
$("#startDay").append('<option value="'+i+'">'+i+'日</option>');
$("#endDay").append('<option value="'+i+'">'+i+'日</option>');
}
if(mD.getFullYear()%4==0){
$("#startDay").append('<option value="29">29日</option>');
$("#endDay").append('<option value="29"> 29日</option>');
}
}else{
for(var i=1;i<31;i++){
$("#startDay").append('<option value="'+i+'"> '+i+'日</option>');
$("#endDay").append('<option value="'+i+'"> '+i+'日</option>');
}
}
}
$("#startDay").val(mD.getDate());
$("#endMon").val(mD.getMonth()*1+1);
$("#endDay").val(mD.getDate());
})
js选择月份自动改变天数select
function changeday(mon,bianid){
var changebian = bianid.substring(0,bianid.indexOf('M'));
$("#"+changebian+"Day").empty();
if(mon==1||mon==3||mon==5||mon==7||mon==8||mon==10||mon==12){
for(var i=1;i<32;i++){
$("#"+changebian+"Day").append('<option value="'+i+'">'+i+'日</option>');
}
}else{
if(mon==2){
for(var i=1;i<29;i++){
$("#"+changebian+"Day").append('<option value="'+i+'">'+i+'日</option>');
}
if(new Date().getFullYear()%4==0){
$("#"+changebian+"Day").append('<option value="29">29日</option>');
}
}else{
for(var i=1;i<31;i++){
$("#"+changebian+"Day").append('<option value="'+i+'"> '+i+'日</option>');
}
}
}
}