Как заставить календарь поставить дату в поле ввода текста в HTML? - PullRequest
Новая
       13

Как заставить календарь поставить дату в поле ввода текста в HTML?

0 голосов
/ 25 января 2012

У меня есть веб-приложение, которое использует HTML и Javascript.Я хочу создать текстовое поле, которое позволяет пользователю ввести ключевое слово и отправить его.Мне также нужен маленький значок календаря рядом с текстовым полем, чтобы пользователь мог щелкнуть по нему, чтобы открыть календарь, выбрать дату в качестве ключевого слова и затем отправить его.

Я пытался реализовать 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'
    });
});

Что я могу попробовать, чтобы это работало?

Ответы [ 3 ]

1 голос
/ 25 января 2012

добавить идентификатор к вашему изображению date_toggler 

<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

0 голосов
/ 25 января 2012

Сначала убедитесь, что все javascript-коды загружены правильно и что пути правильные. (Используйте firebug или аналогичный, чтобы увидеть, загрузили ли они все javascripts).

Тогда, если кажется, что все загружается правильно, вы можете использовать точки отладки и точки останова в строке «new DatePicker ..» и использовать непосредственное окно или другое, чтобы увидеть, существует ли средство выбора даты.

0 голосов
/ 25 января 2012

Для этого в JS взгляните на http://www.javascriptkit.com/script/script2/timestamp.shtml

Для этого в JQuery взгляните на http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePicker.html

...