bootstrapタイムセレクタ
40631 ワード
bootstrapタイムセレクタ
// :
<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='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>
//css
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
//js
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/moment-with-locales.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
リンク:https://www.17sucai.com/pins/30203.html