[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>