Bootstrap DateTimePicker - пример выбора только месяца из выпадающего меню.

HTML, CSS и JavaScript - Примеры, уроки, описания

В данном примере будет продемонстрировано, как сделать выпадающее меню выбора только месяца, без числа, с использованием 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

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

bootstrap datetime datetimepicker bootstrap-datetimepicker JavaScript HTML css jQuery moment пример example

Roman 03 May 2018, 09:48 5517 0 0 0

Оставить первый комментарий:

Работа с Postgresql в C#

Не так давно занялся разработкой приложения на C# работающего на базе PostreSQL, появилась информаци (читать далее...)

691  
Работа со строками в Oracle (PL/SQL)

Основные способы обработки строковых значений в Oracle. В этой публикации я приведу основные функции (читать далее...)

615  
Пример простого калькулятора на Java Script (исключительно в учебных целях).

В этой публикации продемонстрировано, как при помощи bootstrap и довольно простого кода на JavaScrip (читать далее...)

70  
JavaScript - Основы, как это работает и как тестировать (Часть 2).

В предыдущей части мы уже рассмотрели как добавить и отладить JavaScript код на страницу с использов (читать далее...)

41  
JavaScript - Основы, как это работает и как тестировать.

Удивительная штука этот JavaScript! Раньше не доводилось им заниматься, но вот случилось. Добрый чел (читать далее...)

23