如图:

上图是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日期选择控件添加取消按钮的更多相关文章

  1. 打造基于jQuery的日期选择控件

    终于把jQuery拼写正确了哈,哈哈javascript也是区分大小写的,所以确实不能写错,今天我来和大家分享的是日期选择控件的实现,功能也许不够强大,但是能够满足需求. 我之前也写过(正确的说是改过 ...

  2. jquery mobiscroll移动端日期选择控件(无乱码)

    jquery mobiscroll移动端日期选择控件(无乱码) <pre><!DOCTYPE html><html lang="en">< ...

  3. JQuery好用的日期选择控件 DatePicker

    近期发现一个很好的基于JQ的前端UI日期选择控件Jquery.DatePicker.js 下载地址:jquery.DatePIcker.js 演示地址:DatePicker - 基于jQuery 1. ...

  4. 取消layUI中日期选择控件默认填充日期

    input标签中使用日期选择控件填写,加载时默认填充当前日期, 标签设置了placeholder="请选择" autocomplete="off",但是并没有效 ...

  5. Swift - 日期选择控件(UIDatePicker)的用法

    1,使用storyboard创建日期选择控件 首先我们将一个UIDatePicker控件和一个按钮直接添加到Main.Storyboard上.该按钮是为了点击时弹出提示框显示当前选择的日期和时间. 同 ...

  6. Android自定义View(RollWeekView-炫酷的星期日期选择控件)

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/53420889 本文出自:[openXu的博客] 目录: 1分析 2定义控件布局 3定义Cus ...

  7. ExtJS6.0扩展日期选择控件为也可以选择时间

    PS:ExtJS自带的日期选择控件只能够选择日期,但是现在的需求需要精确到秒,所以在网上搜索了一些例子(大部分是4.0的)作为参考,然后改出了6.0可用的一个日期时间选择控件. 1.找到extjs6. ...

  8. 用c/c++混合编程方式为ios/android实现一个自绘日期选择控件(一)

    本文为原创,如有转载,请注明出处:http://www.cnblogs.com/jackybu 前言 章节: 1.需求描述以及c/c++实现日期和月历的基本操作 2.ios实现自绘日期选择控件 3.a ...

  9. js 跨域的问题 (同一个主域名不同的二级域名下的跨域问题) 解决 WdatePicker.js my97日期选择控件

    例如域名是  a.xx.com  和 b.xx.com    如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain. 如果iframe的时候  a包含b  为 ...

随机推荐

  1. Java图像渐变

    图像渐变我们大体想一下思路无非是这样:将图像所有的像素点的RBG,每个点就减去相同的量,而且这个量是个渐变的量.是的,就是这样,我们的程序也是这个思路,不过就是没有单纯的“想”这么简单了.我这里只编写 ...

  2. dreamweaver 8的替换功能

    dreamweaver 8的替换功能 下面教你用dreamweaver 8的替换功能来删除这些冗余代码. 查找范围:文件夹(然后选取你需要替换的文件夹) 搜索:源代码查找:\btppabs=" ...

  3. #学习笔记#——JavaScript 数组部分编程(六)

    14. 题目描述 实现一个打点计时器,要求 1.从 start 到 end(包含 start 和 end),每隔 100 毫秒 console.log 一个数字,每次数字增幅为 1 2.返回的对象中需 ...

  4. Kinect 开发 —— 骨骼追踪(下)

    Kinect 连线游戏 在纸上将一些列数字(用一个圆点表示)从小到大用线连起来.游戏逻辑很简单,只不过我们在这里要实现的是动动手将这些点连起来,而不是用笔或者鼠标. 在开始写代码之前,需要明确定义我们 ...

  5. python3 import Crypto 失败的解决办法 (AES对称加密使用 模块)

    # 先导入所需要的包 pip3 install Crypto # 再安装pycrypto pip3 install pycrypto from Crypto.Cipher import AES # 就 ...

  6. 【2017 Multi-University Training Contest - Team 2】 Regular polygon

    [Link]: [Description] 给你n个点整数点; 问你这n个点,能够组成多少个正多边形 [Solution] 整点只能构成正四边形. 则先把所有的边预处理出来; 枚举每某两条边为对角线的 ...

  7. libssh2进行远程运行LINUX命令

    /** * CSSHClient.h * @file 说明信息.. * DATE February 13 2015 * * @author Ming_zhang */ #ifndef _CSSHCLI ...

  8. C#解析HTML源码

    刚做了一个小任务,需要抓取其他网站的部分数据,这里就顺便介绍使用Winista.Text.HtmlParser这个类库如何解析HTML并抓取部分数据 1.获取指定网站的页面源码 string url ...

  9. windows 静态和动态库

    c++中共有两种库:1.动态链接库LIB包含了函数所在的DLL文件和文件中函数位置的信息(入口),代码由运行时加载在进程空间中的DLL提供,称为动态链接库dynamic link library.(这 ...

  10. (转)修改 ubuntu 默认启动项

    转自: http://jingyan.baidu.com/article/afd8f4de58959134e386e969.html 当我们安装windows和ubuntu双系统以后,默认启动变成ub ...