支付宝小程序日期选择组件datePicker封装
github 地址 https://github.com/iocool/antminDatePicker
最近在做支付宝小程序(以下简称小程序)开发,发现小程序的日期选择组件很不好用,比如安卓和IOS设备上,样式明显不同,因为小程序调用该组件是调用系统原生组件,所以会有一定的差异,另外,小程序提供的日期组件并不满足我当前的业务需求:
该日期为快递上门时间.
用户只可选择的日期范围,当日往后
2
天(即今天
,明天
)的日期,并且时间选择为早上9
点至下午18
点间的10
个小时整点时间.由于是快递上门,所以可选择的时间点为当前时间点
2
小时后(比如,现在时间是11点,用户可选择的最早时间为13点).如果当前时间晚于下午
18
点,则用户应该可以看到明天
及后天
2
天的时间点.
针对以上需求,借助小程序的 picker-view
组件,进行了二次封装,以下是封装后的组件.
示例
项目结构
.
├── README.md
├── app.acss
├── app.js
├── app.json
├── components // 组件目录
│ └── dateTimePicker // 日期组件目录
│ ├── datePickerBase.js // 基础 js 文件,需在使用文件中引入
│ ├── dateTimePicker.acss // 组件默认样式,除非特殊需要,一般不用修改
│ ├── dateTimePicker.axml // 组件默认结构
│ ├── dateTimePicker.js // 组件 js
│ ├── dateTimePicker.json // 组件配置信息
│ └── js
│ ├── handleDateArr.js // 日期数组处理的 js ,用以生成所需的日期数组
│ └── moment.min.js // 时间生成使用 moment.js
│
└── pages // 示例目录
└── index
├── index.acss
├── index.axml
├── index.js
└── index.json
使用说明
支付宝小程序的组件引用方法,及使用说明,可参照 支付宝 使用自定义组件 查看,也可参照本示例中 pages/index
下的使用方法.
pages/index/index.json
需配置 usingComponents
, 填写组件路径
{
"defaultTitle": "日期选择picker demo",
"usingComponents": {
"picker": "../../components/dateTimePicker/dateTimePicker"
}
}
pages/index/index.js
引入基础文件,详细配置及使用说明,参照 js
文件内容
// 引入基础初始
import datePicker from '../../components/dateTimePicker/datePickerBase'
pages/index/index.axml
使用 picker
组件
<picker
title="{{datePicker.title}}"
class="{{datePicker.class}}"
visible="{{datePicker.visible}}"
onHidePicker="hidePicker"
onConfirm="onConfirm"
pickerValue="{{datePicker.defaultValue}}"
/>
其中
title // 组件标题
class // 组件样式,可以自定义
visible // 组件显示/隐藏
onHidePicker // 隐藏该组件的事件
onConfirm // 点击组件弹窗确定后的事件,onConfirm(str),其中 str 为最终回调的参数,可取到 picker 的值
pickerValue // 默认参数,用来初始的时候用,传入数据是 picker 的索引值,默认(0,0),即 默认选中两列 picker 的第一项
一些其他的说明
- 组件的封装过程中,由于采用的是支付宝的
picker-view
所以在界面上没有花过多的时间,主要可能还是日期时间数组的生成需要处理一下,借助了moment.js
库,对于时间处理上还是很方便的,以下是对处理日期数组handleDateArr.js
的代码说明.
// 依赖于 moment.js
const Moment = require('./moment.min')
/**
* 生成日期时间数组
* @param dayLength // 要生成的天数时长,不传的话,默认生成 1 天
* @param timeSection // 时间区间,默认 10 , 可下单区间早上9点到下午6点,可下单时间在当前小时后2小时
*/
function getDaysArr(dayLength, timeSection){
let _daysArr = [[],[]]
let _dayLength = dayLength || 1
const _timeSection = timeSection || 10
const _nowHour = Moment().format('HH') // 当前时间 小时
const _expressHour = parseInt(_nowHour) + 2 // 可下单时间,当前时间 +2
const _earlyHour = 9 // 最早时间
const _endHour = 19 // 截止时间
for(let i = 0; i < _dayLength; i++){
// 当天时间处理
if( i === 0){
if(_expressHour <= _earlyHour ){
// 早于早上 9点时
_daysArr[1].push(getHoursArr(_earlyHour, _timeSection))
// 处理日期
_daysArr[0].push(Moment().add(i, 'days').format('YYYY-MM-DD'))
} else if( _expressHour > _earlyHour && _expressHour < _endHour){
// 晚于早上 9 点, 早于下午 18 点之前
_daysArr[1].push(getHoursArr(_expressHour, (_endHour - _expressHour)))
// 处理日期
_daysArr[0].push(Moment().add(i, 'days').format('YYYY-MM-DD'))
} else if ( _expressHour >= _endHour && _expressHour < 24){
// 超过晚上 19 点之后,日期天数增加一天
_dayLength++
}
} else {
// 其他日期时间处理
// 早于早上 9点时
_daysArr[1].push(getHoursArr(_earlyHour, _timeSection))
// 处理日期
_daysArr[0].push(Moment().add(i, 'days').format('YYYY-MM-DD'))
}
}
/**
* 获取小时时间数组
* @param nowHour // 当前小时
* @param hoursLength // 小时区间长度
*/
function getHoursArr(nowHour, hoursLength) {
let _hoursArr = []
for(let j = 0 ; j < hoursLength; j++){
_hoursArr.push(`${nowHour + j}:00:00`)
}
return _hoursArr
}
return _daysArr
}
module.exports = {
getDaysArr
}
- 在
dateTimePicker.js
文件中使用handleDateArr.js
的方法
...
const { getDaysArr } = require('./js/handleDateArr'); // 引入处理函数
Component({
data: {
...
},
methods: {
// 获取日期数据
doGetDaysArr() {
this.setData({
dateTimeData: getDaysArr(2) // 传入参数,需返回的日期天数,2天
});
}
}
});
...
以上就是该组件的基本说明,代码相对比较简单,觉得可以给目前在做支付宝小程序并有相关需要的童鞋参考一下.
支付宝小程序日期选择组件datePicker封装的更多相关文章
- taro小程序地址选择组件
效果图: address_picker.tsx: import Taro, { Component } from '@tarojs/taro' import { View, PickerView, P ...
- sencha:日期选择组件datepicker
来源于<sencha touch权威指南> ------------------------------- 除app.js外,其它内容都与上一篇博客里的内容相同.app.js代码如下: E ...
- 支付宝小程序自定义弹窗插件|支付宝dialog插件|model插件
支付宝小程序自定义弹窗组件wcPop|小程序自定义对话框|actionSheet弹窗模板 支付宝小程序官方提供的alert提示框.dialog对话框.model弹窗功能比较有限,有些都不能随意自定义修 ...
- 支付宝小程序开发——rich-text富文本组件支持html代码
前言: 与微信小程序不同,支付宝小程序的富文本组件并不能直接支持html代码,如: 如上,支付宝小程序的富文本组件只支持数组类型,html代码需要使用 mini-html-parser 转换,具体用法 ...
- react-native DatePicker日期选择组件的实现
本教程的实现效果如下: 为了实现其淡入/淡出的覆盖效果, 还有取消按钮, 在此用了一个三方的组件, 大家可以先安装一下: 三方组件的地址:https://github.com/eyaleizenber ...
- 日期选择组件(DatePicker)的实现
一.效果图 日期选择组件大概长这样: 从效果图可以看出,日期选择组件由两部分组成:日历表格和顶部操作栏. 二.日历表格 日期选择组件的核心主体是日历表格: 可以将日历表格表示成一个7️*的二维数组,数 ...
- Tarojs+redux支付宝小程序开发攻略
技术选型 对于习惯react语法的开发者来讲,RN是实现native的必备工具. 我们甚至可以屏蔽官方稳定而强大的配置层,直接上手开发. 而后,同为表层React语法的Rax.Taro这样的开源多端开 ...
- 小程序开发过程中常见问题[微信小程序、支付宝小程序]
目录 一.样式中如何使用background-image呢? 二.使用自适应单位rpx类似于rem,布局尽量使用flex布局 三.万能的{{双大括号,用于在模版中输出变量 四.你想要的基础组件和API ...
- 支付宝小程序与微信小程序开发功能和语法糖不同
最近开始负责公司webapp数据打通支付宝小程序,之前已经打通了微信小程序,现在根据支付宝小程序的开发文档在之前的模板上面做修改. 在修改模板的过程中,总结一下双方功能和语法糖的不同之处. 框架: a ...
随机推荐
- FreeMarker-简单示例
以下是简单的FreeMarker示例,直接采用模板 + 数据模型 = 输出的方式.示例中是Application的项目,主要用于展示模板输出HTML文件的功能. 示例: 1.引入POM依赖 <! ...
- ms sql SERVER 下载
企业版DVD SQL Server 2005 Enterprise Edition(支持超大型企业) 32 位DVD: ed2k://|file|cs_sql_2005_ent_x86_dvd.iso ...
- 战术网络安全检查表 | Symantec Connect
"知己知彼,百战不殆: 不知彼而知己,一胜一负: 不知彼,不知己,每战必殆." 孙子(中国古代军事家). 孙子的话在今日仍能够使我们产生共鸣. 机构只有了解敌人和自己优缺点才能在持 ...
- Android百度地图SDK 导航初始化和地图初始化引起的冲突
如题,相同是百度地图SDK开发过程中遇到的一个问题.交代下背景: 开发了一款内嵌百度地图的应用,因此里面差点儿相同将眼下百度地图SDK开放的主要功能都用到了,定位,地图显示,覆盖物标示.POI搜索,行 ...
- 从一个input点击引起的思考
一个input或者select标签都是有属于自己的disabled属性的,这个属性很少被使用,但是我们在项目实际开发的过程中也会遇到,比如我选择之后就让他置灰不可以变动了,那么久可利用js动态设置.对 ...
- iOS开发- SceneKit
打开你的Xcode 6然后新建一个项目,选择iOS/Application/Game模板然后点击Next. 将项目命名为QuickStart,选择开发语言为Swift,然后游戏选用的平台技术选择为Sc ...
- 【EasyUi DataGrid】批量删除
DataGrid是我们做网页经常使用到的组件之中的一个,对它的操作也无非是增删改查操作.单条数据的增删改相对来说比較简单.添加.改动能够直接在DataGrid中进行,也能够用弹出框的形式把数据装载在文 ...
- WebView播放H5课件时,锁屏解锁后,页面重新绘制的问题
难题描述:H5页面播放 ,锁屏,解锁后,重新加载了页面,三星不会出现(onpause onstop ,onresume),但在小米.魅族会调用 onpause onstop ondestroy,onr ...
- 第四周 Leetcode 124. Binary Tree Maximum Path Sum (HARD)
124. Binary Tree Maximum Path Sum 题意:给定一个二叉树,每个节点有一个权值,寻找任意一个路径,使得权值和最大,只需返回权值和. 思路:对于每一个节点 首先考虑以这个节 ...
- win10系统下,开启数据库远程连接方式
右键左下角的windows标志,选择控制面板 2.查看方式修改为大图标 3.选择高级设置 4.新建入站规则 5.选择端口然后下一步 6.选择tcp协议,端口输入80,3306 7.选择允许连接 8.规 ...