小程序实现日期时间控件picker
小程序自带的组件中有日期跟时间的picker,但就缺个日期时间picker组件,那没办法,只能自己弄一个,这个组件不是很难,比较难的地方是要根据不同年份(是否闰年)跟月份决定一个月里有多少天。
我直接把代码弄出来吧,我这个组件只精确到分,弄到秒也很容易,这个就让大家自己去研究修改了。
date-time-picker.wxml文件
<picker mode="multiSelector" value="{{valueArray}}" range="{{rangeValues}}" bindcolumnchange="handleColumnChange" bindchange="handleValueChange" bindcancel="handleCancel">
<slot></slot>
</picker>
date-time-picker.js文件,由代码可知,组件对外属性是value接收的是日期字符串(YYYY-MM-DD HH:mm:ss),还有dateValue接收的是一个Date对象,日期修改时触发change事件,把date跟dateString传入事件参数e.detail中
const leftPad0 = function(v, n) {
if (!v) {
v = "";
}
let prefix = "";
for (let i = 0; i < n; i++) {
prefix += "0";
}
return (prefix + v).substr(-n);
};
const stringToDate = function(str) {
str = str.replace(/-/g, "/");
return new Date(str);
};
const isLeapYear = function(year) {
if (((year % 4) == 0) && ((year % 100) != 0) || ((year % 400) == 0)) {
return true;
}
return false;
};
const now = new Date();
const years = [];
const beginYear = 1990;
for (var i = beginYear; i <= now.getFullYear(); i++) {
years.push(i + "年");
}
const months = [];
for (var i = 0; i < 12; i++) {
months.push(leftPad0(i + 1, 2) + "月");
}
const days = [];
for (var i = 0; i < 31; i++) {
days.push(leftPad0(i + 1, 2) + "日");
}
const hours = [];
for (var i = 0; i < 24; i++) {
hours.push(leftPad0(i, 2) + "时");
}
const minutes = [];
for (var i = 0; i < 60; i++) {
minutes.push(leftPad0(i, 2) + "分");
} Component({
/**
* 组件的属性列表
*/
properties: {
value: String,
dateValue: {
type: Date
}
}, /**
* 组件的初始数据
*/
data: {
valueArray: [0, 0, 0, 0, 0],
rangeValues: [
years,
months,
days,
hours,
minutes
],
pickerYear: beginYear,
pickerMonth: 1
},
observers: {
value: function(v) {
this.setData({
valueArray: this._dateToValueArray(stringToDate(v))
})
},
dateValue: function(date) {
this.setData({
valueArray: this._dateToValueArray(date)
})
},
valueArray: function(v) {
this._settMonthDays(v[0] + beginYear, v[1] + 1);
}
},
/**
* 组件的方法列表
*/
methods: {
_dateToValueArray(date) {
return [date.getFullYear() - beginYear, date.getMonth(), date.getDate() - 1, date.getHours(), date.getMinutes()];
},
_settMonthDays(year, month) {
let monthDays = 31;
switch (month) {
case 2:
monthDays = 28;
if (isLeapYear(year)) {
monthDays = 29;
}
break;
case 4:
case 6:
case 9:
case 11:
monthDays = 30;
break;
}
let days = [];
for (let i = 0; i < monthDays; i++) {
days.push(leftPad0(i + 1, 2) + "日");
}
this.setData({
pickerYear: year,
pickerMonth: month,
"rangeValues[2]": days
});
},
handleCancel(e) {
this.setData({
valueArray: this.data.valueArray
})
},
handleColumnChange(e) {
if (e.detail.column > 1) return false;
let year = this.data.pickerYear;
let month = this.data.pickerMonth;
if (e.detail.column == 0) {
year = e.detail.value + beginYear;
} else if (e.detail.column == 1) {
month = e.detail.value + 1;
}
this._settMonthDays(year, month);
},
handleValueChange(e) {
let dateArr = [];
for (let i in e.detail.value) {
let v = this.data.rangeValues[i][e.detail.value[i]];
dateArr.push(v.toString().substr(0, v.length - 1))
}
let dateString = dateArr[0] + "-" + dateArr[1] + "-" + dateArr[2] + " " + dateArr[3] + ":" + dateArr[4] + ":00";
this.triggerEvent('change', {
date: stringToDate(dateString),
dateString
})
}
}
})
创建一个测试页面
//test.json
{
"usingComponents": {
"date-time-picker": "/components/date-time-picker2/date-time-picker"
}
} //test.wxml
<date-time-picker value="{{value}}" bind:change="handleChange">时间:{{value}}</date-time-picker> //test.js
Page({ /**
* 页面的初始数据
*/
data: {
value: "2019-11-11 11:11:00"
},
handleChange(e) {
console.log(e)
this.setData({
value: e.detail.dateString
})
}
})
效果如下
小程序实现日期时间控件picker的更多相关文章
- 令人头痛的ExtJS日期时间控件
1 缘由 Ext提供了日期.时间的控件,但没有将日期和时间组合在一起的控件.在网上搜索时,有前辈创建或重写了时间相关的类,并提供了源码.不得不说那位作者对 extjs 框架理解得很透彻,虽然不知道他当 ...
- 学习日期时间控件 daterangepicker
aterangepicker 是一款日期时间控件,可选择“年,月,日,时,分,秒”,可选择单面板,也可选择双面板(起止时间). 单面板示例:daterangepicker 单面板 codepen 在线 ...
- jquery日期时间控件
代码下载地址: jquery日期时间控件下载地址 . 工作中用到, 这里分享一下, 避免重复摸索劳动. 一. HTML 文件 <!DOCTYPE HTML PUBLIC "- ...
- jquery-ui日期时间控件实现
日期控件和时间控件为独立控件,日期时间控件要同一时候导入日期控件和时间控件的js,然后在日期控件加入时间控件显示參数,没有导入时间控件js.日期控件函数设置的时间控件參将包错 日期控件官网网址:htt ...
- Android日期时间控件DatePickerDialog和TimePickerDialog
1.DatePickerDialog 在一些万年历.日程表等APP上我们经常可以看到日期选择控件,由于很少有用户会老老实实的手工输入日期,所以该控件的作用就是为了控制用户的输入格式,在Android中 ...
- 微信小程序基础之试图控件View、ScrollView、Swiper
今天写一篇关于微信小程序视图控件的文章,主要是介绍界面的搭建和部分操作js交互功能的介绍,转载请注明出处,谢谢~ 首先显示首页结构.创建三个navigator,用来跳转页面: <!--index ...
- 小程序中点击input控件键盘弹出时placeholder文字上移
最近做的一个小程序项目中,出现了点击input控件键盘弹出时placeholder文字上移,刚开始以为是软键盘弹出布局上移问题是传说中典型的fixed 软键盘顶起问题,因此采纳了网上搜到的" ...
- jquery datetimepicker 日期时间控件的使用及参数说明
首先下载 jquery.datetimepicker.css jquery.datetimepicker.main.js 1. 引入css和js (注:该控件要依赖于jquery) <link ...
- Extjs4 DateTimeField,日期时间控件完美版
网上若干类似的控件,要么是有bug,要么是操作体验不合理,这里贡献一个比较科学的版本. 扩展包下载: http://files.cnblogs.com/qidian10/Ext.ux.rar 解压至E ...
随机推荐
- 基于串口通信做my_printf时遇到的坑儿
首先,完成了串口向终端putty的打印函数ConsolePrint(),但该函数只能打印字符串,无法像stdio库中的printf函数一样打印整数和浮点数等. 因此,我先是使用了标准库stdio中的s ...
- luogu P3913 车的攻击 |数学
题目描述 N×N 的国际象棋棋盘上有KK 个车,第ii个车位于第R_i行,第C_i列.求至少被一个车攻击的格子数量. 车可以攻击所有同一行或者同一列的地方. 输入格式 第1 行,2 个整数N,K. 接 ...
- 配置中心入门案例以及出现Could not resolve placeholder 'XXX' in value "${XXX}"的解决方式
编写配置中心的服务端 创建项目 修改 pom 文件添加 config-server 坐标 <?xml version="1.0" encoding="UTF-8&q ...
- 对于在Dao层,一个DML操作一个事务,升级到Service层,一个用户,一个事务
原先的连接Connection,只能是来一次,新创建一个连接connection.这样如果事务在Dao层已经默认提交,在service层出错时,对于俩张关联会有俩种不同的结果.为了解决这样的问题,我们 ...
- cmd 窗口中运行 Java 程序
1.CMD 命令提示符(Command Processor)(CMD) CMD命令:开始->运行->键入 cmd(在命令行里可以看到系统版本.文件系统版本) 2.对文件夹操作的部分命令 启 ...
- 基于iCamera测试AR0134 960p 全局快门相机模块小结
基于iCamera测试AR0134 960p 全局快门相机模块小结 首先看看此模块的特性 AR0134 全局曝光 CMOS模块 1280*960像素 5.3 V/lux-sec 摄像头模块实物靓照(上 ...
- Java中通过代码得到int类型数值的二进制形式
一.完整代码 public class BigInteger { int sing; byte[] val; public BigInteger(int val){ // 将传递的初始值,按位取值,存 ...
- Obeject.hasOwnProperty
对象{ }要用for-in遍历对象内的属性,通过hasOwnProperty判断属性是否是对象本身的,而不是原型上的 数组[ ]可以通过forEach来遍历
- org.eclipse.emf.ecore.xmi.FeatureNotFoundException: Feature 'taglib' not found
tomcat7,部署tomcat6下的项目统,报tomcat 7: IllegalArgumentException: taglib definitionnotconsistentwithspecif ...
- django----cookie与session 和 中间件
目录 cookie与session简介及操作 cookie django中操作cookie cookie超时时间 删除cookie session session操作 设置 key value发生了什 ...