• 利用bootstrap-datetimepicker实日历插件


    由于项目中需要获取一个时间值,手动输入的话比较Low,这里引用了bootstrap-datetimepicker模块来实现。

    1、首先,下载该模块并引用。(官网:http://www.bootcss.com/p/bootstrap-datetimepicker)

    git clone git://github.com/smalot/bootstrap-datetimepicker.git

     在资源页面中添加引用:

    <link rel="stylesheet" href="/static/alpha/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css">
    ...
    
    <script src="/static/alpha/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script src="/static/alpha/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="/static/alpha/dist/js/server_handle.js"></script>  #自己定义的js,要写在以上资源之下,否则会提示js中定义的function找不到。

    2、项目页面中定义时间输入框及js样式:

    <input name="expirdate" class="serverExpirDate" type="text" placeholder="请选择日期">
    文件: server_handle.js
    
    $(".serverExpirDate").datetimepicker({
        format: 'yyyy-mm-dd',
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        statView: 2,
        todayHighlight: 1,
        minView: 2,
        clearBtn: true,
        forceParse: true,
        showMeridian : true
    });

    注:

    关于datetimepicker参数的说明:

        format: "yyyy-mm-dd hh:ii:ss",//设置时间格式,默认值: 'mm/dd/yyyy'
        weekStart : 0, //一周从哪一天开始。0(星期日)到6(星期六),默认值0
        startDate : "2013-02-14 10:00",//可以被选择的最早时间
        endDate : "2016-02-14 10:00",//可以被选择的最晚时间
        daysOfWeekDisabled : "0,6",//禁止选择一星期中的某些天,例子中这样是禁止选择周六和周日
        autoclose : true,//当选择一个日期之后是否立即关闭此日期时间选择器
        startView : 2,//点开插件后显示的界面。0、小时1、天2、月3、年4、十年,默认值2
        minView : 0,//插件可以精确到那个时间,比如1的话就只能选择到天,不能选择小时了
        maxView:4,//同理
        todayBtn : true,//是否在底部显示“今天”按钮
        todayHighlight : true,//是否高亮当前时间
        keyboardNavigation : true,//是否允许键盘选择时间
        language : 'zh-CN',//选择语言,前提是该语言已导入
        forceParse : true,//当选择器关闭的时候,是否强制解析输入框中的值。也就是说,当用户在输入框中输入了不正确的日期,选择器将会尽量解析输入的值,并将解析后的正确值按照给定的格式format设置到输入框中
        minuteStep : 5,//分钟的间隔
        pickerPosition : "bottom-right",//显示的位置,还支持bottom-left
        viewSelect : 0,//默认和minView相同
        showMeridian : true,//是否加上网格,true的话显示上下午
        initialDate : "2015-02-14 10:00"//初始化的时间
  • 相关阅读:
    sqlhelper使用指南
    大三学长带我学习JAVA。作业1. 第1讲.Java.SE入门、JDK的下载与安装、第一个Java程序、Java程序的编译与执行 大三学长带我学习JAVA。作业1.
    pku1201 Intervals
    hdu 1364 king
    pku 3268 Silver Cow Party
    pku 3169 Layout
    hdu 2680 Choose the best route
    hdu 2983
    pku 1716 Integer Intervals
    pku 2387 Til the Cows Come Home
  • 原文地址:https://www.cnblogs.com/ahaii/p/9555554.html
Copyright © 2020-2023  润新知