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

簡易的下拉框,用來滿足用戶以非日曆的形式填寫日期

滿足需求:

  1. 頁面加載時在select寫入數據,月份和日期以當時時間爲準(比如:用戶與2018年5月20日點擊頁面,頁面上兩個select顯示的是5 和 20);
  2. 日期可根據選擇的月份即時發生變化;

html(xdata爲自制樣式,具體樣式需求需自行更改)

<select id="startMon" class="xdata" onchange="changeday(this.value,this.id);"></select>		
<select id="startDay" class="xdata"></select> 
<select id="endMon" class="xdata" onchange="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>');       		
       	}
       }
}
	   }

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章