首页 JQuery/Js Laydate 绑定按钮【原创】
Laydate 绑定按钮【原创】
作者 : tanyi 来源 : 我的笔记 浏览 : 89 次 时间 : 2020-09-18 16:12:11
简述
layui的时间选择模块常用是直接绑定在input框,通过点击input框触发弹出日期选择面板进而选择日期,插件会自动将结果填充到input,而且貌似这个还没发控制,就是说你不想它自动填充都不行,所以今天遇到一个需求就费了不少时间

公司需求是时间即可以选择也可以自己手动去填,所以这个时间格式可能是不规则的,理想效果是一个输入框,一个时间按钮,输入框可以自行输入,当需要选择时间时点击时间按钮弹出时间选择界面然后选择时间,确定后填充到输入框。

结合需求我尝试了直接绑定输入框的方法,但是结果并不理想,虽然可以手动输入但是在点击input框的时候由于绑定了时间插件所以会弹出时间选择界面,导致实际输入是无效的,因为输入完成后失去焦点后插件会认为你完成了一次选择时间的操作而去填充到输入框导致之前输入的内容被覆盖,时间插件自动填充这个动作看了下文档没有找有有关可以控制的方法,所以只能采取一些其他手段,下面是最终解决方法。

layui时间模块文档里面有一个自定义时间的东西,里面有一个外部事件调用,通过这个可以将弹出选择时间界面的动作绑定到一个按钮上,当然原来的用于选择时间的输入框也必须要有,假定现在有一个按钮,id为:test1,一个input框(仅仅是为了接收和配置插件弹出时间选择界面,没有这个元素插件无法运行),id为:test2,通过将弹出动作绑定到按钮test1,点击确定时间后插件自动填充到输入框test2,那么复制官方文档代码稍作修改得到如下代码:

//外部事件调用
lay('#test1').on('click', function(e){ // test1 是一个按钮
  laydate.render({
    elem: '#test2'
    ,show: true //直接显示
    ,closeStop: '#test1' //这里代表的意思是:点击 test1 所在元素阻止关闭事件冒泡。如果不设定,则无法弹出控件
  });
});

这段代码已经可以时间点击按钮来唤起时间选择,后面是如何让用户可以自行输入时间,用test2肯定不行,开始已经说过行不通,test2就是一个辅助作用,要输入就必须再单独建一个input,假设id为:test3。

image.png

test3现在仅仅是一个普通的输入框,要和后面的时间联系起来就需要继续做一些操作,layui的时间模块有一个选择完毕的回调方法,通过回调方法即可以将选择的结果填充到test3,然后将test2做一些处理将它从界面隐藏,不能删除,test2是必须存在的。最终界面是这样。

image.png

前面的input框test3没有跟时间插件有直接联系,所以用户可以随意编辑,需要选择时间时点击后面的图标即可。

上一篇: Layui多文件上传获取进度回调【原创】

下一篇: layui table工具栏自定义【原创】
版权声明:原创文章,转载时请注明原始出处,作者等相关信息。
本文连接:https://ntbk8.cn/index/d-115.html
留言
上传图片
评论列表

96 篇

文章总数

38979 次

浏览总数

94 条

评论总数

昵称 Telkobe
职业 PHP开发
家乡 四川南充
住址 暂居成都
QQ 946188985
文章搜索
热门文章
最新文章
新闻头条

1 “15块4根面”,商家已停业整顿,景区物价就应该“贵上天”?

2 二十岁的智障女性嫁给五十岁的男人,这种婚姻是否有效的?

3 凤梨滞销,台湾名嘴鼓励每人一天吃18公斤,网友:笑喷了!

4 “错换人生28年”姚策母子为何反目,是利益纠葛还是另有隐情?

5 美女在家打造游戏厅 能VR高科技

6 “拉面哥”被众网红逼哭,声称想回归平静质朴的生活

7 失主你在哪儿?每个信封里都有百元大钞

8 两地燃气集团携手 成渝双城“燃”向未来

9 中国南北分界线上的古镇,有一副对联难倒天下客,百年来无人对出

10 暖闻|理发师退休后服务社区老人,收费2元30年未涨

11 上海苏宁将启动“全民焕新家电节” 家电以旧换新补贴最高达5000元

12 这种病一线城市治疗率不足40%,出现走路缓慢、手抖等症状要警惕

13 上海发布住房限售新举措 优先购买的新房满五年后方可转让

14 独居女孩被困浴室后 3000多个孤独的人尝试用智能音箱呼救

15 医院对面的“爱心家园”:为贫困患儿家庭提供免费食宿

16 30年守护:世界濒危鸟类黑嘴鸥在辽宁从千至万

17 最小龄双侧同期人工耳蜗宝宝如今能听会说

18 泰州14岁男孩开学后离家出走,南京铁路民警及时找回

19 咋回事?延庆警察蜀黍收到一束鲜花?

20 前有老人讹人称“良心过得去” 后有老人倒地“被绕路走”?别让好人寒了心!

21 视频|神秘男子“投食”狗狗 公共视频还原作案过程

22 花博会地方花卉展3月下旬举办 园区加紧运营培训

23 通讯:在内蒙古的留学生:传递好中国力量

24 吉林农业大学首批学生3月3日返校

25 某55岁男子娶智障女子 律师:无法领证,有刑事责任风

26 北京联合办公室租赁新模式,E园EPARK办公室秒变自习室

27 上海实施住房限售 优先购买新房的需网签备案满5年后方可转让

28 数字经济助文旅新篇——2021亚洲乐园及景点博览会5月羊城启幕

29 台湾拖家带口三人在加拿大租豪宅 院子2000平

30 金鱼排成一排看电视 主人:电视一关就散开 专家科普

历史上的今天

1 在869年前的今天,1152年3月4日 (农历正月廿六),“红胡子”腓特烈当选国王。

2 在828年前的今天,1193年3月4日 (农历正月廿九),埃及阿尤布王朝开国君主萨拉丁逝世。

3 在1871年前的今天,0150年3月4日 (农历正月十八),东汉医圣张仲景出生。

4 在343年前的今天,1678年3月4日 (农历二月十二),古典协奏曲形式的确立者维瓦尔蒂诞生。

5 在169年前的今天,1852年3月4日 (农历正月十四),俄国著名作家尼科拉伊·瓦西里也维奇·果戈理逝世。

6 在159年前的今天,1862年3月4日 (农历二月初四),中俄签订陆路通商章程。

7 在114年前的今天,1907年3月4日 (农历正月二十),孙中山被迫离。

8 在104年前的今天,1917年3月4日 (农历二月十一),国务总理段祺瑞出走天津,府院之争愈演愈烈。

9 在102年前的今天,1919年3月4日 (农历二月初三),列宁组成第三共产国际。

10 在100年前的今天,1921年3月4日 (农历正月廿五),哈定就任美国第29任总统。

11 在99年前的今天,1992年3月4日 (农历二月初六),香港英军制造“沙田惨案”。

12 在98年前的今天,1923年3月4日 (农历正月十七),胡适大力提倡研究国学。

13 在88年前的今天,1933年3月4日 (农历二月初九),富兰克林·罗斯福就任美国总统。

14 在88年前的今天,1933年3月4日 (农历二月初九),日军攻占承德。

15 在88年前的今天,1933年3月4日 (农历二月初九),日军攻占古北口。

16 在86年前的今天,1935年3月4日 (农历正月廿九),毛泽东担任红军前敌司令部政治委员。

17 在79年前的今天,1942年3月4日 (农历正月十八),美国派史迪威来华任职。

18 在77年前的今天,1944年3月4日 (农历二月初十),美国飞机第一次轰炸柏林。

19 在75年前的今天,1946年3月4日 (农历二月初一),叶挺获释。

20 1951年3月4日 (农历正月廿七),第一届亚洲运动会开幕。

21 1958年3月4日 (农历正月十五),英文《北京周报》创刊。

22 1967年3月4日 (农历正月廿四),斯大林的女儿叛逃西方。

23 1974年3月4日 (农历二月十一),希思辞职,哈罗德·威尔逊再度成为英国首相。

24 1975年3月4日 (农历正月廿二),石油输出国组织第一届首脑会议在阿尔及尔举行。

25 1980年3月4日 (农历正月十八),穆加贝即将组织津巴布韦黑人政权。

26 1983年3月4日 (农历正月二十),邓小平说:不能再用解放台湾这个提法。

27 1985年3月4日 (农历正月十三),邓小平会见日本商工会议所访华团。

28 1986年3月4日 (农历正月廿四),瓦尔德海姆被指控曾是纳粹分子。

29 1986年3月4日 (农历正月廿四),著名女作家丁玲逝世。

30 1987年3月4日 (农历二月初五),中国六大航空公司成立。

31 1988年3月4日 (农历正月十七),国务院决定扩大沿海经济开放区。

32 1989年3月4日 (农历正月廿七),邓小平指出:搞四化搞改革开放关键是稳定。

33 1990年3月4日 (农历二月初八),肖红教授获香港区旗、区徽设计最高奖。

34 1998年3月4日 (农历二月初六),瓦杰帕伊当选印度新总理。

35 2000年3月4日 (农历正月廿九),中国物理学家,被誉为中国物理学之父的吴大猷逝世。

36 2002年3月4日 (农历正月廿一),中国耕作学创始人之一沈学年逝世。

37 2003年3月4日 (农历二月初二),菲律宾一国际机场发生炸弹爆炸,造成至少19人死亡。

38 2003年3月4日 (农历二月初二),中国《2001-2002中国城市发展报告》首次评估城市。

39 2005年3月4日 (农历正月廿四),胡锦涛在北京提出新形势下发展两岸关系的四点意见。

40 2006年3月4日 (农历二月初五),胡锦涛在全国政协分组讨论中提出“八荣八耻”论述。

41 在1440年前的今天,0581年3月4日 (农历二月十四),隋文帝杨坚取代北周即帝位。

百度统计 站长统计

©2018-2021 www.ntbk8.cn. All rights reserved.  蜀ICP备18006425号

友情链接:  若岚博客  vipbic  卢松松博客  快云vps  Geticsen  聚宝盆  飞之梦工作室  7分钟课堂  提交友链