• 使用Bootstrap插件datapicker获取时间


    引入css和js

    <link rel="stylesheet" href="/${appName}/commons/css/datapicker/datepicker3.css" type="text/css"></link>
    <script type="text/javascript" src="/${appName}/commons/js/datapicker/bootstrap-datepicker.js"></script>

    Html及Js

    <span style="position: relative; z-index: 9999;">   <!--当在model弹框中需要加此span-->
        <input type="text" value="" class="form-control" name="time" id="time_add" tabindex="4" />
    </span>
    
    /*显示改为中文*/
    $.fn.datepicker.dates['cn'] = {   //切换为中文显示
        days: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        daysShort: ["日", "一", "二", "三", "四", "五", "六", "七"],
        daysMin: ["日", "一", "二", "三", "四", "五", "六", "七"],
        months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        today: "今天",
        clear: "清除"
    };
    /*初始化时间控件*/
    $('#time_add').datepicker({
        autoclose: true, //自动关闭
        beforeShowDay: $.noop,    //在显示日期之前调用的函数
        calendarWeeks: false,     //是否显示今年是第几周
        clearBtn: false,          //显示清除按钮
        daysOfWeekDisabled: [],   //星期几不可选
        endDate: Infinity,        //日历结束日期
        forceParse: true,         //是否强制转换不符合格式的字符串
        format: 'yyyy-mm-dd',     //日期格式
        keyboardNavigation: true, //是否显示箭头导航
        language: 'cn',           //语言
        orientation: "auto",      //方向
        rtl: false,
        startDate: -Infinity,     //日历开始日期
        startView: 0,             //开始显示
        todayBtn: false,          //今天按钮
        todayHighlight: false,    //今天高亮
        weekStart: 0              //星期几是开始
       startView: 'months', //开始视图 视图类 1代表years 2代表months 默认值0代表day
       maxViewMode:'years', //最大视图
       minViewMode:'months', //最小视图
    });

     视图部分源码

  • 相关阅读:
    ubuntu开机启动
    我的linux之路
    继承
    oracle 10g win7 win8 下的安装
    Java 安全检测
    BigDecimal 四舍五入
    Java Map 便利
    java split . |
    java 爬虫 Jsoup
    获取当前路径
  • 原文地址:https://www.cnblogs.com/aeolian/p/9214152.html
Copyright © 2020-2023  润新知