mirror of
https://gitee.com/java110/PropertyApp.git
synced 2026-02-23 21:36:39 +08:00
优化日期选择
This commit is contained in:
java110
parent
c2736ed3cf
commit
a78f76a0f3
@ -73,6 +73,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import {queryFeeTypesItems,queryPreMeterWater,saveMeterWater} from '../../api/meter/meter.js'
|
import {queryFeeTypesItems,queryPreMeterWater,saveMeterWater} from '../../api/meter/meter.js'
|
||||||
import dateObj from '../../utils/date.js'
|
import dateObj from '../../utils/date.js'
|
||||||
|
import uniDatetimePicker from '../../components/uni-datetime-picker/uni-datetime-picker.vue'
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -102,6 +103,9 @@
|
|||||||
remark: '',
|
remark: '',
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
components:{
|
||||||
|
uniDatetimePicker
|
||||||
|
},
|
||||||
|
|
||||||
onLoad(){
|
onLoad(){
|
||||||
this.preReadingTime = dateObj.getCurrentDateTime();
|
this.preReadingTime = dateObj.getCurrentDateTime();
|
||||||
|
|||||||
@ -1,6 +0,0 @@
|
|||||||
## 1.0.6（2021-03-18）
|
|
||||||
- 新增 hide-second 属性，时间支持仅选择时、分
|
|
||||||
- 修复 选择跟显示的日期不一样的 bug
|
|
||||||
- 修复 chang事件触发2次的 bug
|
|
||||||
- 修复 分、秒 end 范围错误的 bug
|
|
||||||
- 优化 更好的 nvue 适配
|
|
||||||
@ -1,82 +0,0 @@
|
|||||||
{
|
|
||||||
"id": "uni-datetime-picker",
|
|
||||||
"displayName": "DatetimePicker 日期选择器",
|
|
||||||
"version": "1.0.6",
|
|
||||||
"description": "DatetimePicker 可以同时选择日期和时间的选择器",
|
|
||||||
"keywords": [
|
|
||||||
"DatetimePicker",
|
|
||||||
"uni-ui",
|
|
||||||
"日期时间选择器",
|
|
||||||
"日期时间"
|
|
||||||
],
|
|
||||||
"repository": "https://github.com/dcloudio/uni-ui",
|
|
||||||
"engines": {
|
|
||||||
"HBuilderX": ""
|
|
||||||
},
|
|
||||||
"directories": {
|
|
||||||
"example": "../../temps/example_temps"
|
|
||||||
},
|
|
||||||
"dcloudext": {
|
|
||||||
"category": [
|
|
||||||
"前端组件",
|
|
||||||
"通用组件"
|
|
||||||
],
|
|
||||||
"sale": {
|
|
||||||
"regular": {
|
|
||||||
"price": "0.00"
|
|
||||||
},
|
|
||||||
"sourcecode": {
|
|
||||||
"price": "0.00"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"contact": {
|
|
||||||
"qq": ""
|
|
||||||
},
|
|
||||||
"declaration": {
|
|
||||||
"ads": "无",
|
|
||||||
"data": "无",
|
|
||||||
"permissions": "无"
|
|
||||||
},
|
|
||||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
|
||||||
},
|
|
||||||
"uni_modules": {
|
|
||||||
"dependencies": [],
|
|
||||||
"encrypt": [],
|
|
||||||
"platforms": {
|
|
||||||
"cloud": {
|
|
||||||
"tcb": "y",
|
|
||||||
"aliyun": "y"
|
|
||||||
},
|
|
||||||
"client": {
|
|
||||||
"App": {
|
|
||||||
"app-vue": "y",
|
|
||||||
"app-nvue": "n"
|
|
||||||
},
|
|
||||||
"H5-mobile": {
|
|
||||||
"Safari": "y",
|
|
||||||
"Android Browser": "y",
|
|
||||||
"微信浏览器(Android)": "y",
|
|
||||||
"QQ浏览器(Android)": "y"
|
|
||||||
},
|
|
||||||
"H5-pc": {
|
|
||||||
"Chrome": "y",
|
|
||||||
"IE": "y",
|
|
||||||
"Edge": "y",
|
|
||||||
"Firefox": "y",
|
|
||||||
"Safari": "y"
|
|
||||||
},
|
|
||||||
"小程序": {
|
|
||||||
"微信": "y",
|
|
||||||
"阿里": "y",
|
|
||||||
"百度": "y",
|
|
||||||
"字节跳动": "y",
|
|
||||||
"QQ": "y"
|
|
||||||
},
|
|
||||||
"快应用": {
|
|
||||||
"华为": "u",
|
|
||||||
"联盟": "u"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,61 +0,0 @@
|
|||||||
|
|
||||||
|
|
||||||
## DatetimePicker 时间选择器
|
|
||||||
> 代码块： `uDatetimePicker`
|
|
||||||
|
|
||||||
|
|
||||||
该组件的优势是，支持**时间戳**输入和输出（起始时间、终止时间也支持时间戳），可**同时选择**日期和时间。
|
|
||||||
|
|
||||||
若只是需要单独选择日期和时间，不需要时间戳输入和输出，可使用原生的 picker 组件。
|
|
||||||
|
|
||||||
|
|
||||||
___点击 picker 默认值规则：___
|
|
||||||
|
|
||||||
- 若设置初始值 value, 会显示在 picker 显示框中； 若无初始值 value，则初始值 value 为当前本地时间 Date.now()， 但不会显示在 picker 显示框中
|
|
||||||
- 设置了起始时间 start、终止时间 end，并 start < value < end，初始值为 value， 否则初始值为 start
|
|
||||||
- 只设置了起始时间 start，并 start < value，初始值为 value，否则初始值为 start
|
|
||||||
- 只设置了终止时间 end，并 value < end，初始值为 value，否则初始值为 end
|
|
||||||
- 无起始终止时间，则初始值为 value
|
|
||||||
|
|
||||||
### 安装方式
|
|
||||||
|
|
||||||
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
|
|
||||||
|
|
||||||
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
|
|
||||||
|
|
||||||
### 基本用法
|
|
||||||
|
|
||||||
在 ``template`` 中使用组件
|
|
||||||
|
|
||||||
```html
|
|
||||||
<uni-datetime-picker></uni-datetime-picker>
|
|
||||||
<uni-datetime-picker v-model="vModelDatetime" start="2010-6-10 08:30:30" end="2021-6-10 08:30:30"></uni-datetime-picker>
|
|
||||||
<uni-datetime-picker :value="timestamp" return-type="timestamp" start="1276129830000" end="1623285030000" @change="timestampChange"></uni-datetime-picker>
|
|
||||||
<uni-datetime-picker type="date" :value="date" start="2020-6-15" end="2025-6-15" @change="dateChange"></uni-datetime-picker>
|
|
||||||
<uni-datetime-picker type="time" :value="time" start="06:30:30" end="12:30:30" @change="timeChange"></uni-datetime-picker>
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### DatetimePicker Props
|
|
||||||
|
|
||||||
|属性名 |类型 |默认值 |值域 |说明 |
|
|
||||||
|:-: |:-: |:-: | |:-: |
|
|
||||||
|type |String |datetime |datetime、date、time |选择器类型 |
|
|
||||||
|value |String、Number |- |- |输入框当前值 |
|
|
||||||
|start |String、Number |- |- |最小值，可以使用日期的字符串（String）、时间戳（Number） |
|
|
||||||
|end |String、Number |- |- |最大值，可以使用日期的字符串（String）、时间戳（Number） |
|
|
||||||
|return-type|String |timestamp|timestamp 、string |返回值格式 |
|
|
||||||
|border |Boolean、String|true | |是否有边框 |
|
|
||||||
|hide-second|Boolean、String|false | |是否隐藏秒 |
|
|
||||||
|disabled |Boolean、String|false | |是否不可选择 |
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
注：如 type 为 time 类型，无对应的时间戳，则返回值格式 return-type 无论为何值，都会返回 string
|
|
||||||
|
|
||||||
### DatetimePicker Events
|
|
||||||
|
|
||||||
|事件名称 |说明 |返回值 |
|
|
||||||
|:-: |:-: |:-: |
|
|
||||||
|change |确定日期时间时触发的事件，参数为当前选择的 value |- |
|
|
||||||
Loading…
Reference in New Issue
Block a user