Ant Design Vue日期选择器，禁止选择当前之前的时间

a-date-picker时间选择器

Ant Desugn Vue的时间选择器，也遇到了一些问题，就想记录一下，自认为水平不是很高，欢迎批评指正

//标签
<a-date-picker:showToday="false":allowClear="false"@change="setTime"@openChange="openChange":value="Survey.endTime"format="YYYY-MM-DD HH:mm:ss":disabledDate="disabledDate":disabledTime="disabledDateTime":showTime="{ defaultValue: moment('23:59:59', 'HH:mm:ss') }"/>

data() {return {Survey: {},//存放截止时间disabledTime: {hour: '',//存放被ban掉的时minute: ''//存放被ban掉的分}}},

methods: {OpenModel(record) {this.Survey = { ...record, endTime: moment(record.endTime) }//上从别的地方传过来的默认值},setTime(data, datastring) {//若有清除按钮需要加入判断this.resEndtimeDis()this.Survey = { ...this.Survey, endTime: data }let time = data.format('YYYY/MM/DD HH mm').split(' ')//切割存放的年月日，时，分      var date = new Date()//获取当前时间if (moment(time[0]).valueOf() == moment(date.toLocaleDateString()).valueOf()) {//年月日相同增加限制条件this.disabledTime.hour = date.getHours()//ban掉 时if (date.getHours() < time[1]) {//判断选择的是否与当前时间是同一小时，如果不是则不限制分钟this.disabledTime.minute = ''//解除分的禁止} else {this.disabledTime.minute = date.getMinutes()//ban掉 分}} else {//日期不同解除所有限制条件this.resEndtimeDis()}},openChange(status) {if(status){this.setTime(this.Survey.endTime,'')}//上保险，当选择到了不可选择的时间将会默认选中当日0点if (new Date(this.Survey.endTime) <= new Date()) {this.Survey.endTime = moment(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1))}},range(start, end) {const result = []for (let i = start; i < end; i++) {result.push(i)}return result},disabledDate(current) {return current < moment().subtract(0, 'day')//今天之前的年月日不可选，不包括今天},disabledDateTime() {return {disabledHours: () => this.range(0, 24).splice(0, this.disabledTime.hour),//ban小时disabledMinutes: () => this.range(0, this.disabledTime.minute)//ban分}},resEndtimeDis() {//解除限制this.disabledTime = {hour: '',minute: ''}}}

Ant Design Vue日期选择器，禁止选择当前之前的时间相关推荐

html只选择年份,ant design vue 日期选择器只选择年份
mode="year" placeholder="请选择年份" format='YYYY' v-model="form.yearQuarter&quo ...
antd 日期时间选择_antd日期选择器禁止选择当天之前的时间操作
使用disabledDate属性(不可选择的日期) 在js中定义函数并返回 //限制当天之前的日期不可选 disabledDate(current) { return current &&am ...
Ant Design RangePicker 日期选择器不可选择今日或以后的日期, 最多可以选择31天.
首先先看看效果: 效果图: 默认是一直不可选择今日和以后的日期当选择了一个日期后, 将它的可选择区间限制在 31 天内, 并且下次选择时解除限制下面是代码示例, 里面的 props, state, ...
【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
1,首先在vue2项目中安装ant design vue组件 npm install ant-design-vue@1.7.2 2,a-cascader组件在页面中的使用 <template&g ...
vue 日期选择器禁止点击今日之前的日期
vue中日期组件禁止点击今日之前的日期,不包括今日 <div class="block"><span class="demonstration" ...
ant design vue：upload打开选择文件弹框前弹出确认框
看antd文档,刚开始我用得beforeUpload来实现,勉强能完成我想要的功能,但是流程上不完美,需要先选择了文件,才能弹出确认框,但是我的确认框其实跟文件没有关系,我想要先弹确认框再打开文件选择 ...
ant design vue 表格table 默认选择几项getCheckboxProps
首先我们看一下场景在table组件里默认选择第一项,如下图所示: 查看table文档后发现只有getCheckboxProps或许能修改checkbox 文档说是一个函数,然后就写一个方法,有一个默认 ...
ant design vue日期组件怎么清空（a-range-picker，a-date-picker）
a-range-picker <a-range-pickershowTime:placeholder="['开始时间', '结束时间']"format="YYYY- ...
vue+elementUI日期选择器实现选择日期，自动对应周几，并且是包含所选择日期的一周的日期
vue+elementUI日期选择器实现选择日期,自动对应周几之前在公司的项目里面遇到这个问题,如今想起来在这里总结一下,如果有更好的方法,请各位大神多多指教. 在template里面给选择日期的e ...

Ant Design Vue日期选择器，禁止选择当前之前的时间

a-date-picker时间选择器

Ant Design Vue日期选择器，禁止选择当前之前的时间相关推荐

最新文章

热门文章