jquery weui日期选择控件添加取消按钮
如图:
上图是jQuery weui的时间选择控件,红框处本来应该有个“取消”按钮的,可惜偏偏没有,当用户不想选择的时候就不好处理,虽然插件提供了点击其他区域关闭的功能,但过于隐晦,不容易发现,因此本文的目的就是把这个取消按钮加上.
直接上代码:
大概4016行下面添加一个取消配置项,4021行下面添加取消按钮DOM结构,如下
var defaults = {
updateValuesOnMomentum: false,
updateValuesOnTouchmove: true,
rotateEffect: false,
momentumRatio: 7,
freeMode: false,
// Common settings
scrollToInput: true,
inputReadOnly: true,
toolbar: true,
toolbarCloseText: '完成',
toolbarCancelText: '取消',
title: '请选择',
toolbarTemplate: '<div class="toolbar">\
<div class="toolbar-inner">\
<a href="javascript:;" class="picker-button close-picker">{{closeText}}</a>\
<a href="javascript:;" class="picker-button cancel-picker">{{CancelText}}</a>\
<h1 class="title">{{title}}</h1>\
</div>\
</div>',
};
大概4434行新增配置项替换规则,如下:
pickerHTML =
'<div class="' + (pickerClass) + '">' +
(p.params.toolbar ? p.params.toolbarTemplate.replace(/{{closeText}}/g, p.params.toolbarCloseText).replace(/{{CancelText}}/g, p.params.toolbarCancelText).replace(/{{title}}/g, p.params.title) : '') +
'<div class="picker-modal-inner picker-items">' +
colsHTML +
'<div class="picker-center-highlight"></div>' +
'</div>' +
'</div>';
大概4607行下面添加监听取消按钮的事件,如下:
$(document).on("click", ".cancel-picker", function() {
var pickerToClose = $('.weui-picker-modal.weui-picker-modal-visible');
if (pickerToClose.length > 0) {
$.closePicker(pickerToClose);
$(document).trigger('datepickerclose');
}
});
注意:由于插件关闭日期弹窗的特殊做法,导致无法拿到需要输入日期的input框,从而导致无法执行点击取消按钮时清空input的值,所以这里只能暴露一个“datepickerclose”事件,在代码中自行监听这个事件,根据需要做处理,如:清空input的值(只要启动这个插件input框就自动填入日期值) 我们js中写法,如下:
$(document).on('datepickerclose', function () {
if($(selectorA).length > 0) {
$(selectorA).val('');
}
if($(selectorB).length > 0) {
$(selectorA).val('');
}
})
虽然实现了功能但是有个体验不好的地方,插件第一次点击文本框时会自动填入日期,但执行该函数后,第二次点击文本框就不会自动填入日期,必须手动选择
jquery.weui.css要新增样式,控制取消按钮的显示位置
.toolbar .cancel-picker{
left: 0;
right: auto;
}
jquery weui日期选择控件添加取消按钮的更多相关文章
- 打造基于jQuery的日期选择控件
终于把jQuery拼写正确了哈,哈哈javascript也是区分大小写的,所以确实不能写错,今天我来和大家分享的是日期选择控件的实现,功能也许不够强大,但是能够满足需求. 我之前也写过(正确的说是改过 ...
- jquery mobiscroll移动端日期选择控件(无乱码)
jquery mobiscroll移动端日期选择控件(无乱码) <pre><!DOCTYPE html><html lang="en">< ...
- JQuery好用的日期选择控件 DatePicker
近期发现一个很好的基于JQ的前端UI日期选择控件Jquery.DatePicker.js 下载地址:jquery.DatePIcker.js 演示地址:DatePicker - 基于jQuery 1. ...
- 取消layUI中日期选择控件默认填充日期
input标签中使用日期选择控件填写,加载时默认填充当前日期, 标签设置了placeholder="请选择" autocomplete="off",但是并没有效 ...
- Swift - 日期选择控件(UIDatePicker)的用法
1,使用storyboard创建日期选择控件 首先我们将一个UIDatePicker控件和一个按钮直接添加到Main.Storyboard上.该按钮是为了点击时弹出提示框显示当前选择的日期和时间. 同 ...
- Android自定义View(RollWeekView-炫酷的星期日期选择控件)
转载请标明出处: http://blog.csdn.net/xmxkf/article/details/53420889 本文出自:[openXu的博客] 目录: 1分析 2定义控件布局 3定义Cus ...
- ExtJS6.0扩展日期选择控件为也可以选择时间
PS:ExtJS自带的日期选择控件只能够选择日期,但是现在的需求需要精确到秒,所以在网上搜索了一些例子(大部分是4.0的)作为参考,然后改出了6.0可用的一个日期时间选择控件. 1.找到extjs6. ...
- 用c/c++混合编程方式为ios/android实现一个自绘日期选择控件(一)
本文为原创,如有转载,请注明出处:http://www.cnblogs.com/jackybu 前言 章节: 1.需求描述以及c/c++实现日期和月历的基本操作 2.ios实现自绘日期选择控件 3.a ...
- js 跨域的问题 (同一个主域名不同的二级域名下的跨域问题) 解决 WdatePicker.js my97日期选择控件
例如域名是 a.xx.com 和 b.xx.com 如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain. 如果iframe的时候 a包含b 为 ...
随机推荐
- Python标准库:内置函数all(iterable)
假设可迭代的对象的所有元素所有非空(或者空迭代对象),就返回True.这个函数主要用来推断列表.元组.字典等对象是否有空元素.比方有10000个元素的列表,假设没有提供此函数,须要使用循环来实现.那么 ...
- Domino系统从UNIX平台到windows平台的迁移及备份
单位机房的一台服务机器到折旧期了,换成了新购IBM机器X3950,而且都预装了windows 2003 server 标准版,所以只有把以前在Unix平台下跑的OA系统迁移到新的windows 200 ...
- angularjs之ui-bootstrap的Datepicker Popup不使用JS实现双日期选择控件
最开始使用ui-bootstrap的Datepicker Popup日期选择插件实现双日期选择时间范围时,在网上搜了一些通过JS去实现的方法,不过后来发现可以不必通过JS去处理,只需要使用其自身的属性 ...
- 禁止input输入空格
仅适用于PC端:$("input").attr("onKeypress","javascript:if(event.keyCode == 32)eve ...
- PatentTips - Control register access virtualization performance improvement
BACKGROUND OF THE INVENTION A conventional virtual-machine monitor (VMM) typically runs on a compute ...
- 洛谷 P1405 苦恼的小明
P1405 苦恼的小明 题目描述 黄小明和他的合伙人想要创办一所英语培训机构,注册的时候要填一张个人情况的表格,在身高一栏小明犯了愁. 身高要求精确到厘米,但小明实在太高了,无法在纸上填下这么长的数字 ...
- 【D3 API 中文手冊】
[D3 API 中文手冊] 声明:本文仅供学习所用,未经作者同意严禁转载和演绎 <D3 API 中文手冊>是D3官方API文档的中文翻译. 始于2014-3-23日,基于VisualCre ...
- 用 runcloud.io 免费部署、优化管理你的多个VPS( 目前支持 Ubuntu 16.04 )
使用RunCloud.io轻松实现Web部署 使用VPS.云服务器,通常会安装基本的操作系统,之后必须自己安装Apache,MySQL,PHP,尤其是服务器的性能优化,这对大多数人来说可能是非常具有挑 ...
- SQL数值转字符串保留指定小数位
IF EXISTS ( SELECT * FROM sysobjects WHERE xtype = 'fn' AND name = 'fn_NumberFormat' ) BEGIN DROP FU ...
- 利用日志使管理Linux更轻松
利用日志使管理Linux更轻松 操作系统的日志主要具有审计与监测的功能,通过对日志信息的分析,可以检查错误发生的原因,监测追踪入侵者及受到攻击时留下的痕迹,甚至还能实时的进行系统状态的监控.有效利用日 ...