Bootstrap DateTimePicker - пример выбора только месяца из выпадающего меню.
В данном примере будет продемонстрировано, как сделать выпадающее меню выбора только месяца, без числа, с использованием bootstrap-datetimepicker.
Итак, для реализации задуманного нам понадобятся компоненты:
bootstrap — сам bootstrap
jquery — Библиотека JQuery
moment — Библиотека для работы со временем, в нашем примере будет использована moment-with-locales
bootstrap-datetimepicker — Библиотека выпадающего меню выбора даты
В дополнение, в примере будут использованы библиотеки respond.js и html5shiv.min.js для того, чтобы наша затея корректно отображалась и в IE.
Исходный код HTML (index.html):
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="js/moment-with-locales.min.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<!--[if lt IE 9]-->
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.js"></script>
<!--[endif]-->
</head>
<body>
<div class="container">
<div class="form-group">
<div class='input-group date' id='date_select'>
<input type='text' class="form-control" id="datetp_val" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script src="js/dpicker.js"></script>
</body>
</html>
Исходный jаvascript код (dpicker.js):
// Параметры DateTimePicker-а
$(function () {
$('#date_select').datetimepicker({
defaultDate: new Date(),
viewMode: 'months',
format: 'MM.YYYY',
locale: 'ru'
});
});
// Исправление бага с месяцем в выборе даты
$("#date_select").on('dp.hide', function (event) {
setTimeout(function () {
$("#date_select").data('DateTimePicker').viewMode('months');
}, 1);
});
Должно получиться примерно так:
Спасибо за внимание. :)