资讯专栏INFORMATION COLUMN

移动端 jQuery日期插件---zepto.mdater (底部弹出层)

FingerLiu / 2530人阅读

摘要:在使用日期插件时,一般情况下是点击标签触发弹出层,把选中的日期渲染到该标签如果是点击一个图片,把选中日期渲染到另一个标签内怎么操作呢如果页面有个输入框呢类似于这样其实不难,只要在插件和页面中添加一些代码即可预定日期预订票仅当日有效预定日期预

在使用zepto.mdater日期插件时,一般情况下是点击input标签触发弹出层,把选中的日期渲染到该标签:

如果是点击一个图片,把选中日期渲染到另一个标签内怎么操作呢?如果页面有2个输入框呢?类似于这样:

其实不难,只要在插件zepto.mdater.js和页面js中添加一些代码即可:
html:

预定日期

预定日期

因为2个日期框都要调取zepto.mdater.js插件,当你点击其中一个,弹出日历时,插件js接收到的是2个span,,选中日期会同时渲染到2个框内:

只需在页面js写2行代码即可:

js代码:

然后在日期渲染成功后,把title移除了,代码在插件zepto.mdater.js中:
zepto.mdater.js:

结果:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/56743.html

相关文章

  • 移动 jQuery日期插件---zepto.mdater (底部出层)

    摘要:在使用日期插件时,一般情况下是点击标签触发弹出层,把选中的日期渲染到该标签如果是点击一个图片,把选中日期渲染到另一个标签内怎么操作呢如果页面有个输入框呢类似于这样其实不难,只要在插件和页面中添加一些代码即可预定日期预订票仅当日有效预定日期预 在使用zepto.mdater日期插件时,一般情况下是点击input标签触发弹出层,把选中的日期渲染到该标签: showImg(https://...

    geekzhou 评论0 收藏0
  • js 遮罩效果

    摘要: -------------------------------tipswindown.js------------------------------ ///------------------------------------------------------------------------- //jQuery弹出窗口 By Await [2009-11-22] //-...

    li21 评论0 收藏0
  • js 遮罩效果

    摘要: -------------------------------tipswindown.js------------------------------ ///------------------------------------------------------------------------- //jQuery弹出窗口 By Await [2009-11-22] //-...

    caige 评论0 收藏0
  • js 遮罩效果

    摘要: -------------------------------tipswindown.js------------------------------ ///------------------------------------------------------------------------- //jQuery弹出窗口 By Await [2009-11-22] //-...

    gnehc 评论0 收藏0
  • js 遮罩效果

    摘要: -------------------------------tipswindown.js------------------------------ ///------------------------------------------------------------------------- //jQuery弹出窗口 By Await [2009-11-22] //-...

    yexiaobai 评论0 收藏0

发表评论

0条评论

FingerLiu

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<