使用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', //最小視圖
});

 視圖部分源碼

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM