Как отобразить несколько диапазонов даты между JQUERY DATE -- jquery пол Связанный проблема

How to display multiple date ranges between a date-range Jquery


6
vote

проблема

русский

HI У меня есть дата Ranger Picker на этом, я хочу отобразить все диапазоны даты, определяемые для определенного диапазона даты, как это:

Предположим, мой диапазон даты: 01/01 / 2017-01 / 07/20 2017 И у меня есть массив, все даты, которые определяются между вышеупомянутым диапазоном даты в DB.SO, как массив, как:

$ sub_dates = ['01 / 01/2017''02/01/2017'.......till 01/07/2017];

Так что, если я нажму на диапазон дата в диапазоне даты, мне нужно показать все эти определенные даты ($ sub_dates) на нем.

 <код> var sub_dates = ['01/01/2017','02/01/2017',.......till 01/07/2017];   $('.lot-calander1').daterangepicker({     beforeShowDay: function(date){     var string = $.daterangepicker.formatDate('yy-mm-dd', date);     return [ sub_dates.indexOf(string) == -1 ]  }   });    

Но это не отображает эту дату на дату диапазона Picker. Пожалуйста, помогите, что может быть проблемой

спасибо заранее

Английский оригинал

Hi I have a date ranger picker on this I want to display all the date ranges which is defined for a particular date-range as this:

Suppose my date range is: 01/01/2017-01/07/2017 and I have an array all the dates which is defined between for above date-range in db.So the array is like:

$sub_dates = ['01/01/2017','02/01/2017',.......till 01/07/2017];

So if I click on date range on date-range picker I need to show all these defined dates ($sub_dates ) on it.

var sub_dates = ['01/01/2017','02/01/2017',.......till 01/07/2017];   $('.lot-calander1').daterangepicker({     beforeShowDay: function(date){     var string = $.daterangepicker.formatDate('yy-mm-dd', date);     return [ sub_dates.indexOf(string) == -1 ]  }   });  

But it is not displaying these date on date-range picker. please assist what could be the issue

Thanks advance

</div
  

Список ответов

4
 
vote

 <Код> $(function() {    var sub_dates = ['01/01/2017','01/03/2017','01/25/2017', '02/01/2017'];    var sub_dates_date = sub_dates.map(function(b) {      return +(new Date(b));    });      $('input[name="daterange"]').daterangepicker({      isInvalidDate: function(a) {        return sub_dates_date.indexOf(+(new Date(a))) < 0;      }    });  });  
 <Код> .daterangepicker td.available {   color: red;   background-color: blue;  }    .daterangepicker td.available.start-date, .daterangepicker td.available.end-date {   color: green;   background-color: black;  }  
 <Код> <!-- Include Required Prerequisites -->  <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>  <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />     <!-- Include Date Range Picker -->  <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />  <input type="text" name="daterange" value="01/01/2017 - 01/31/2017" />  

Пожалуйста, обратите внимание: вы можете изменить цвет, сколько хотите .

Надеюсь, это поможет вам.

 

$(function() {    var sub_dates = ['01/01/2017','01/03/2017','01/25/2017', '02/01/2017'];    var sub_dates_date = sub_dates.map(function(b) {      return +(new Date(b));    });      $('input[name="daterange"]').daterangepicker({      isInvalidDate: function(a) {        return sub_dates_date.indexOf(+(new Date(a))) < 0;      }    });  });
.daterangepicker td.available {   color: red;   background-color: blue;  }    .daterangepicker td.available.start-date, .daterangepicker td.available.end-date {   color: green;   background-color: black;  }
<!-- Include Required Prerequisites -->  <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>  <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />     <!-- Include Date Range Picker -->  <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />  <input type="text" name="daterange" value="01/01/2017 - 01/31/2017" />

Please Note: You can change the color as you want.

Hope It will help you.

</div
 
 
1
 
vote

Это решение использует «InvalidDate», чтобы проверить на массиве дат и отключить их. Для простоты, а также для сравнения мы создаем новый массив для строки дат и сделайте их <код> integers . Вы можете заменить этот метод по мере необходимости.

 <Код> $(function() {    var sub_dates = ['01/01/2017','01/03/2017','01/25/2017', '02/01/2017'];    var sub_dates_date = sub_dates.map(function(b) {      return +(new Date(b));    });      $('input[name="daterange"]').daterangepicker({      isInvalidDate: function(a) {        return sub_dates_date.indexOf(+(new Date(a))) < 0;      }    });  });  
 <Код> <!-- Include Required Prerequisites -->  <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>  <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />     <!-- Include Date Range Picker -->  <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />    <input type="text" name="daterange" value="01/01/2017 - 01/31/2017" />  

Дайте нам знать.

 

This solution uses 'invalidDate' to check against the array of dates and disable them. For simplicity and also comparison purpose we create a new array for the string of dates and make them integers. You can replace this method as necessary.

$(function() {    var sub_dates = ['01/01/2017','01/03/2017','01/25/2017', '02/01/2017'];    var sub_dates_date = sub_dates.map(function(b) {      return +(new Date(b));    });      $('input[name="daterange"]').daterangepicker({      isInvalidDate: function(a) {        return sub_dates_date.indexOf(+(new Date(a))) < 0;      }    });  });
<!-- Include Required Prerequisites -->  <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>  <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />     <!-- Include Date Range Picker -->  <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />    <input type="text" name="daterange" value="01/01/2017 - 01/31/2017" />

Let us know.

</div
 
 
       
       
0
 
vote
<Р> Вы можете использовать <код> minDate и <код> maxDate опции

 <Код> $(function() {    $('input[name="daterange"]').daterangepicker({        locale: {           format: 'MM/DD/YYYY'        },        minDate: '01/01/2017',        maxDate: '01/07/2017'    });  });  
 <Код> <!-- Include Required Prerequisites -->  <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>  <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />     <!-- Include Date Range Picker -->  <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />    <input type="text" name="daterange" value="01/01/2017 - 01/07/2017" />  
 

You can use minDate and maxDate options

$(function() {    $('input[name="daterange"]').daterangepicker({        locale: {           format: 'MM/DD/YYYY'        },        minDate: '01/01/2017',        maxDate: '01/07/2017'    });  });
<!-- Include Required Prerequisites -->  <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>  <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />     <!-- Include Date Range Picker -->  <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />    <input type="text" name="daterange" value="01/01/2017 - 01/07/2017" />
</div
 
 

Связанный проблема

0  По какой-то причине мой нижний колонтитул не очень мобильный  ( For some reason my footer isnt very mobile friendly ) 
90% моего веб-сайта мобильнее (все равно размера), но по какой-то причине мой нижний колонтитул в основном полностью отрезан на мобильном телефоне. То, как ...

41  Тест, если элемент уже имеет jQuery DatePicker  ( Test if element already has jquery datepicker ) 
У меня есть форма со многими входными элементами. Некоторые поля встречаются на сегодняшний день с jQuery UI DatePicker Arlaedy прилагается: <код> $("#someE...

0  jQuery работает в Firefox, Safari, но не в Chrome  ( Jquery working in firefox safari but not in chrome ) 
Я написал какой-то код с JQuery Works в Firefox, Safari и IE9. Но Chrome это не нравится. Никаких очевидных MSG в Chrome Console не подходит. Я ударяю стену, ...

-1  Отправить не возвращает желаемый результат в AJAX  ( Submit is not returning desired result in ajax ) 
<код> onTap0 Возвращает результат желания. Но если я сделаю это: <код> onTap1 не возвращает желаемый результат. Вместо того, чтобы возвращать данные в...

7  Объект IIFE и Window?  ( Iife and window object ) 
<Код> IIFE Что нужно получить доступ без переопределения <код> window объект - можно рассматривать как: что-то вроде ( jQuery Пример): <код> $(function...

2  Это хорошая идея до $ .post в Google Spreadsheet?  ( Is it a good idea to post to google spreadsheet ) 
Я пытаюсь разработать функцию в моей веб-странице, которая посылает данные как можно добраться до доступа к центральному репозиторию позже. Было бы здорово, е...

1  ajax () не отвечает после события keyup  ( Ajax not responding after keyup event ) 
Это проблема jQuery / ajax. JQuery / ajax отвечает на событие keyup с оповещением (LOC), показывающим результат значения, введенного в текстовое поле числа. ...

0  Весной MVC возвращает ответ AJAX с использованием Jackson  ( Spring mvc return ajax response using jackson ) 
У меня есть сценарий, в котором я заполняю раскрывающуюся коробку в JSP через ответ AJAX с сервера. В контроллере я отказываюсь от коллекции объектов продукта...

3  Динамически изменить размер ввода  ( Dynamically resize input ) 
Мне просто интересно, как у вас динамически разместите вход, как вы введете в него ?? Я хотел бы использовать jQuery, если это возможно и AMP; Я бы предпоче...

0  Как интегрировать history.js на мой сайт Ajax?  ( How to integrate history js to my ajax site ) 
У меня осталось и правый div на моем сайте и с навигационными кнопками. Допустим, Button_1, Button_2. При нажатии на эти кнопки изменит правильный контент D...

2  Таблица Bootstrap в течение другого таблицы Bootstrap не сортируется  ( Bootstrap table within another bootstrap table not sortable ) 
У меня есть проект, который состоит из таблицы Bootstrap со многими строками, и каждая строка имеет раскрывающуюся кнопку, которая открывает подсуду. Я включи...

0  Как создать элемент DOM в другой шаблон?  ( How to create a dom element to another template ) 
У меня есть пример сценария. Короче говоря - если вы нажмете на «Добавить» создают ряд новых элементов, так как он был заполнен полями. Используемый ионный. Н...

0  jQuery: передача это к детской функции  ( Jquery passing this to child function ) 
У меня есть что-то подобное: <код> $('element.selector').live("click", function (){ run_some_func (); }); $('element.selector2').live("click", function...

-2  Динамический фон WordPress на основе изображений слайдера  ( Dynamic wordpress background based on slider images ) 
Я использую NivoSlider на WordPress, и я хочу, чтобы фона моей домашней страницы измениться на основе текущего изображения слайда! У меня нет опыта работы в J...

-8  Как автоматически форматировать пользовательский ввод 4 цифры до последних 2 цифр  ( How to automatically format user input 4 digits to last 2 digits ) 
У меня есть текстовое поле срок действия к кредитным картам, который пользователь, способный ввести 4 цифры, но я хочу автоматически форматировать ввод пользо...