Как записать даты range datapicker в 2 инпута?

406

05 февраля 2019, 14:30

Нужно реализовать такой календарь, использую плагин http://t1m0n.name/air-datepicker/docs/index-ru.html датапикера, но не могу понять как записать даты в два инпута? подскажите плиз

Answer 1

Представляю вам два варианта

Вариант первый :

$('#start_one').datepicker({  
  onSelect: function (fd, d, picker) {  
    $("#start_one").val(fd.split("-")[0]); 
    $("#end_one").val(fd.split("-")[1]); 
  } 
});

.one { 
  width:100%; 
  margin: 10px; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>Date</title> 
   
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css" /> 
 
</head> 
<body> 
 
  <div class="one"> 
    <label for="start_one">С:</label> 
    <input type="text" id="start_one" data-range="true" data-multiple-dates-separator=" - " class="datepicker-here"/> 
    <label for="start_one">До:</label> 
    <input type='text' id='end_one'> 
  </div> 
  
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/i18n/datepicker.en.min.js"></script> 
</body> 
</html>

Вариант второй :

var $start = $('#start'), 
$end = $('#end'); 
 
$start.datepicker({ 
  onSelect: function (fd, date) { 
    $end.data('datepicker') 
    .update('minDate', date); 
 
    $end.focus(); 
  } 
}) 
$end.datepicker({ 
  onSelect: function (fd, date) { 
    $start.data('datepicker') 
    .update('maxDate', date) 
  } 
})

.two{ 
  width:100%; 
  margin: 10px; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>Date</title> 
   
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css" /> 
 
</head> 
<body> 
  
  <div class="two"> 
    <label for="start">С:</label> 
     <input type='text' id='start'> 
    <label for="end">До:</label> 
     <input type='text' id='end'> 
  </div> 
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/i18n/datepicker.en.min.js"></script> 
</body> 
</html>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Рефакторинг фильтрации

Подскажите, как можно отрефакторить такой метод фильтрации:

197

javascript

Переключение между классами

Не могу разобраться, как удалить class="open" у class="options"Когда раскрыт select при клике на другой select, тот который открыт, закрывался, а на который нажали,...

209

javascript

js. Проверка на тип данных

Верна ли эта запись? Сам понимаю, что скорее всего нетКак правильно оформить проверку на тип данных на чистом js?

189

javascript

Element type is invalid: expected a string or a class/function but got: object

Моя библиотека:

226