实现日期选择器范围验证
Materialize datepicker range validation
我在我的应用程序中使用 materialize datepicker selecting 开始和结束日期。在那,我需要允许用户 select 只有 季度 的开始和结束日期(示例:开始日期 - 2016 年 3 月 31 日和结束日期 - 六月30, 2016),否则应显示错误消息。 selection年无限制。
示例:如果用户 select 的开始日期:2015 年 6 月 2 日和结束日期:2015 年 8 月 4 日。在这种情况下,我必须显示一条错误消息。
我已经按照 JSFiddle link 开始尝试这个,但我无法实现。
[JSFiddle][1]
[1]: http://jsfiddle.net/7ujbv2yz/12/
您可以使用 moment startOf
and endOf
to get the start and the end of the quarter. Using toDate()
您可以将 moment 对象转换为 JavaScript 日期并将其传递给 min
和 max
.
要在用户选择日期后执行操作,请使用 onSet
属性。
这是一个活生生的例子:
$('#date1').pickadate({
selectMonths: true,
selectYears: 15,
onSet: function(obj){
var picker2 = $('#date2').pickadate('picker');
if( obj.select ){
var val = moment(obj.select);
picker2.set('min', val.startOf('quarter').toDate());
picker2.set('max', val.endOf('quarter').toDate());
}
if( obj.clear ){
picker2.set('min', false);
picker2.set('max', false);
}
}
});
$('#date2').pickadate({
selectMonths: true,
selectYears: 15,
onSet: function(obj){
var picker1 = $('#date1').pickadate('picker');
if( obj.select ){
var val = moment(obj.select);
picker1.set('min', val.startOf('quarter').toDate());
picker1.set('max', val.endOf('quarter').toDate());
}
if( obj.clear ){
picker1.set('min', false);
picker1.set('max', false);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css" rel="stylesheet"/>
<div class="col m6">
<span style="font-size:18px;font-weight:500;">From Date:</span>
<input type="date" id="date1" name="date1" class="datepicker" style="display:inline-block;width:40%;">
</div>
<div class="col m6">
<span style="font-size:18px;font-weight:500;">To Date:</span>
<input type="date" id="date2" name="date2" class="datepicker" style="display:inline-block;width:40%;">
</div>
我在我的应用程序中使用 materialize datepicker selecting 开始和结束日期。在那,我需要允许用户 select 只有 季度 的开始和结束日期(示例:开始日期 - 2016 年 3 月 31 日和结束日期 - 六月30, 2016),否则应显示错误消息。 selection年无限制。
示例:如果用户 select 的开始日期:2015 年 6 月 2 日和结束日期:2015 年 8 月 4 日。在这种情况下,我必须显示一条错误消息。
我已经按照 JSFiddle link 开始尝试这个,但我无法实现。
[JSFiddle][1]
[1]: http://jsfiddle.net/7ujbv2yz/12/
您可以使用 moment startOf
and endOf
to get the start and the end of the quarter. Using toDate()
您可以将 moment 对象转换为 JavaScript 日期并将其传递给 min
和 max
.
要在用户选择日期后执行操作,请使用 onSet
属性。
这是一个活生生的例子:
$('#date1').pickadate({
selectMonths: true,
selectYears: 15,
onSet: function(obj){
var picker2 = $('#date2').pickadate('picker');
if( obj.select ){
var val = moment(obj.select);
picker2.set('min', val.startOf('quarter').toDate());
picker2.set('max', val.endOf('quarter').toDate());
}
if( obj.clear ){
picker2.set('min', false);
picker2.set('max', false);
}
}
});
$('#date2').pickadate({
selectMonths: true,
selectYears: 15,
onSet: function(obj){
var picker1 = $('#date1').pickadate('picker');
if( obj.select ){
var val = moment(obj.select);
picker1.set('min', val.startOf('quarter').toDate());
picker1.set('max', val.endOf('quarter').toDate());
}
if( obj.clear ){
picker1.set('min', false);
picker1.set('max', false);
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css" rel="stylesheet"/>
<div class="col m6">
<span style="font-size:18px;font-weight:500;">From Date:</span>
<input type="date" id="date1" name="date1" class="datepicker" style="display:inline-block;width:40%;">
</div>
<div class="col m6">
<span style="font-size:18px;font-weight:500;">To Date:</span>
<input type="date" id="date2" name="date2" class="datepicker" style="display:inline-block;width:40%;">
</div>