我有一个
HTML5日期选择器.当我点击日期选择器文本框时打开它.我必须将事件更改为一个图标,但我不知道如何实现这一点.当我点击日历图标时,我必须打开日期选择器.
以下是我的datepicker的HTML代码：
<img src="date.png" alt="Date Picker" id="datepickericon" />
<input name="calendarselect{ContactID}" class="timeselect" type="date" id="calendar">
<script>
document.getElementById("datepickericon").onclick = function(e){
console.log('inside click');
document.getElementById("calendar").style.visibility="visible";
// document.getElementById("calendar").focus();
// You could write code to toggle this
}
点击图标,我必须得到如下图所示的打开的日历视图
解决方法
HTML5< input> type =’date’只适用于
few browsers.另外,作为程序员,您无法控制其外观或任何其他方面(如显示和隐藏)(
Quick FAQs on input type date)
因此,如果您必须这样做,则HTML5< input type ='date'>标签不是一个选项.您必须使用JavaScript中的内容,例如jQuery UI或Bootstrap日期选择器.
老回答
您必须附加事件以点击图标.假设你的HTML看起来像这样：
<img src="date.png" alt="Date Picker" id="datepickericon" />
<input name="calendarselect{ContactID}" class="timeselect" type="date" id="calendar">
您必须检查图标上的onclick事件并显示或隐藏日历.
document.getElementById("datepickericon").onclick = function(e){
document.getElementById("calendar").focus();
// You could write code to toggle this
}
