我想创建一个下拉列表而不是具有日蛾和年份的输入框,当输入今天的日期时必须出现
<style>
form{
border:1px solid black;
width:300px;
padding:5px;
}
.formTitle{
font-weight: bold;
font-size: 20px;
}
</style>
<script>
var listForms = []
function createForm(targetID){
listForms.push(new form(listForms.length));
targetID.appendChild(listForms[listForms.length-1].form);
}
var form = function(formID){
this.form = document.createElement("form")
this.form.id = "form"+formID
this.titleDiv = document.createElement("div")
this.titleDiv.innerHTML = this.form.id
this.titleDiv.setAttribute("class","formTitle")
this.form.appendChild(this.titleDiv)
this.inputboxList = [];
this.inputbox = document.createElement("input")
this.inputbox.type = "date"
this.inputbox.id = this.form.id + "inputbox" + this.inputboxList.length
this.inputboxList.push(this.inputbox)
this.form.appendChild(this.inputbox)
this.buttonList = [];
this.button = new button(this.buttonList.length,this);
this.buttonList.push(this.button.button);
this.form.appendChild(this.buttonList[this.buttonList.length-1])
}
var button = function(buttonID,parent){
var parent = parent
this.button = document.createElement("input")
this.button.type = "button"
this.button.value = "button for " + parent.form.id;
this.button.onclick = function(){
var inputboxBind = parent.inputboxList[parent.inputboxList.length-1]
this.button = new button(parent.buttonList.length,parent);
parent.buttonList.push(this.button.button);
var inputbox = document.createElement("input")
inputbox.type = "date"
inputbox.id = parent.form.id + "inputbox" + parent.inputboxList.length
parent.inputboxList.push(inputbox)
parent.form.appendChild(inputbox)
parent.form.appendChild(parent.buttonList[parent.buttonList.length-1])
alert(inputboxBind.value)
}
}
</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(){
createForm(targetContainer);
}
</script>
我想创建一个下拉列表而不是具有日蛾和年份的输入框,当输入今天的日期时必须出现
答案 0 :(得分: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);
}
&#13;
<div id="selcontainer"></div>
&#13;