2016-01-26 45 views
1

我想創建一個下拉列表,而不是有一天蛾和年份以及輸入框輸入框,當輸入的日期今天必須出現下拉列表,而不是有日期

<style> 
 
form{ 
 
\t border:1px solid black; 
 
\t width:300px; 
 
\t padding:5px; 
 
} 
 
.formTitle{ 
 
\t font-weight: bold; 
 
\t font-size: 20px; 
 
} 
 
</style> 
 
<script> 
 
var listForms = [] 
 
function createForm(targetID){ 
 
\t listForms.push(new form(listForms.length)); 
 
\t targetID.appendChild(listForms[listForms.length-1].form); 
 
} 
 

 
var form = function(formID){ 
 
\t this.form = document.createElement("form") 
 
\t this.form.id = "form"+formID 
 
\t this.titleDiv = document.createElement("div") 
 
\t this.titleDiv.innerHTML = this.form.id 
 
\t this.titleDiv.setAttribute("class","formTitle") 
 
\t this.form.appendChild(this.titleDiv) 
 

 
\t this.inputboxList = []; 
 
\t this.inputbox = document.createElement("input") 
 
\t this.inputbox.type = "date" 
 
\t this.inputbox.id = this.form.id + "inputbox" + this.inputboxList.length 
 
\t this.inputboxList.push(this.inputbox) 
 
\t this.form.appendChild(this.inputbox) 
 

 
\t this.buttonList = []; 
 
\t this.button = new button(this.buttonList.length,this); 
 
\t this.buttonList.push(this.button.button); 
 
\t this.form.appendChild(this.buttonList[this.buttonList.length-1]) 
 

 
} 
 

 
var button = function(buttonID,parent){ 
 
\t var parent = parent 
 
\t this.button = document.createElement("input") 
 
\t this.button.type = "button" 
 
\t this.button.value = "button for " + parent.form.id; 
 
\t this.button.onclick = function(){ 
 
\t \t var inputboxBind = parent.inputboxList[parent.inputboxList.length-1] 
 
\t \t this.button = new button(parent.buttonList.length,parent); 
 
\t \t parent.buttonList.push(this.button.button); 
 
\t \t var inputbox = document.createElement("input") 
 
\t \t inputbox.type = "date" 
 
\t \t inputbox.id = parent.form.id + "inputbox" + parent.inputboxList.length 
 
\t \t parent.inputboxList.push(inputbox) 
 
\t \t parent.form.appendChild(inputbox) 
 
\t \t parent.form.appendChild(parent.buttonList[parent.buttonList.length-1]) 
 
\t \t alert(inputboxBind.value) 
 
\t } 
 
} 
 
</script> 
 

 
<input id="btnFormCreator" type="button" value="Create a Form"> 
 
<div id="targetContainer"></div> 
 

 
<script> 
 
var targetContainer = document.getElementById("targetContainer"); 
 
var btnFormCreator = document.getElementById("btnFormCreator"); 
 
btnFormCreator.onclick = function(){ 
 
\t createForm(targetContainer); \t 
 
} 
 
</script>

我想創建一個下拉列表,而不是輸入框,有天蛾和年,今天輸入日期時必須出現

回答

1

試試這個。更改7多少天要

function pad (num) { 
    return String("0"+num).slice(-2); 
} 
var sel = document.createElement("select"); 
sel.id = this.form.id + "select" + this.inputboxList.length 
var d = new Date(), 
    aDay = 24 * 60 * 60 * 1000, 
    nextWeek = d.getTime() + 7 * aDay; 
for (var day, i = d.getTime(); i < nextWeek; i += aDay) { 
    day = new Date(i); 
    var date = day.getFullYear() + "/" + pad(day.getMonth() + 1) + "/" + pad(day.getDate()); 
    sel.options[sel.options.length] = new Option(date,date); 
    if (d.getTime() == i) sel.options[sel.options.length - 1].selected = true; 
} 

它的工作原理是這樣的:

function pad(num) { 
 
    return String("0" + num).slice(-2); 
 
} 
 

 
window.onload = function() { 
 
    var sel = document.createElement("select"); 
 
    sel.id = "select1"; 
 
    var d = new Date(), 
 
    aDay = 24 * 60 * 60 * 1000, 
 
    nextWeek = d.getTime() + 7 * aDay; 
 
    for (var day, i = d.getTime(); i < nextWeek; i += aDay) { 
 
    day = new Date(i); 
 
    var date = day.getFullYear() + "/" + pad(day.getMonth() + 1) + "/" + pad(day.getDate()); 
 
    sel.options[sel.options.length] = new Option(date,date); 
 
    if (d.getTime() == i) sel.options[sel.options.length - 1].selected = true; 
 
    } 
 
    document.getElementById("selcontainer").appendChild(sel); 
 
}
<div id="selcontainer"></div>

相關問題