Создание указателя даты с опциями выбора месяца или диапазона дат

Question

Я работаю над веб-приложением во флеше и создаю шаблоны в HTML / JS для внешнего интерфейса.Мне нужен инструмент выбора даты, который позволит пользователю выбрать определенный диапазон дат, ИЛИ позволить пользователю выбрать диапазон месяцев.

Пожалуйста, смотрите изображение ниже.

Если пользователь нажимает «Месяц» внизу, ему будет предоставлена ​​возможность выбрать начальный и конечный месяц.Но если пользователь нажимает «настраиваемый диапазон», как он показывает в данный момент, пользователь может выбирать между двумя конкретными датами и прокручивать месяцы.

Есть какие-нибудь идеи?

Редактировать: Чтобы уточнить, я спрашиваю, есть ли что-нибудь, что соответствовало бы моим потребностям, или мне нужно создать средство выбора даты с нуля?

Answer 1

Для новых браузеров вы можете использовать HTML <input type="date">.Это, вероятно, самое простое, но не позволяет выбрать диапазон данных.

<label for="start">Start date:</label>

<input type="date" id="start" name="trip-start"
       value="2018-07-22"
       min="2018-01-01" max="2018-12-31">

Существует несколько сборщиков данных HTML / CSS / JS:

• jQuery UI
• Bootstrap
• Материал
• Сборщик данных (jQuery)
• Datepicker (Bootstrap)
• Средство выбора диапазона данных

Также есть другие сборщики данных .

Некоторые из них не позволяютиспользовать диапазон дат, но некоторые из них можно настроить.Есть несколько советов, как сделать это в зависимости от выбранного источника данных.

Один, который просто разрешает диапазон, - это Выбор диапазона дат .Вы должны включить файлы jQuery, Moment.js и Date Range Picker на свою веб-страницу, а затем настроить их с помощью JavaScript.

$(function() {
  $('input[name="daterange"]').daterangepicker({
    opens: 'left'
  }, function(start, end, label) {
    console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  });
});

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />


<input type="text" name="daterange" value="01/01/2018 - 01/15/2018" />