首页 > 其他分享 >vue时间选择器 nut-datepicker

vue时间选择器 nut-datepicker

时间：2023-06-13 12:44:08浏览次数：45  
标签：datepicker defaultValue isVisible param 选择器 let time now nut

vue时间选择器
https://blog.csdn.net/Marshall_Ma/article/details/124244451

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

注：
（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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

注：
（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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
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
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

注：
（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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

注：
（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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

注：
（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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

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

附1、属性介绍

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

附2、事件介绍

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

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

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

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

  • 1
  • 2
  • 3
  • 4
  • 5

标签：datepicker,defaultValue,isVisible,param,选择器,let,time,now,nut
From： https://www.cnblogs.com/sunny3158/p/17477218.html

相关文章

  • CSS选择器——简单爬虫代码
    爬取豆瓣top250影片资料（待修改）使用BeautifulSoup方法进行操作，CSS选择器截取html文本内容，对网页解析如。 importrequestsfrombs4importBeautifulSoup#避免反复获取出现爬取失败#头请求用于防止访问拒绝，亦可加cookiesdefpage_request(url,headers):htmltxt=requests.g......
  • 【LeetCode.384打乱数组】Knuth洗牌算法详解
    前两天看网易面筋得知网易云的随机歌曲播放使用了这个算法，遂找题来做做学习一下打乱数组https://leetcode.cn/problems/shuffle-an-array/给你一个整数数组nums，设计算法来打乱一个没有重复元素的数组。打乱后，数组的所有排列应该是等可能的。实现Solutionclass:Solution......
  • CSS选择器
    前言CSS选择器用于选择具体的元素添加CSS样式。记下笔记。选择器类型类型选择器（Typeselectors）类型选择器通过结点名称匹配元素。语法&实例结点名称{样式声明}属性选择器（Attributeselectors）属性选择器用来匹配包含特定属性或者属性值的元素语法&实例[attr]表示带......
  • BeanUtils.copyProperties笔记
    阿里开发者手册:【强制】避免用ApacheBeanutils进行属性的copy。说明：ApacheBeanUtils性能较差，可以使用其他方案比如SpringBeanUtils,CglibBeanCopier，注意均是浅拷贝。本笔记使用的是:org.springframework.beans.BeanUtils#copyProperties资料参考: BeanUtils.co......
  • element-ui中Select 选择器异步加载下一页
    场景当我们使用Select选择器存放大量数据的时候。会发现存在这么2个问题。1.接口响应时间较长。（因为数据量较多，一次查询的所有）甚至有可能超时。2.前端下拉框滑动卡顿。这个时候们如何解决上面面临的问题呢？有的小伙伴可能会说：1.分页加载。确实是可以解决问题。2.页面卡顿......
  • JQ插件：日期时间选择器date picker
    这个控件关键是它能支持在mobile中显示。iPhone和android中显示可能略有差别。下图是在android中的显示效果：再看一下用法首先导入JQ和datepicker插件：<linkrel="stylesheet"type="text/css"href="css/picker/default.css"/><linkrel="stylesheet&qu......
  • Vue进阶（幺幺捌）：CSS3 - 选择器first-child、last-child、nth-child、nth-last-child、nt
    (文章目录)1.first-child（IE7兼容）、last-child（IE8不兼容）html：<body><h2>列表</h2><ul><li>列表项目1</li><li>列表项目2</li><li>列表项目3</li><li>列表项目4</li></ul></body&g......
  • Nutika 打包 docx 库 出现 docx.opc.exceptions.PackageNotFoundError: Package not f
    docx.opc.exceptions.PackageNotFoundError:Packagenotfoundat重现用以下命令打包exe：nuitka--standalone--show-memory--show-progress--nofollow-imports--enable-plugin=pyqt5--follow-import-to=utils,src--output-dir=out--windows-icon-from-ico=./termius_1.......
  • 9_How to install phpMyAdmin on Nginx (in 5 minutes)
     地址：https://www.codewithharry.com/blogpost/install-phpmyadmin-ubuntu-nginx/  HowtoinstallPhpMyAdminonUbunturunningNginx(LEMPstack)Inthispost,wewillseehowtoinstallphpMyAdminonserversrunningNginx.Followthestepsbelow:Step1-......
  • element Cascader级联选择器 选择任意一级选项及点文字即可选中（去掉radio按钮）
    首先放出官网效果：项目需求：将示例的点击radio和点击文字功能结合在一起。可以选择任意一级的内容，直接点击文字即可选中，同时如果有下一级就展示，去掉radio标签。实现思路：通过css将radio标签做成文字框一样大小并且透明覆盖在整个文字上方，点击文字的时候其实是在点击radio标签css......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99