datepicker,结束时间必须大于开始时间

$('#js-start-time').datepicker({
    dateFormat:'yy-mm-dd',
    onSelect: function( startDate ) {
        var $startDate = $( "#js-start-time" );
        var $endDate = $('#js-end-time');
        var endDate = $endDate.datepicker( 'getDate' );
        if(endDate < startDate){
            $endDate.datepicker('setDate', startDate - 3600*1000*24);
        }
        $endDate.datepicker( "option", "minDate", startDate );
    }
});
$('#js-end-time').datepicker({
    dateFormat:'yy-mm-dd',
    onSelect: function( endDate ) {
        var $startDate = $( "#js-start-time" );
        var $endDate = $('#js-end-time');
        var startDate = $startDate.datepicker( "getDate" );
        if(endDate < startDate){
            $startDate.datepicker('setDate', startDate + 3600*1000*24);
        }
        $startDate.datepicker( "option", "maxDate", endDate );
    }
});


出处:http://www.cnblogs.com/arliang

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在前端中,可以使用vuejs-datepicker组件来实现结束时间大于等于开始时间的限制。通过设置computed属性来计算开始时间结束时间的范围,然后在模板中使用这些计算属性来限制日期选择。 下面是一个示例代码,演示了如何使用vuejs-datepicker组件来实现前端结束时间大于等于开始时间的限制: ```html <template> <div> <label for="start-date">开始时间:</label> <vuejs-datepicker v-model="startDate" :disabled-dates="disabledStartDates"></vuejs-datepicker> <label for="end-date">结束时间:</label> <vuejs-datepicker v-model="endDate" :disabled-dates="disabledEndDates"></vuejs-datepicker> </div> </template> <script> import moment from 'moment'; import VuejsDatepicker from 'vuejs-datepicker'; export default { components: { VuejsDatepicker }, data() { return { startDate: null, endDate: null }; }, computed: { disabledStartDates() { if (this.endDate) { let date = this.dateFormatter(this.endDate); date = date.split('-'); date[2] = Number(date[2]) + 1; date = date.join('-'); return { from: new Date(date) }; } else { return {}; } }, disabledEndDates() { return { to: new Date(this.startDate) }; } }, methods: { dateFormatter(date) { return moment(date).format('YYYY-MM-DD'); } } }; </script> ``` 在上面的代码中,我们使用了vuejs-datepicker组件来选择开始时间结束时间。通过设置`v-model`指令来绑定选择的日期值到`startDate`和`endDate`变量上。然后,我们使用`computed`属性来计算开始时间结束时间的范围,并将其传递给`disabled-dates`属性,以限制日期选择。 在`disabledStartDates`计算属性中,我们检查结束时间是否存在,如果存在,则将结束时间加一天,并将其设置为开始时间的禁用范围。在`disabledEndDates`计算属性中,我们将开始时间设置为结束时间的禁用范围。 这样,当用户选择开始时间后,结束时间将自动更新为大于等于开始时间的日期范围。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值