我正在尝试使用Materialize创建一个datepicker。 根据{{3}},当用户选择日期时,日期选择器应该关闭。
这在我的页面中无效。我在Windows上使用最新的Chrome浏览器。我已经尝试过IE浏览器,但是整个日期选择器没有显示...
documentation(输入3和4是日期选择器)
我的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()
});
有人可以帮我修理这些日期选择器吗?
答案 0 :(得分:18)
请在代码中添加以下几行..
onSet: function (ele) {
if(ele.select){
this.close();
}
}
答案 1 :(得分:3)
var datePicker = $('.datepicker').pickadate({
onSet: function () {
this.close();
}
});
答案 2 :(得分:2)
如果根据此问题没有关闭,那么物化的开发者会认为它会与Google的日期选择器匹配:
https://github.com/Dogfalo/materialize/issues/870
但是,如果您不介意,可以更改具体化的源代码,如下所示:
https://github.com/Dogfalo/materialize/commit/db0629d30a9d3e5ac06a019955a8e10062f91833
答案 3 :(得分:2)
更好的解决方案:使用if ( 'select' in arg )
条件,以便在选择月份或年份时,日期选择器对话框不会隐藏。
$('.datepicker').pickadate({
onSet: function( arg ){
if ( 'select' in arg ){ //prevent closing on selecting month/year
this.close();
}
}
});
答案 4 :(得分:1)
我有同样的问题,我这样解决了:
$('.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>
onSet:函数(设置日期时调用)确保输入日期,月份和年份,并且仅在设置日期时关闭。
onOpen:函数(在datepicker打开时调用)在再次打开datepicker时清除输入,在用户输入错误日期时很有用..不使用此函数,datepicker无法导航不同的月份,年份没有闭..
希望这能解决你的问题。
答案 5 :(得分:0)
如果&#34; closeOnSelect:true&#34;如果你没有工作,你可以调用关闭按钮的点击事件
输入元素的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();
});
});
希望这能解决您的问题。
答案 6 :(得分:0)
在materializecss 1.0.0上测试:使用 onSelect 回调
$('.datepicker').datepicker({
autoClose: true,
today: 'Today',
clear: 'Clear',
close: 'Close',
format: 'dd/mm/yyyy',
//perform click event on done button
onSelect: function () {
$('.confirmation-btns .datepicker-done').click();
}
});