elementui限制开始与结束日期天数最多可选择31天

<el-date-picker
  v-model="typeValueTime"
  v-show="datetype == '3'"
  type="datetimerange"
  format="yyyy-MM-dd HH:00:00"
  placeholder="选择日期"
  :picker-options="pickerOptions2"
  align="center"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  :editable="false"
  :clearable="false"
  :default-time="['00:00:00', '23:00:00']"
></el-date-picker>
data(){
    return{
        pickerMinDate:"",
        pickerOptions2:{
            onPick: ({ maxDate, minDate }) => {
                this.pickerMinDate = minDate.getTime();
                if (maxDate) {
                    this.pickerMinDate = '';
                }
            },
            disabledDate:(time)=> {
                if (this.pickerMinDate !== '') {
                    let one = 30 * 24 * 3600 * 1000
                    let minTime = this.pickerMinDate - one
                    let maxTime = this.pickerMinDate + one
                    if(maxTime > new Date()){
                        maxTime = new Date();
                    }
                    return time.getTime() < minTime || time.getTime() > maxTime
                }
                return time.getTime() > Date.now();
            },
            shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                }
             }, {
                text: '最近一个月',
                onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);                                                   
                    picker.$emit('pick', [start, end]);
                }
             }]
        }
    }
}

 

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
以下是一个简单的微信小程序开始日期结束日期数计算的代码示例: wxml文件: ```html <!-- 计算数页面 --> <view class="container"> <view class="form-group"> <view class="label">开始日期:</view> <picker mode="date" value="{{startDate}}" bindchange="startDateChange"> <view class="value">{{startDate}}</view> </picker> </view> <view class="form-group"> <view class="label">结束日期:</view> <picker mode="date" value="{{endDate}}" bindchange="endDateChange"> <view class="value">{{endDate}}</view> </picker> </view> <view class="result">{{dayCount}} </view> </view> ``` js文件: ```javascript Page({ data: { startDate: '', // 开始日期 endDate: '', // 结束日期 dayCount: 0 // 数 }, onLoad: function () {}, startDateChange: function (e) { // 开始日期选择器改变事件处理函数 this.setData({ startDate: e.detail.value }) this.calculateDayCount() }, endDateChange: function (e) { // 结束日期选择器改变事件处理函数 this.setData({ endDate: e.detail.value }) this.calculateDayCount() }, calculateDayCount: function () { // 计算数 const start = new Date(this.data.startDate) const end = new Date(this.data.endDate) const dayCount = (end - start) / (1000 * 60 * 60 * 24) this.setData({ dayCount: dayCount }) } }) ``` wxss文件: ```css .container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20rpx; } .form-group { display: flex; align-items: center; margin-bottom: 20rpx; } .label { font-size: 28rpx; color: #333; margin-right: 20rpx; } .value { font-size: 28rpx; color: #007AFF; } .result { font-size: 32rpx; color: #333; } ``` 在这个示例中,我们使用了两个picker组件来选择开始日期结束日期,分别绑定了startDateChange和endDateChange事件处理函数。在这两个事件处理函数中,我们分别将选择日期更新到页面数据中,并调用calculateDayCount函数计算数。在calculateDayCount函数中,我们使用了JavaScript内置的Date对象,将字符串类型的日期转换成了Date类型的日期进行计算,并将计算出的数更新到页面数据中。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Agwenbi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值