浅谈amaze-ui中datepicker和datetimepicker注意的几点


Posted in HTML / CSS onAugust 21, 2020

点1:参考文档不能选错,amaze的默认文档是http://amazeui.shopxo.net/getting-started/,但是当我们要使用datetimepicker是就要使用https://github.com/amazeui/datetimepicker,
这就是我想吐槽的地方了,amaze竟然把datetimepicker放在一个不起眼的小角落里,这是大家需要注意的地方。

点2:amaze-ui的日期时间插件是真的不好看,可扩展性不太好,特别是在对时间进行控制的时候很麻烦。在我们的项目中能不用这个坚决不用,我这一次是在别人用了之后才使用这个的,
后来发现真费劲。

点3:三时间(datetimepicker)校验:

效果图:

浅谈amaze-ui中datepicker和datetimepicker注意的几点

jsp关键代码:

<div class="inputItem">
    <div class="inputName">制卡时间</div>
     <input type="text" id="gender" name="gender" class="am-form-field data-input" readonly required placeholder="请选择">
 </div>
 <div class="inputItem">
     <div class="inputName">生效时间</div>
     <input type="text" id="startDate" name="startDate" class="am-form-field data-input" readonly required placeholder="请选择">
 </div>
 <div class="inputItem">
     <div class="inputName">过期时间</div>
     <input type="text" id="expDate" name="expDate" class="am-form-field data-input" readonly required placeholder="请选择">
 </div>

js校验代码:
为了使大家看的清楚,这里我使用一种比较巧妙的手法,因为是三日期校验,设置开始时间参数只能是setStartTime,设置结束参数只能是setEndTime,所以不能在jq的入口函数进行初始化工作,需要在jq的入口函数中调用两个函数进行初始化,代码如下:

initDatePicker = function () {
   //日期插件初始化
   $('#gender').datetimepicker({
       language: 'zh-CN',
       format: 'yyyy-mm-dd hh:ii:ss',
       minView: 2
       //pickerPosition: "bottom-left"
   }).on("changeDate", function (ev) {  //值改变事件
       if (ev.date) {
           $("#startDate").datetimepicker('setStartDate', new Date(ev.date.valueOf()));
       } else {
           $("#startDate").datetimepicker('setStartDate', null);
       }
   });
   $('#startDate').datetimepicker({
       language: 'zh-CN',
       format: 'yyyy-mm-dd hh:ii:ss',
       minView: 2
       //pickerPosition: "bottom-left"
   }).on("changeDate", function (ev) {
       if (ev.date) {
           $("#gender").datetimepicker('setEndDate', new Date(ev.date.valueOf()));
       } else {
           $("#gender").datetimepicker('setEndDate', new Date());
       }
   });
   $('#gender,#startDate').click(function () {
       $(this).datetimepicker("show");
   })
};
initDatePicker1 = function () {
    $('#startDate').datetimepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd hh:ii:ss',
        minView: 2
        //pickerPosition: "bottom-left"
    }).on("changeDate", function (ev) {
        if (ev.date) {
            $("#expDate").datetimepicker('setStartDate', new Date(ev.date.valueOf()));
        } else {
            $("#expDate").datetimepicker('setStartDate', new Date());
        }
    });
    $('#expDate').datetimepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd hh:ii:ss',
        minView: 2
        //pickerPosition: "bottom-left"
    }).on("changeDate", function (ev) {
        if (ev.date) {
            $("#startDate").datetimepicker('setEndDate', new Date(ev.date.valueOf()));
        } else {
            $("#startDate").datetimepicker('setEndDate', null);
        }
    });
    $('#startDate,#expDate').click(function () {
        $(this).datetimepicker("show");
    })
}

注意datetimepicker中的minView的用法,它是控制插件的最小显示显示视图,minView=2表示最小的选择是多好号,没有时间的选择了,默认情况是选择到秒的;而datepicker中对应的设置是minViewMode,这里就把我坑了一次。

最后进行补充,在开发中如果用amaze的时间插件,我建议统一使用datetimepicker,他相对datepicker更具通用性,在时间范围的控制上更灵活,我们只需使用minView进行控制最小显示就行。

到此这篇关于浅谈amaze-ui中datepicker和datetimepicker注意的几点的文章就介绍到这了,更多相关amaze-ui中datepicker和datetimepicker内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
Mar 15 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 #HTML / CSS
amazeui 验证按钮扩展的实现
Aug 21 #HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 #HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 #HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 #HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 #HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 #HTML / CSS
You might like
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
javascript replace()正则替换实现代码
2010/02/26 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
JS画线(实例代码)
2013/11/20 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
layui分页效果实现代码
2017/05/19 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
python 排列组合之itertools
2013/03/20 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
建议书标准格式
2014/03/12 职场文书
公益广告标语
2014/06/19 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
2014年网管工作总结
2014/12/11 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书