window.CN = {1: '一',2: '二',3: '三',4: '四',5: '五',6: '六',7: '七',8: '八',9: '九',0: '零'
}
window.LEVEL = {0: '',1: '十',2: '百',3: '千',4: '万',5: '十',6: '百',7: '千',8: '亿',9: '十',10: '百',11: '千',
}
function toCN(inStr) {console.dir(inStr)for(let i in CN)inStr = (inStr+'').replace(new RegExp(i, 'g'), CN[i])let result = '', maxIdx = inStr.length-1for(let i=0; i<=maxIdx; i++){let mchar = inStr.charAt(i)let mlevel = LEVEL[maxIdx-i]if(inStr.charAt(i)==='零'){if((maxIdx-i)%4 === 0)result += i===maxIdx ? '' : mlevelelseresult += mchar}else{result += mchar+mlevel}}
 return result.replace('一十','十')
 } console.dir(toCN(132130)) console.dir(toCN(72304203)) console.dir(toCN(9032032023))

结果:

elementUI 时间选择器快速选择

选择器代码

        <el-date-picker v-model="timeRange" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" format="yyyy-MM-dd HH" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>

相关参数

        timeRange: [],keyStr: '',times: [{value: 1, unit: '小时'},{value: 3, unit: '小时'},{value: 6, unit: '小时'},{value: 12, unit: '小时'},{value: 1, unit: '天'},{value: 3, unit: '天'},{value: 7, unit: '天'},{value: 1, unit: '月'},{value: 3, unit: '月'},],pickerOptions: {shortcuts: []}

相关方法

      createTimes(){this.pickerOptions.shortcuts = []this.times.forEach(t=>{this.pickerOptions.shortcuts.push({text: '最近'+TOCN(t.value)+t.unit,onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - t.value*TIMETYPE[t.unit]);picker.$emit('pick', [start, end]);}})})}created中调用

效果图

选择最近一个月

选择最近三小时

转载于:https://www.cnblogs.com/lurenjia1994/p/9566083.html

JavaScript 数字转汉字+element时间选择器快速选择相关推荐

  1. JavaScript 数字转汉字大写 (JS金额大写)

    javascript数字转化为汉字金额大写,可以处理负值 已经封装成类,直接复制使用 本人在项目中使用的,如果好用,请点赞 下面上 代码,最后有使用方法 //数字(数字类型或字符串类型)转化为金额大写 ...

  2. element时间选择器限制到时分秒_element-ui 日期时间选择器限制日期以及时间范围...

    element-ui 日期时间选择器限制日期以及时间范围. 实现效果: 实现方式: 业务背景: 日期:只能选择今天以后的日期(包含今天), 时间:只能选择当前日期时间一小时以后的时间. 实现效果: 实 ...

  3. element 时间选择器禁用 秒 选项

    需求是不要时间选择器的秒选项 已解决 只需要 标签中的format不设置 ss 就可以了

  4. element 时间选择器——年

    <el-date-picker v-model="fileYear" type="year" placeholder="选择年"> ...

  5. element 时间选择器 限制时分秒_关于elementUI里日期选择器禁用时间的一些小技巧...

    DatePicker日期选择器算是日常开发中用得比较多的插件之一了,特别是做一些后台管理系统,选择时间.日期也是特别的方便,相比于原生的input中的date,elementUI中的日期选择器显得更加 ...

  6. element时间选择器限制到时分秒_ElementUI日期选择器时间选择范围限制

    Element是一套基于vue2.x的一个ui框架.官方文档也很详细,这里记录一个element-ui日期插件的补充 官方文档中使用picker-options属性来限制可选择的日期,下面举例补充: ...

  7. element 时间选择器,设置周与周的区间

    1. 因为elementui 自带的周选择器,只能选择一个时间点, 所以我input 来装这个时间区间 结构如下: <div class="time-select"> ...

  8. element 时间选择器禁止选择以前或以后的时间

    <el-date-picker v-model="certificatetime" value-format="yyyy-MM-dd" :picker-o ...

  9. el-date-picker element时间选择器 先选择年 再选择月 年月日依次选择

    el-date-picker 默认打开的是日期选择panel,点击顶部的 年份 才会显示年份选择,如何实现 点击首先打开年份选择panel? 实现思路分析 首先查看官方文档,并没有发现控制这个pane ...

最新文章

  1. Mozilla与Ubisoft结盟一同开发AI替浏览器除错
  2. nasm汇编:段的申明、$$、$
  3. Spring MVC 学习笔记一 HelloWorld
  4. luinx php木马,Linux Bash Shell 寻找PHP(网站)挂马,后门
  5. Kernel中如何操作CPU及外设寄存器
  6. 中国为什么不发展民用计算机,为什么大多数人都错估了计算机与AI的发展?
  7. VC++:如何将程序最小化到托盘 [转]
  8. 计算机制作乘法表格,excel表格乘法怎么用,excel表格怎么算乘法
  9. 如何才能真正的学会设计模式
  10. 微信小程序图片自适应屏幕大小真的有效
  11. 浙江省二级计算机vfp,浙江省高校计算机等级考试大纲(二级——VisualFoxPro语言程序设计大纲)...
  12. AI:AI与爱无处不在,大赛与奖金齐飞—【科大讯飞】AI开发者大赛—与你在AI盛会中遨游!
  13. Hadoop相关概念
  14. 收集的一些有意思的网站(持续更新)
  15. 【比赛游记】NOI2019打铁记
  16. 第5章 远程控制软件的编写
  17. Undefined symbols for architecture i386: _OBJC_CLASS_$_JPUSHService
  18. 怎么把静态图片做成动态图?简单三步让图片动起来
  19. 向excel里面插入网络图片
  20. 给定经纬度计算距离_根据经纬度计算两地间的距离

热门文章

  1. PyQt5 技术篇-QSpinBox选值框值改变触发事件实例演示,获取QSpinBox组件的值,选值框的边界值设置方法
  2. PyQt5 技术篇 - 按钮隐藏并保留位置,pyqt5设置按钮的可见度,设置按钮透明度
  3. first-child伪类选择器没有效果(不起作用)
  4. 从几何与代数的角度推算坐标旋转变换矩阵(以2维为例)
  5. File类3 文件读取
  6. php委托模式,PHP设计模式 - 委托模式
  7. 【topoSort拓扑排序】1424. 奖金(简单题目看拓扑排序)
  8. linux或者shell进入vi命令
  9. codeforces271D
  10. 前端常见跨域问题解决方案