下拉列表而不是具有日期的输入框

时间:2016-01-26 06:18:34

标签: javascript html

我想创建一个下拉列表而不是具有日蛾和年份的输入框,当输入今天的日期时必须出现

<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>

我想创建一个下拉列表而不是具有日蛾和年份的输入框,当输入今天的日期时必须出现

1 个答案:

答案 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;
}

它的工作原理如下:

&#13;
&#13;
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;
&#13;
&#13;