bootstrap 時間控件

幾種bootstrap時間控件總結記錄

githup地址：https://github.com/suidagang/bootsrapdatetimepicker

示例

包部分

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<link href="./bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="./bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
<script src="./bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<!-- 時間範圍 -->
<script type="text/javascript"
    src="./jq22daterangepicker893120160707/daterangepicker20160707/moment.min.js"></script>
<script type="text/javascript"
    src="./jq22daterangepicker893120160707/daterangepicker20160707/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css"
    href="./jq22daterangepicker893120160707/daterangepicker20160707/daterangepicker-bs3.css" />

html部分

<div style="overflow: hidden;width: 100%;">
    <div style="width: 50%;float: left;">
        <button type="button" class="btn btn-primary test">年月日</button>
        <div class='input-group date form_date test' style="width:300px;">
            <input name="startTm" id="datetimepicker_day" placeholder="年月日" type='text'
                class="form-control input-sm" readonly="readonly" />
            <span class="input-group-addon input-sm">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
        <button type="button" class="btn btn-primary test">年月形式</button>
        <div class='input-group date form_date test' style="width:300px;">
            <input name="startTm" id="datetimepicker_month" placeholder="年月" type='text'
                class="form-control input-sm" readonly="readonly" />
            <span class="input-group-addon input-sm">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
        <button type="button" class="btn btn-primary test">年形式</button>
        <div class='input-group date form_date test' style="width:300px;">
            <input name="startTm" id="datetimepicker_year" placeholder="年" type='text' class="form-control input-sm"
                readonly="readonly" />
            <span class="input-group-addon input-sm">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
    <div style="width: 50%;float: left;">
        <button type="button" class="btn btn-primary test">年月日時分</button>
        <div class='input-group date form_date test' style="width:300px;">
            <input name="startTm" id="datetimepicker_year_time" placeholder="年月日時分" type='text'
                class="form-control input-sm" readonly="readonly" />
            <span class="input-group-addon input-sm">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
        <button type="button" class="btn btn-primary test">年月日時間週期</button>
        <div class='input-group date form_date test' style="width:300px;">
            <input name="daterange" placeholder="年月日時間週期" type='text' class="form-control input-sm"
                readonly="readonly" />
            <span class="input-group-addon input-sm">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
        <button type="button" class="btn btn-primary test">年月日時分時間週期</button>
        <div class='input-group date form_date test' style="width:300px;">
            <input id="rangeTime" placeholder="年月日時分時間週期" type='text' class="form-control input-sm"
                readonly="readonly" />
            <span class="input-group-addon input-sm">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>

年月日

//選擇年月日的       
$('#datetimepicker_day').datetimepicker({
    format: 'yyyymmdd',
    weekStart: 1,
    autoclose: true,
    startView: 2,
    minView: 2,
    forceParse: false,
    language: 'zh-CN'
});

年月

//選擇年月   
$('#datetimepicker_month').datetimepicker({
    language: 'zh-CN',
    format: 'yyyymm',
    weekStart: 1,
    autoclose: true,
    startView: 3,
    minView: 3,
    forceParse: false
});

年

//選擇年  
$('#datetimepicker_year').datetimepicker({
    format: 'yyyymm',
    weekStart: 1,
    autoclose: true,
    startView: 4,
    minView: 4,
    forceParse: false,
    language: 'zh-CN'
});

年月日時分

$("#datetimepicker_year_time").datetimepicker({
    language: 'zh-CN',
    autoclose: true,//選中以後自動隱藏日期選擇框
    clearBtn: false,//清除按鈕
    todayBtn: true,//今日按鈕
    format: 'yyyy-mm-dd hh:ii:ss',
    startView: 'month',// 進來是月
    minView: 0,// 能夠看到小時
    maxView: 1,
    minuteStep: 5, //分鐘間隔爲1分
    todayHighlight: false,
    forceParse: true,
    endDate: new Date()
}).on('changeDate', function (ev) {
    if (ev.date) {
        $("#eDatePicker").datetimepicker('setStartDate', new Date(ev.date.valueOf()))
    } else {
        $("#eDatePicker").datetimepicker('setStartDate', null);
    }
});

年月日時間範圍

$('input[name="daterange"]').daterangepicker();

年月日時分時間範圍

//年月日時分時間範圍
$('#rangeTime').daterangepicker({
        timePicker: true,
        timePickerIncrement: 1,
        format: 'MM/DD/YYYY h:mm:ss A'
    }, function (start, end, label) {
        console.log(start.toISOString(), end.toISOString(), label);
});