如何获取日历以将日期放入 HTML 的输入文本框中？答案

【问题标题】：How to get a calender to put date in input textbox in HTML?如何获取日历以将日期放入 HTML 的输入文本框中？
【发布时间】：2012-01-25 13:55:50
【问题描述】：

我有一个使用 HTML 和 Javascript 的 Web 应用程序。我想创建一个允许用户输入关键字并提交的文本框。我还想要文本框旁边的小日历图标，以便用户单击它以弹出日历以选择日期作为关键字，然后提交。

我尝试实现 DatePicker，但无法正常工作。它一直说 DatePicker 未定义。

HTML

<script type="text/javascript" src="js/mootools-core-1.4.3-full-compat.js"></script>

<script src="Source/Locale.en-US.DatePicker.js" type="text/javascript"></script>
<script src="Source/Picker.js" type="text/javascript"></script>
<script src="Source/Picker.Attach.js" type="text/javascript"></script>
<script src="Source/Picker.Date.js" type="text/javascript"></script>

<link href="Source/datepicker_dashboard/datepicker_dashboard.css" rel="stylesheet">

<input name='date_toggled' type='text' value='' class='date date_toggled' style='display: inline' />
<img src='calendar/images/iconCalendar.gif' class='date_toggler' style='position: relative; top: 3px; margin-left: 4px;' />

Javascript

window.addEvent('load', function() {
new DatePicker('.date_toggled', {
        pickerClass: 'datepicker_dashboard',
        allowEmpty: true,
        toggleElements: '.date_toggler'
    });
});

我可以尝试什么来使它正常工作？

【问题讨论】：

标签： javascript html calendar mootools datepicker

【解决方案1】：

为您的“date_toggler”图片添加一个 ID

<img src='calendar/images/iconCalendar.gif' id='my_date_picker' class='date_toggler' style='position: relative; top: 3px; margin-left: 4px;' />

然后脚本..

window.addEvent('load', function() {
    new DatePicker('my_date_picker', {
        pickerClass: 'datepicker_dashboard',
        allowEmpty: true,
        toggleElements: '.date_toggler',
        onSelect: function(date){
            document.id('date_toggled').set('value', date.format('%s');
        }
    }
}

检查https://github.com/arian/mootools-datepicker/blob/master/README.md的文档中的选项和方法

【讨论】：

另外，基于您收到 DatePicker is undefined 消息，我会按照 Swippen 的建议进行操作，并检查您的 Javascript 脚本的路径，并且它们都已被加载。

【解决方案2】：

要在 JS 中执行此操作，请查看 http://www.javascriptkit.com/script/script2/timestamp.shtml

要在 JQuery 中执行此操作，请查看 http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePicker.html

【讨论】：

【解决方案3】：

首先确保所有 javascript 都正确加载并且路径正确。（使用 firebug 或类似工具查看它们是否已加载所有 javascript）。

然后，如果一切似乎都正确加载，您可以在“new DatePicker..”行使用调试和断点，并使用即时窗口等查看日期选择器是否存在。

【讨论】：