如图:

上图是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. modSecurity规则学习(三)——SecRule

    通用格式 SecRule VARIABLES OPERATOR [TRANSFORMATION_FUNCTIONS, ACTIONS]   阶段phase (1)request headers (2) ...

  2. vim 基础学习之查找

    普通模式下 /->正向查找 n-向下查找 N-向上查找 ?->反向查找 N-向下查找 n-向上查找 <C-r><C-w> <C-r>-引用,例如引用寄存 ...

  3. Resize图片

    在网站上传图片的时候,提示图片太大了. 有5种方式来调整图片大小 http://www.wikihow.com/Resize-a-JPEG picresize.com 这个网站比较靠谱:使用Windo ...

  4. 慢慢人生路,学点Jakarta基础-集合类

    动态改变内存 因为数组在存储之前需要先申请一块连续的内存空间并且在编译的收就必须确定好它的空间大小,在运行时控件的大小无法再随着需求的改变而改变,极易出现越界的情况,数据少时又会造成内存空间浪费. 主 ...

  5. C++标准库概述

    一.C++标准库的主要组件: 1.标准C库 2.I/O流技术(对标准输入输出设备称为标准I/O,对在外磁盘上文件的输入输出称为文件I/O,对内存中指定的字符串存储空间的输入输出称为串I/O) 3.st ...

  6. php开启openssl扩展

    windows下开启方法: 1: 首先检查php.ini中:extension=php_openssl.dll是否存在, 如果存在的话去掉前面的注释符‘:’, 如果不存在这行,那么添加extensio ...

  7. axel---下载工具

    axel是Linux下一个不错的HTTP/ftp高速下载工具.支持多线程下载.断点续传,且可以从多个地址或者从一个地址的多个连接来下载同一个文件.适合网速不给力时多线程下载提高下载速度.比如在国内VP ...

  8. rune 切片 go

    package main import ( "fmt" ) func main() { var s = "go程序``**//;;''[p]=-\\&|@#$%^ ...

  9. Android eclipse 提示java代码 快捷键

    1.提示java代码能够用ALT+/ 键就能够了(前提是你要把你须要的类或方法的首字母打出来).我添加的部分:仅仅要输入sysout,然后alt+/键就能够输出System.out.prinln(), ...

  10. Android使用蓝牙连接adb调试App

    使用WiFi连接Android设备调试APP的教程非常多,可是项目中须要使用蓝牙进行通信.所以牵扯使用蓝牙调用adb. 1.   将电脑蓝牙与手机进行配对(控制面板->设备和打印机->加入 ...