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>


Исходный JavaScript код (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);
});


Должно получиться примерно так:

Bootstrap-DateTimePicker

Исходный код примера можно скачать здесь: bootstrap_dt_month.zip

Спасибо за внимание. :)


0 комментариев

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.