Question

我有一个使用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'
    });
});

我可以尝试让这个有效吗？

Answer 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

文档中的选项和方法

Answer 2

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

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

Answer 3

首先确保所有javascripts都正确加载并且路径正确。（使用firebug或类似的东西，看看他们是否已经加载了所有的javascripts）。

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

如何获取日历以在HTML中的输入文本框中输入日期？

3 个答案: