目次

転載住所

具体的な書き方

転載先

https://www.cnblogs.com/dazhangli/p/9002329.html導入文書の説明に係るイベントの書き方

具体的な書き方

まず日付コントロールを使用します(デフォルトではBootstrapフレームワークのjsとcssが導入されています)

cssファイル

を導入

 
	<link rel="stylesheet" href="${request.contextPath}/public/adminlte/bower_components/bootstrap/css/bootstrap-datepicker.min.css">
	<link rel="stylesheet" href="${request.contextPath}/public/adminlte/bower_components/bootstrap/css/bootstrap-datetimepicker.min.css">

jsファイル

を導入

<#--bootstrap    -->
	<script src="${request.contextPath}/public/adminlte/bower_components/bootstrap/js/bootstrap-datepicker.min.js">script>
	<script src="${request.contextPath}/public/adminlte/bower_components/bootstrap/js/bootstrap-datetimepicker.min.js">script>
	<script src="${request.contextPath}/public/adminlte/bower_components/bootstrap/js/bootstrap-datetimepicker.zh-CN.js">script>
	<script src="${request.contextPath}/public/adminlte/bower_components/bootstrap/js/bootstrap-datepicker.zh-CN.min.js">script>

htmlページ

<form id="formSearch" class="form-horizontal">

                                <div class="form-group" style="margin-top:15px">
                                    <label class="control-label col-sm-1" for="txt_search_start">    label>
                                    <div class="col-sm-3">
                                        <div class='input-group date'>
                                            <input type="text" class="form-control" name="start" id="search_start" placeholder="    "/>
                                            <span class="input-group-addon"> span>
                                            <input type="text" class="form-control" name="end" id="search_end" placeholder="    "/>
                                        div>
                                    div>
                                    <div class="col-sm-2">
                                        <div class="btn-group" role="group" aria-label="...">
                                            <button type="button" class="btn btn-primary" id="search">  button>
                                            <button type="button" class="btn btn-default" id="reset">  button>
                                        div>
                                    div>
                                div>
                            form>

js書き方

<script>
$(function() {
    /*    */
    /*      */
    $("#search_start").datepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd',
        todayBtn: 'linked',
        clearBtn: true,
        todayHighlight: true,
        autoclose: true
    }).on('changeDate', function (e) {
        var startTime = e.date;
        $("#search_end").datepicker('setStartDate', startTime);
    });
    $("#search_end").datepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd',
        todayBtn: 'linked',
        clearBtn: true,
        todayHighlight: true,
        autoclose: true
    }).on('changeDate', function (e) {
        var endTime = e.date;
        $("#search_start").datepicker('setEndDate', endTime);
    });


    $('.input-date').datepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd',
        todayBtn: 'linked',
        clearBtn: true,
        todayHighlight: true,
        autoclose: true
    }).on('hide', function (e) {
        e.stopPropagation();//                  
    });

	//=====================             ==========================
	//         jquery-latest.js
    $('.end-date').datepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd',
        todayBtn: 'linked',
        clearBtn: true,
        startDate: new Date(),
        todayHighlight: true,
        autoclose: true
    }).on('hide', function (e) {
        e.stopPropagation();//                  
    });
});
script>