2016-07-31 64 views
0

我在下面的代碼中實現了我的html,但看起來像是與某些東西衝突。它自己可以很好地工作,但是當我將它應用到我的html頁面時,我的datepicker無法正常工作:基本上,當我點擊它時,它不會給我下拉菜單供您選擇。 這是我在我的html頁面中應用的代碼。TypeError:無法在jQuery datepicker函數中讀取屬性'setDefaults'

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Datepicker - Default functionality</title> 
    <link rel="stylesheet" 
    href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head> 
<body> 
<div> 
    <form action="jquery.php" method="post"> 
    Date:<input type="text" id="datepicker" name="datepicker" /> 
    </form> 
</div> 
<script> 
    $(function() { 
    $.datepicker.setDefaults($.datepicker.regional[ "" ]); 
    $("#datepicker").datepicker({ 
     onSelect: function (dateText, inst) { 
    $(this).parent('form').submit(); 
     } 
    }); 
    }); 
</script> 
</body> 
</html> 

我試過把jQuery庫放在插件之前>,那什麼都沒做。 這是我在github上的html頁面的鏈接。 https://alohavolha.github.io/selene-hotel/

+0

爲什麼'jquery-ui.css'中有空格...?什麼是'$ .datepicker.setDefaults($ .datepicker.regional [「」]);'應該這樣做? –

+0

當我複製並粘貼並將文本調整爲正確的格式時,我認爲這些空格被意外添加。 setDefaults - 設置默認設置。其他一切IDK。我從發佈類似問題的人那裏複製了這段代碼,但他的代碼工作正常。 @EthanEttleman實際上解決了這個問題。但是謝謝你! – olya

回答

0

當我改變了你的輸入類型約會日期選擇器效果很好,這裏的代碼: <form action="jquery.php" method="post"> Date:<input type="date" id="datepicker" name="datepicker" /> </form>

+0

讓我知道這是否適合您 –

+0

首先,感謝您試圖幫助我在這裏。 好吧,它的工作原理,它不,嘿(我希望我可以屏幕截圖,並顯示它的作用)。 基本上,當我點擊輸入區域時,「mm」顯示,並且我可以使用右側的小箭頭來管理要上下移動的數字。如果我從「mm」點擊更多右側(並且它們僅在點擊該區域時顯示),我會看到「dd」,同樣的事情發生在「yyyy」。但我真正想要發生的是整個下拉日曆菜單。 – olya

+0

快速更新:下拉菜單正常工作,但爲了顯示我必須點擊靠近邊框右側的空白區域。有什麼辦法可以使整個盒子的功能如此嗎?以便菜單顯示一個人是否在包廂內的任何地方點擊?謝謝 – olya

0

呀,抱歉這麼晚纔回復。您可以使用各種樣式使用HTML僞元素來自定義HTML5日期選擇器。

在HTML中,你可以限制最小和最大日期的用戶可以通過選擇:

<input ID="datepicker" type="date" min="2016-07-31" max="2016-08-31"> 

應當指出的是,支持「日期」輸入型所有瀏覽器都將支持最小和最大屬性值被設置,但是當你忘記設置其中一個值時,你的日期選擇器將根據瀏覽器出現錯誤。

至於用CSS添加特定的顏色和樣式,你可以使用下面的輸入類型僞元素。第一個顯示了添加屬性和值的語法應該如何。

::-webkit-datetime-edit {padding: 0.5em;} 
::-webkit-datetime-edit-fields-wrapper 
::-webkit-datetime-edit-text 
::-webkit-datetime-edit-month-field 
::-webkit-datetime-edit-day-field 
::-webkit-datetime-edit-year-field 
::-webkit-inner-spin-button 
::-webkit-calendar-picker-indicator 

如果您有任何問題,請讓我知道。我希望這有幫助!

+0

偉大的,男人!謝謝! – olya

+0

到目前爲止謝謝你!我甚至能夠將其風格化,並使它看起來很體面。我想知道是否有更好的方法來創建開始日期和結束日期。防爆。當您入住酒店時:您選擇您的開始日期和結帳日期。 – olya

-1

另外,我85%的百分比肯定你不能設計下拉部分。每個瀏覽器都有爲日期選擇器設置的默認樣式。移動設備也是如此。每個樣式相應

相關問題