elementUI 周选择器将选择后时间展示修改为yyyy-MM-dd ~ yyyy-MM-dd的格式

elementUI的周选择器只支持format不支持value-format,而其并不支持直接展示yyyy-MM-dd ~ yyyy-MM-dd的格式,但我们可以通过change事件来修改input中显示的值。

  • 给 el-date-picker 元素添加@change监听事件,以及id
<el-form-item label="日期">
    <el-date-picker v-model="dateValue" type="week" @change="handleChange"
                    placeholder="选择日期时间" id="exportDate"
    ></el-date-picker>
</el-form-item>
  • 实际生成的 html 中 id 将被放置在显示值的input中,这个input也就是我们需要修改value的元素

  • change事件方法
handleChange(value) {
    // 这里使用了语义化的时间处理 moment.js,比原生Date操作起来会方便很多
    // 推荐大家使用 http://momentjs.cn/
    let value_moment = moment(value),
        value_start,
        value_end;
    value_start = value_moment.weekday(1).format('YYYY-MM-DD');
    value_end = value_moment.weekday(7).format('YYYY-MM-DD');
    setTimeout(function() {
        document.getElementById('exportDate').value=( value_start + ' ~ ' + value_end);
    },1);
    // 这里使用setTimeout,延迟1毫秒后执行
    // 如果不使用setTimeout,或延迟0秒,input的值将被Element覆盖
}
  • 效果展示

 总结:自己也是这两天才使用elementUI,其功能性和便利性比LayUI有了很大的变化,也能理解LayUI作者停更LayUI让大家去拥抱Vue的想法。

记录一下处理方式,也便于后来的入门同学,欢迎大家提出更好的处理方式。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将支付宝小程序的时间选择改成yyyy-MM-dd hh:mm格式,可以使用以下代码: ```html <view class="picker"> <view class="picker-header">请选择日期和时间</view> <picker mode="datetime" value="{{datetime}}" start="{{nowTime}}" end="{{endTime}}" bindchange="bindDateTimeChange"> <view class="picker-content"> {{datetime}} </view> </picker> </view> ``` 在js文件中定义以下变量: ```javascript data: { datetime: '', nowTime: '', endTime: '' } ``` 在onLoad函数中设置当前时间、结束时间: ```javascript onLoad: function () { var now = new Date(); var year = now.getFullYear(); var month = now.getMonth() + 1; var day = now.getDate(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); this.setData({ nowTime: year + '-' + month + '-' + day + ' ' + hour + ':' + minute, endTime: (year + 1) + '-' + month + '-' + day + ' ' + hour + ':' + minute }) }, ``` 在bindDateTimeChange函数中将时间格式化为yyyy-MM-dd hh:mm格式: ```javascript bindDateTimeChange: function (e) { var datetime = e.detail.value; datetime = datetime.replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '').replace(/(-)/g, '/'); datetime = new Date(datetime).Format('yyyy-MM-dd hh:mm'); this.setData({ datetime: datetime }) }, ``` 可以在utils文件夹下新建一个日期格式化的js文件,定义以下函数: ```javascript Date.prototype.Format = function (fmt) { var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; } ``` 这样就可以将支付宝小程序的时间选择改成yyyy-MM-dd hh:mm格式了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值