我想创建一个下拉框（日月）而不是输入框

I want to create a dropdownbox (day month year) instead of the inputbox. when entered, the selected list will show what date is selected

我想创建一个下拉框(日月),而不是输入框。输入时,所选列表将显示选择的日期

<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 = "text"
	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 = "text"
		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>

I want to create a dropdownbox (day/month/year) instead of the inputbox.

我想创建一个下拉框(日/月/年)而不是输入框。

1 个解决方案

#1

Change this in your code:

在您的代码中更改此内容:

this.inputbox.type = "text"

to this:

this.inputbox.type = "date"

And then add the code to format the date:

然后添加代码来格式化日期:

var mydate = new Date(inputboxBind.value);
alert(mydate.getDate() + "/" + mydate.getMonth() + 1 + "/" + mydate.getFullYear());

Here is the JSFiddle demo

这是JSFiddle演示

HTML5 now supports input type=date, which gives you a drop-down date control rather than a normal textbox.

HTML5现在支持input type = date,它为您提供了一个下拉日期控件而不是普通的文本框。

#1