[Web開發]用bootstrap的日期選擇器

一個下午都在找插件怎麼用，終於弄好後覺得有必要寫篇筆記防止下次再浪費時間了

參考文章：
（他這個並不能用 不過有些傳值的方法還是可以學習下的）
https://blog.csdn.net/qq_33368846/article/details/82223676
官網
https://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

1.首先引入文件（官網中就可以下載）

<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>

2.html內容

<div class="container">
    <form action="" class="form-horizontal"  role="form">
        <fieldset>
			<div class="form-group">
                <label for="dtp_input2" class="col-md-2 control-label">起始時間</label>
                <div class="input-group date form_date col-md-5" data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" id="start-time">
                    <input class="form-control" size="16" type="text" value="" readonly id="start_time">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
					<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
				<input type="hidden" id="dtp_input2" value="" /><br/>
            </div>
            <div class="form-group">
                <label for="dtp_input2" class="col-md-2 control-label">結束時間</label>
                <div class="input-group date form_date col-md-5" data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" id="end-time">
                    <input class="form-control" size="16" type="text" value="" readonly id="end_time">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
                <input type="hidden" id="dtp_input2" value="" /><br/>
            </div>
			
        </fieldset>
    </form>
</div>

3.js代碼

<script type="text/javascript">
	$('.form_date').datetimepicker({
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		minView: 2,
		forceParse: 0
    });
    $('#start-time').datetimepicker().on('changeDate', function(ev){
        var startTime = $("#start_time").val();
        console.log(startTime);
});
    $('#end-time').datetimepicker().on('changeDate', function(ev){
        var endTime = $("#end_time").val();
        console.log(endTime);
});
</script>