uni-app picker组件 mode=date 限制日期只可选择今天以前

  <!-- 执行日期 -->
        <picker v-if="item.type === 'date'" mode="date" :value="data.form[item.key]" :end="data.currentdate"
          @change="e => methods.setTime(e, item.key)">
        </picker>

其中的:end = data.currentdate 是本次处理的关键

在data中定义 currentdate,

在methods中定义方法获取当前日期

  // 获取当前日期
  getNowFormatDate(){
	var date = new Date();
	var seperator1 = "-";
	var year = date.getFullYear();
	var month = date.getMonth() + 1;
	var day = date.getDate();
	if (month >= 1 && month <= 9) {
		month = "0" + month;
	}
	if (day >= 0 && day <= 9) {
		day = "0" + day;
	}
	var currentdate = year + seperator1 + month + seperator1 + day;
	return currentdate;
  },

 并在初始化的时候调用改方法,将其方法等于currentdate即可生效

  data.currentdate =methods.getNowFormatDate();		

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uni-datetime-picker 是基于uni-app框架开发的一个日期时间选择组件。它可以用于在移动端和小程序中选择日期和时间。 使用 uni-datetime-picker 需要以下步骤: 1. 在需要使用的页面或组件中引入 uni-datetime-picker 组件。 ```html <template> <view> <uni-datetime-picker></uni-datetime-picker> </view> </template> ``` 2. 配置 uni-datetime-picker 的属性。 ```html <template> <view> <uni-datetime-picker :start="startDate" :end="endDate" :default-date="defaultDate" :default-time="defaultTime" mode="datetime" @confirm="onConfirm" ></uni-datetime-picker> </view> </template> <script> export default { data() { return { startDate: '2022-01-01 00:00:00', endDate: '2022-12-31 23:59:59', defaultDate: '2022-06-01', defaultTime: '12:00', }; }, methods: { onConfirm(e) { console.log('选择日期时间:', e.detail.value); }, }, }; </script> ``` 在上面的代码中,我们通过配置 `start` 和 `end` 属性指定了可选的日期时间范围,通过 `defaultDate` 和 `defaultTime` 属性指定了默认选中的日期和时间,通过 `mode` 属性指定了选择器的模式(这里是 `datetime` 模式),通过 `confirm` 事件来监听用户确认选择日期时间。 3. 根据需要对 uni-datetime-picker 进行样式调整。 你可以自定义 uni-datetime-picker 的样式,例如修改背景颜色、文字颜色等。通过修改组件的 `class` 和 `style` 属性来实现。例如: ```html <uni-datetime-picker class="my-datetime-picker" style="background-color: #f2f2f2;"></uni-datetime-picker> ``` 在上面的代码中,我们通过给 uni-datetime-picker 组件添加了 `my-datetime-picker` 类,并设置了背景颜色为灰色。 以上就是使用 uni-datetime-picker 的基本步骤和示例代码。你可以根据自己的实际需求进行配置和样式调整。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值