vue时间选择器

NUTUI VUE时间选择器

卑微远

22633人浏览 · 2022-04-18 11:02:02

卑微远 · 2022-04-18 11:02:02 发布

1、年-月-日时:分

效果展示：
在这里插入图片描述
打开选择器：

<div class="label">记录日期:</div>
<nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker">
	<span slot="title">
	<label>日期时间选择</label>
	</span>
	<div slot="desc" class="selected-option">
	<span class="show-value">{{recordTime ? recordTime : ''}}</span>
	</div>
</nut-cell>
<nut-datepicker
	:is-visible="isVisible"
	title="选择日期时间"
	type="datetime"
	:defaultValue="defaultValue"
	startDate="2022-01-01 00:08"
	endDate="2030-10-05 10:04"
	@close="switchPicker"
	@choose="setChooseValue"
></nut-datepicker>

export default {
    data() {
      return {
      	isVisible: false,
        defaultValue: '',
		recordTime: ''
	  }
	},
	methods: {
	  switchPicker() {
        this.isVisible = !this.isVisible;
      },
      setChooseValue(param) {
        console.log('param:' + param);
        const theDate = param[5];
        this.recordTime = theDate;
      },
      getDateTime() {
        let now = new Date();
        let year = now.getFullYear();
        let month = now.getMonth() + 1;
        let day = now.getDate();
        let hour = now.getHours();
        let minute = now.getMinutes();
        let time = `${year}-${month}-${day} ${hour}:${minute}`;
        console.log('time:' + time);
        this.defaultValue = time;
      }
	},
	created() {
	  this.getDateTime();
	}
}

注：
（1）defaultValue：选择器的默认打开时间和defaultValue相关，所以需要打开时对defaultValue赋值，给定需要打开的时间即可；
（2）startDate：如果不指定startDate，选择器可选择日期的开始时间为2000-01-01 00:00，可根据自身情况给定或者动态赋值；
（3）endDate：如果不给定endDate那么当天日期会有问题，只能选择0时时间，可根据自身情况给定或者动态赋值；

2、年-月-日

2.1 nut-datepicker

效果展示：
在这里插入图片描述

打开选择器：
在这里插入图片描述

<div class="label">记录日期:</div>
<nut-cell
	:showIcon="true"
	title="每列不显示中文（年/月/日）"
	:desc="date ? date : '请选择'"
	@click.native="switchPicker">
</nut-cell>
<nut-datepicker
	:is-visible="isVisible"
	type="date"
	title="选择年月日"
	:defaultValue="defaultValue"
	:is-show-chinese="false"
	@close="switchPicker"
	@choose="setChooseValue"
></nut-datepicker>

export default {
    data() {
      return {
      	isVisible: false,
        defaultValue: '',
		date: null
	  }
	},
	methods: {
	  switchPicker() {
        this.isVisible = !this.isVisible;
      },
      setChooseValue(param) {
        console.log('param:' + param);
        const theDate = param[3];
        this.date = theDate;
      },
      getDateTime() {
        let now = new Date();
        let year = now.getFullYear();
        let month = now.getMonth() + 1;
        let day = now.getDate();
        let hour = now.getHours();
        let minute = now.getMinutes();
        // let time = `${year}-${month}-${day} ${hour}:${minute}`;
        let time = `${year}-${month}-${day}`;
        console.log('time:' + time);
        this.defaultValue = time;
      }
	},
	created() {
	  this.getDateTime();
	}
}

注：
（1）defaultValue：选择器的默认打开时间和defaultValue相关，所以需要打开时对defaultValue赋值，给定需要打开的时间即可；

2.2 nut-calendar

效果展示：
在这里插入图片描述
打开选择器：

<div class="label">记录日期:</div>
<nut-calendar :is-visible.sync="isVisible"
startDate="2022-01-01"
:default-value="recordTime"
:is-auto-back-fill="true"
@close="switchPickerClose"
@choose="setChooseValue"
>
</nut-calendar>
<nut-cell :is-link="true" :show-icon="true" @click.native="switchPicker">
<span slot="title">日期选择</span>
<div slot="desc" class="selected-option">
  <span class="show-value">
	{{recordTime ? recordTime : '请选择日期'}}
  </span>
</div>
</nut-cell>

export default {
    data() {
      return {
      	isVisible: false,
        defaultValue: '',
		date: null
	  }
	},
	methods: {
	  setChooseValue(param) {
        const theDate = param[3];
        this.recordTime = theDate;
      },
      switchPickerClose() {
        this.isVisible = !this.isVisible;
      },
      switchPicker() {
        this.isVisible = !this.isVisible;
      }
	}
}

注：
（1）此选择器打开会默认为当前日期；
（2）startDate：选择器开始日期，若不指定，则从当前日期开始，可根据实际情况给定或动态赋值；

3、时:分

效果展示：
在这里插入图片描述
打开选择器：

<div class="label">记录日期:</div>
<nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker">
	<span slot="title">
	<label>选择时间</label>
	</span>
	<div slot="desc" class="selected-option">
	{{recordTime ? recordTime : ''}}
	</div>
</nut-cell>
<nut-datepicker
	:is-visible="isVisible"
	type="time"
	title="选择时间"
	@close="switchPicker"
	@choose="setChooseValue"
	:defaultValue="defaultValue"
></nut-datepicker>

export default {
    data() {
      return {
      	isVisible: false,
        defaultValue: '',
		date: null
	  }
	},
	methods: {
	  switchPicker() {
        this.isVisible = !this.isVisible;
      },
      setChooseValue(param) {
       console.log('param:' + param);
        const theDate = param[2];
        this.recordTime = theDate;
      },
      getDateTime() {
        let now = new Date();
        let year = now.getFullYear();
        let month = now.getMonth() + 1;
        let day = now.getDate();
        let hour = now.getHours();
        let minute = now.getMinutes();
        // let time = `${year}-${month}-${day} ${hour}:${minute}`;
        let time = `${hour}:${minute}`;
        console.log('time:' + time);
        this.defaultValue = time;
      }
	},
	created() {
	  this.getDateTime();
	}
}

注：
（1）defaultValue：选择器的默认打开时间和defaultValue相关，所以需要打开时对defaultValue赋值，给定需要打开的时间即可；

4、时:分:秒

效果展示：
在这里插入图片描述
打开选择器：

<div class="label">记录日期:</div>
<nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker">
	<span slot="title">
	<label>选择时间</label>
	</span>
	<div slot="desc" class="selected-option">
	{{recordTime ? recordTime : ''}}
	</div>
</nut-cell>
<nut-datepicker
	:is-visible="isVisible"
	type="time"
	title="选择时间"
	:default-value="defaultValue"
	@close="switchPicker"
	@choose="setChooseValue"
	:is-set-second="true"
></nut-datepicker>

export default {
    data() {
      return {
      	isVisible: false,
        defaultValue: '',
		date: null
	  }
	},
	methods: {
	  export default {
    data() {
      return {
      	isVisible: false,
        defaultValue: '',
		date: null
	  }
	},
	methods: {
	  switchPicker() {
        this.isVisible = !this.isVisible;
      },
      setChooseValue(param) {
       console.log('param:' + param);
        const theDate = param[3];
        this.recordTime = theDate;
      },
      getDateTime() {
        let now = new Date();
        let year = now.getFullYear();
        let month = now.getMonth() + 1;
        let day = now.getDate();
        let hour = now.getHours();
        let minute = now.getMinutes();
        let second = now.getSeconds();
        // let time = `${year}-${month}-${day} ${hour}:${minute}`;
        let time = `${hour}:${minute}:${second}`;
        console.log('time:' + time);
        this.defaultValue = time;
      }
	},
	created() {
	  this.getDateTime();
	}
}
	},
	created() {
	  this.getDateTime();
	}
}

注：
（1）defaultValue：选择器的默认打开时间和defaultValue相关，所以需要打开时对defaultValue赋值，给定需要打开的时间即可；
（2）startHour：若需限制开始小时，指定startHour即可，例：startHour=“8”，也可动态赋值；
（3）endHour：若需指定结束小时，指定startHour即可，例：
endHour=“18”，也可动态赋值。

5、分钟数递增步长设置

效果展示：
在这里插入图片描述
打开选择器：

<div class="label">记录日期:</div>
<nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker">
	<span slot="title">
	<label>选择时间</label>
	</span>
	<div slot="desc" class="selected-option">
	{{recordTime ? recordTime : ''}}
	</div>
</nut-cell>
<nut-datepicker
	:is-visible="isVisible"
	type="time"
	title="选择时间"
	:minute-step="5"
	:default-value="defaultValue"
	@close="switchPicker"
	@choose="setChooseValue"
></nut-datepicker>

export default {
    data() {
      return {
      	isVisible: false,
        defaultValue: '',
		date: null
	  }
	},
	methods: {
	  export default {
    data() {
      return {
      	isVisible: false,
        defaultValue: '',
		date: null
	  }
	},
	methods: {
	  switchPicker() {
        this.isVisible = !this.isVisible;
      },
      setChooseValue(param) {
       console.log('param:' + param);
        const theDate = param[2];
        this.recordTime = theDate;
      },
      getDateTime() {
        let now = new Date();
        let year = now.getFullYear();
        let month = now.getMonth() + 1;
        let day = now.getDate();
        let hour = now.getHours();
        let minute = now.getMinutes();
        let second = now.getSeconds();
        // let time = `${year}-${month}-${day} ${hour}:${minute}`;
        let time = `${hour}:${minute}`;
        console.log('time:' + time);
        this.defaultValue = time;
      }
	},
	created() {
	  this.getDateTime();
	}
}
	},
	created() {
	  this.getDateTime();
	}
}

注：
（1）defaultValue：选择器的默认打开时间和defaultValue相关，所以需要打开时对defaultValue赋值，给定需要打开的时间即可；
（2）minute-step=“5”：分钟步长设置。

附1、属性介绍

字段	说明	类型	默认值
type	类型，日期’date’，日期时间’datetime’，时间’time’	String	‘date’
is-visible	是否可见	Boolean	false
is-use12-hours	是否十二小时制度，只限类型为’time’时使用	Boolean	false
is-am	是否上午	Boolean	true
minute-step	分钟步进值	String	1
is-show-chinese	每列是否展示中文	Boolean	true
title	设置标题	String	null
default-value	默认值	String	null
start-date	开始日期	String	‘2000-01-01’
end-date	结束日期	String	今天
start-hour	开始小时	Number	1
end-hour	结束小时	Number	23
is-set-second	是否支持秒，仅限type类型为’time’时支持	Boolean	false

附2、事件介绍

字段	说明	回调参数
choose	点击确认按钮时候回调	返回日期时间
close	关闭时触发	-

关于移动端时间选择器样式定位异常问题：
如图：
在这里插入图片描述

查看nut-datepicker发现，引用的是picker.scss里的样式
在这里插入图片描述
经过多次查找，发现是样式定位异常导致，只需要在全局样式文件重新定义即可：

<style>
    .nut-picker-list .nut-picker-content, .nut-picker-list .nut-picker-roller {
        position: relative;
    }
</style>

华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

一文解读GaussDB(DWS)监控运维诊断优化能力

华为开发者空间

GaussDB技术解读——GaussDB架构介绍（四）

华为开发者空间

华为云数据仓库专业级开发者认证重磅发布

华为开发者空间

所有评论(0)

查看更多评论

卑微远

@Marshall_Ma

已为社区贡献4条内容

vue时间选择器

卑微远

1、年-月-日 时:分

2、年-月-日

2.1 nut-datepicker

2.2 nut-calendar

3、时:分

4、时:分:秒

5、分钟数递增步长设置

附1、属性介绍

附2、事件介绍

所有评论(0)

卑微远

1、年-月-日时:分