Этот компонент выбора диапазона дат для Twitter Bootstrap создает выпадающее меню, с помощью которого пользователь может выбирать необходимый интервал дат. Данный скрипт хорошо подходит для интерфейсов различных отчетов.
Если скрипт вызывать без параметров, то в меню будут показываться два календаря для выбора начальной и конечно даты. Кроме того будет доступен для выбора список с самыми распространенными диапазонами (например: вчера, сегодня, эта неделя или месяц). Если у вас есть текстовое окно, то можно будет сделать так, чтобы при выборе из этого списка, текст автоматически копировался в этой окно. И конечно, вы сможете настраивать функции обратного вызова по своему вкусу.
Использование
Этот компонент основан на Twitter Bootstrap,
Datejs и jQuery.
Запуск.
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="date.js"></script> <script type="text/javascript" src="daterangepicker.js"></script> <link rel="stylesheet" type="text/css" href="bootstrap.css" /> <link rel="stylesheet" type="text/css" href="daterangepicker.css" /> <script type="text/javascript"> $(document).ready(function() { $('input[name="daterange"]').daterangepicker(); }); </script> |
Дополнительные опции:
- Как только будет происходить выбор дат, будет исполняться обработчик обратного вызова
- Инициализация определенных дат начала и конца в календарях
- Ограничение выбора минимальной и максимальной дат
- Локализация всех надписей
- Запуск календарной недели на любой день недели
- Переопределение направления выпадающего меню
- Установка определенного формата даты для анализа и печати
- Показ порядкового номера недели
Синтаксис всех опций можно найти в файле examples.html.