-
关于日期选择器使用的是 uniapp 原生组件 picker 只需根据官方文档把 picker 的 type 属性设置为 date 即可
-
日期选择器的基础逻辑问题
-
开始日期不能晚于结束日期
- 毕竟如果开始的时间比结束的日期晚了 就成了都已经过了结束日期了 你还没有开始
- 这种情况在计算机逻辑上不通过
-
结束的日期不能早于开始日期
- 如果结束的比开始的早 就成了典型的还没开始就已经结束了
- 这种情况是在计算机逻辑上不通过的
-
所以开始日期的选择器不能有开始属性 结束日期选择器不能有结束属性 最好是给两个选择器都设置一个默认值
-
如代码展示
-
<picker mode="date" :value="start_date" :end="end_date" @change="bindDateChange"></picker> <picker mode="date" :value="end_date" :start="start_date" @change="bindDateChanges"></picker>
-
-
-
日期选择器 js 逻辑问题
-
需要获取当前日期
- 使用 js 语法
const date = new Date();
来获取当前日期
- 使用 js 语法
-
渲染当前日期
- 使用
v-text
和v-bind
把获取到的日期渲染到需要渲染的地方
- 使用
-
选择器变更日期同步渲染变更的日期
- 如上代码所示 使用
v-on
给选择器绑定一个值改变执行绑定函数的事件
- 如上代码所示 使用
-
代码如下所示
bindDateChange: function(e) { this.start_date = e.target.value }, bindDateChanges: function(e) { this.end_date = e.target.value },
-
注意 每个选择器应有一个独立的触发事件 如共用一个则会导致一个选择器更改日期另一个同步更改
-