如何讓日曆將輸入文本框中的日期放入HTML中？

我有一個使用HTML和Javascript的Web應用程序。我想創建一個允許用戶輸入關鍵字並提交的文本框。我還希望在文本框旁邊有一個小日曆圖標，以便用戶可以點擊它來彈出日曆以選擇日期作爲關鍵字，然後提交。如何讓日曆將輸入文本框中的日期放入HTML中？

我試圖實現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' 
    }); 
});

可我嘗試怎麼得到這個工作？

來源

2012-01-25 amlane86

對於JS這樣做看看http://www.javascriptkit.com/script/script2/timestamp.shtml

對於JQuery的做看看http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePicker.html

來源

2012-01-25 14:07:23 Ali

添加ID到你的 '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

來源

2012-01-25 14:10:44 kolin

另外基於你得到的DatePicker是未定義的消息，我會按照Swippen的建議做，並檢查你的Javascript腳本的路徑，並且它們都被加載。 – kolin

首先確保所有的javascript都正確加載，並且路徑是正確的。（使用螢火蟲或類似的，看看他們是否已加載所有的JavaScript）。

然後，如果所有似乎都加載正確，您可以在「新DatePicker ..」行使用調試和斷點，並使用立即窗口或等以查看是否存在日期選擇器。

來源

2012-01-25 14:11:56 Swippen

如何讓日曆將輸入文本框中的日期放入HTML中？

回答

相關問題