jquery - 插件 - 日曆時間選擇

<link href="../Content/dist/css/datepicker.css" rel="stylesheet" type="text/css" />
<link href="../Content/dist/css/select2.css" rel="stylesheet" type="text/css" />
//時間選擇
<input class="datepicker-here form-control date_picker" data-language="zh" placeholder="請選擇" type="text" value="">
//時間段選擇
<input class="datepicker-here form-control date_picker"  data-language="zh" data-range="true" data-multiple-dates-separator=" - " placeholder="請選擇時間段">
//時間段月份選擇
<input class="datepicker-here form-control date_picker"  data-language="zh" data-range="true" data-multiple-dates-separator=" - " data-min-view="months" data-view="months" data-date-format="yyyy-mm" placeholder="請選擇時間段”>

// 時分時間段
<input class="datepicker-here form-control date_picker date_picker-time" data-language="zh" data-range="true" data-multiple-dates-separator=" - " placeholder="請選擇時間段">
// 時間組件時分顯示
$(“.date_picker-time").datepicker({
    timepicker: true,
    // maxMinutes: 0,
    "time-format": 'hh:ii',
    language: "zh",
    startDate: new Date('2018-06-14 00:00:00'),
})

// 月時間段
    <input class="datepicker-here form-control date_picker" data-min-view="months" data-view="months" data-date-format="yyyy-mm" data-language="zh" data-range="true" data-multiple-dates-separator=" - " placeholder="請選擇時間段">
// 年時間段
    <input class="datepicker-here form-control date_picker" data-min-view="years" data-view="years" data-date-format="yyyy" data-language="zh" data-range="true" data-multiple-dates-separator=" - " placeholder="請選擇時間段">
<script src="../Scripts/dist/js/datepicker.js"></script>
<script src="../Scripts/dist/js/i18n/datepicker.zh.js"></script>
<script src="../Scripts/dist/js/select2.js"></script>

//時間下拉框位置過低時向上展開
$(".step-conright .date-input").on("click", function() {
    var boxTop = $(this).offset().top;
    var formTop = $(window).height()-260;
    if (boxTop > formTop) {
        var yuanTop = $(".datepicker.active").offset().top;
        var topVal = yuanTop - 290;
        $(".datepicker.active").css({"top": topVal});
        $(".-bottom-left- .datepicker--pointer, .-top-left- .datepicker--pointer").css({"top": "auto","bottom": "-5px"});
        $(".datepicker--pointer").css({"border-top": "none", "border-right": "none", "border-bottom": "1px solid #dbdbdb", "border-left": "1px solid #dbdbdb"});
    } else {
        $(".-bottom-left- .datepicker--pointer, .-top-left- .datepicker--pointer").css({"bottom": "auto","top": "-5px"});
        $(".datepicker--pointer").css({"border-top": "1px solid #dbdbdb", "border-right": "1px solid #dbdbdb", "border-bottom": "none", "border-left": "none"});
    }
});