单选年
代码
<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>