實現日期選擇器SelectOnClose不工作

我正在嘗試使用Materialise創建日期選擇器。根據documentation，日期選取器應在用戶選擇日期時關閉。實現日期選擇器SelectOnClose不工作

這不工作在我的頁面。我在Windows上使用最新的Chrome瀏覽器。我已經試過IE瀏覽器，但有沒有顯示整個日期選擇器...

Click here for my page（輸入3和4 datepickers）

我的javascript：

$('#due_date').pickadate({ 
 
    monthsFull: [ 'januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december' ], 
 
    monthsShort: [ 'jan', 'feb', 'maa', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec' ], 
 
    weekdaysFull: [ 'zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag' ], 
 
    weekdaysShort: [ 'zo', 'ma', 'di', 'wo', 'do', 'vr', 'za' ], 
 
    today: 'vandaag', 
 
    clear: 'verwijderen', 
 
    close: 'sluiten', 
 
    firstDay: 1, 
 
    format: 'dd-mm-yyyy', 
 
    formatSubmit: 'yyyy/mm/dd', 
 
    closeOnSelect: true, 
 
    selectMonths: true, // Creates a dropdown to control month 
 
    selectYears: 3, // Creates a dropdown of 15 years to control year 
 
    min: new Date() 
 
});

任何人都可以幫我解決這些日期選擇器？

來源

2015-04-05 Ilona

我認爲這是因爲開發者改變了它https://github.com/Dogfalo/materialize/commit/db0629d30a9d3e5ac06a019955a8e10062f91833 – 2015-05-07 12:02:28

物質化的開發商認爲，這將符合谷歌的日期選擇器，如果它不根據選擇關閉此問題：

https://github.com/Dogfalo/materialize/issues/870

但是你可以改變的源代碼兌現，如果你不介意，就像這樣：

https://github.com/Dogfalo/materialize/commit/db0629d30a9d3e5ac06a019955a8e10062f91833

來源

2015-05-07 12:08:27

感謝您的提示！ – Dante 2015-10-16 18:32:27

我有同樣的問題，我解決了它這種方式：

$('.datepicker1').pickadate({ 
 
    selectMonths: true, // Creates a dropdown to control month 
 
    selectYears: 15, // Creates a dropdown of 15 years to control year 
 
    min: true, 
 
    onOpen: function() { 
 
     this.clear(); 
 
    }, 
 
    onSet: function() { 
 
     var x,y,year,date,month; 
 
     x = $('.datepicker1').pickadate().val().toString(); 
 
     y = x.split(/[ ,]+/); 
 
     date = y[0]; 
 
     month = y[1]; 
 
     year = y[2]; 
 
     console.log(y[0]+" "+ y[1]+ " "+ y[2]); 
 
     if(date && month && year){ 
 
     this.close(); 
 
     } 
 
    } 
 
    });

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Materialize Datepicker</title> 
 
    
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css"> 
 
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script> 
 
</head> 
 
<body> 
 
    <form class="col s6"> 
 
    <label for="To" >To : </label> 
 
    <input type="date" id="To" class="datepicker1"> 
 
    </form> 
 
    
 
    <script src="site.js"></script> 
 
</body> 
 
</html>

發作：功能（當日期設置調用）保證了日，月和年進入且僅當日期設置關閉。

onOpen：函數（在datepicker打開時調用）在datepicker再次打開時清除輸入，在用戶輸入錯誤日期的情況下很有用。不使用此函數，datepicker不能導航不同的月份，年份沒有關閉..

希望這可以解決您的問題。

來源

2015-06-03 21:20:41

這個解決方案的問題是，只要我點擊日期選擇器上的任何地方，它就會執行並關閉，而不僅僅是當我選擇日期，但當我更改月份或年份時。 – jalagrange 2015-12-29 16:50:43

var datePicker = $('.datepicker').pickadate({ 
    onSet: function() { 
     this.close(); 
    } 
});

來源

2015-12-17 15:02:11

這個解決方案的問題是，只要我點擊日期選擇器上的任何地方，它就會執行並關閉，而不僅僅是當我選擇一個日期，但當我更改月份或年份以及 – jalagrange 2015-12-29 16:50:59

請在下面添加幾行代碼..

onSet: function (ele) { 
    if(ele.select){ 
      this.close(); 
    } 
}

來源

2016-01-13 14:50:47 Kenath

完美工作，謝謝！ – javram 2017-02-10 20:30:53

完美答案，謝謝 – 2017-09-11 10:47:42

更好的解決方案：使用if ('select' in arg)條件，使該日期選擇器對話框不會隱藏，當你選擇一個月或一年。

$('.datepicker').pickadate({ 
    onSet: function(arg){ 
     if ('select' in arg){ //prevent closing on selecting month/year 
      this.close(); 
     } 
    } 
});

來源

2016-08-25 11:09:36

雖然這段代碼可能有助於解決問題，但它並沒有解釋_why_和/或_how_它是如何回答問題的。提供這種附加背景將顯着提高其長期教育價值。請[編輯]您的答案以添加解釋，包括適用的限制和假設。 – 2016-08-25 16:36:56

如果「closeOnSelect：真正的」不那麼工作就可以調用點擊關閉按鈕

HTML代碼輸入元素的事件：

<input type='text' id='purchase_date'/>

的元素

JS代碼：

jQuery(document).ready(function(){ 
    $('#purchase_date').pickadate({format: 'yyyy-mm-dd'}) 
         .on('change', function(){ 
           $(this).next().find('.picker__close').click(); 
         }); 
});

希望這能解決您的問題。

來源

2016-09-11 12:27:57

實現日期選擇器SelectOnClose不工作

回答

相關問題