单选年

代码

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date'>
                    <input type='text' class="form-control"  id='datetimepicker1' />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker({ viewMode: 'years', format: 'YYYY'});
            });
        </script>
    </div>
</div>

---

单选年月

代码

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' >
                    <input type='text' class="form-control" id='datetimepicker2' />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker2').datetimepicker({
                    locale: 'zh-cn',viewMode: 'months',format: 'YYYY/MM'
                });
            });
        </script>
    </div>
</div>

---

单选年月日

代码

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' >
                    <input type='text' class="form-control" id='datetimepicker3'/>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker3').datetimepicker({
                    locale: 'zh-cn',viewMode: 'days',format: 'YYYY/MM/DD'
                });
            });
        </script>
    </div>
</div>

---

单选年月日时

代码

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <input type='text' class="form-control" id='datetimepicker4'/>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker4').datetimepicker({locale: 'zh-cn'});
            });
        </script>
    </div>
</div>

---

单选时

代码

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <input type='text' class="form-control" id='datetimepicker4a'/>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker4a').datetimepicker({locale: 'zh-cn',format: 'LT'});
            });
        </script>
    </div>
</div>

---

双选时与时

代码

<div class="container">
    <div class='col-md-4'>
        <div class="form-group">
            <div class='input-group date' >
                <input type='text' class="form-control" id='datetimepicker6'/>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-md-4'>
        <div class="form-group">
            <div class='input-group date' >
                <input type='text' class="form-control" id='datetimepicker7'/>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker6').datetimepicker({locale: 'zh-cn', format: 'LT'});
        $('#datetimepicker7').datetimepicker({locale: 'zh-cn', format: 'LT'});
        $("#datetimepicker6").on("dp.change",function (e) {
            $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker7").on("dp.change",function (e) {
            $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
        });
    });
</script>

---

双选年与年

代码

<div class="container">
    <div class='col-md-4'>
        <div class="form-group">
            <div class='input-group date' >
                <input type='text' class="form-control" id='datetimepicker8'/>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-md-4'>
        <div class="form-group">
            <div class='input-group date' >
                <input type='text' class="form-control" id='datetimepicker9'/>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker8').datetimepicker({viewMode: 'years', format: 'YYYY'});
        $('#datetimepicker9').datetimepicker({viewMode: 'years', format: 'YYYY'});
        $("#datetimepicker8").on("dp.change",function (e) {
            $('#datetimepicker9').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker9").on("dp.change",function (e) {
            $('#datetimepicker8').data("DateTimePicker").maxDate(e.date);
        });
    });
</script>

---

双选年月与年月

代码

<div class="container">
    <div class='col-md-4'>
        <div class="form-group">
            <div class='input-group date' >
                <input type='text' class="form-control" id='datetimepicker10'/>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-md-4'>
        <div class="form-group">
            <div class='input-group date' >
                <input type='text' class="form-control" id='datetimepicker11'/>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker10').datetimepicker({locale: 'zh-cn', viewMode: 'months', format: 'YYYY/MM'});
        $('#datetimepicker11').datetimepicker({locale: 'zh-cn', viewMode: 'months', format: 'YYYY/MM'});
        $("#datetimepicker10").on("dp.change",function (e) {
            $('#datetimepicker11').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker11").on("dp.change",function (e) {
            $('#datetimepicker10').data("DateTimePicker").maxDate(e.date);
        });
    });
</script>

---

双选年月日与年月日

代码

<div class="container">
    <div class='col-md-4'>
        <div class="form-group">
            <div class='input-group date' >
                <input type='text' class="form-control" id='datetimepicker12'/>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-md-4'>
        <div class="form-group">
            <div class='input-group date' >
                <input type='text' class="form-control" id='datetimepicker13'/>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker12').datetimepicker({locale: 'zh-cn', viewMode: 'days', format: 'YYYY/MM/DD'});
        $('#datetimepicker13').datetimepicker({locale: 'zh-cn', viewMode: 'days', format: 'YYYY/MM/DD'});
        $("#datetimepicker12").on("dp.change",function (e) {
            $('#datetimepicker13').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker13").on("dp.change",function (e) {
            $('#datetimepicker12').data("DateTimePicker").maxDate(e.date);
        });
    });
</script>

---

双选年月日与年月日时

代码

<div class="container">
    <div class='col-md-4'>
        <div class="form-group">
            <div class='input-group date' >
                <input type='text' class="form-control" id='datetimepicker14'/>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-md-4'>
        <div class="form-group">
            <div class='input-group date' >
                <input type='text' class="form-control" id='datetimepicker15'/>
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker14').datetimepicker({locale: 'zh-cn'});
        $('#datetimepicker15').datetimepicker({locale: 'zh-cn'});
        $("#datetimepicker14").on("dp.change",function (e) {
            $('#datetimepicker15').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker15").on("dp.change",function (e) {
            $('#datetimepicker14').data("DateTimePicker").maxDate(e.date);
        });
    });
</script>