日期下拉框(只包含月和日)

简易的下拉框,用来满足用户以非日历的形式填写日期

满足需求:

  1. 页面加载时在select写入数据,月份和日期以当时时间为准(比如:用户与2018年5月20日点击页面,页面上两个select显示的是5 和 20);
  2. 日期可根据选择的月份即时发生变化;

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>');       		
       	}
       }
}
	   }

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值