Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.12.2016, 23:57
Кандидат Javascript-наук
Отправить личное сообщение для drkrol Посмотреть профиль Найти все сообщения от drkrol
 
Регистрация: 09.10.2013
Сообщений: 114

Как в flatpickr выделить определённые дни и диапазон дат?
Здравствуйте. Есть такой календарь flatpickr https://chmln.github.io/flatpickr/ , и у него есть функция onDayCreate() https://chmln.github.io/flatpickr/#event-onDayCreate , которая позволяет добавить к датам свой span. Но у меня так и не получилось указать определённые даты и диапазон дат, к которым должны создаться span'ы. Подскажите, как это сделать?
Ответить с цитированием
  #2 (permalink)  
Старый 11.12.2016, 01:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,789

drkrol,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .flatpickr-day.busy {
    background-color:  #FF0000 ;
  }

  </style>

</head>

<body>
<div id="slider"></div>
<link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">
<script src="https://unpkg.com/flatpickr"></script>
<input class="flatpickr" type="text" placeholder="Select Date..">
<script>
var data = [(new Date(2016,11,17,0,0,0,0)).getTime(),(new Date(2016,11,21,0,0,0,0)).getTime() ];
flatpickr(".flatpickr", {
    onDayCreate: function(dObj, dStr, fp, dayElem){
       if(data.indexOf(dayElem.dateObj.getTime()) > -1  )
           // dayElem.innerHTML += "<span class='event busy'>test</span>";
              dayElem.classList.add("busy")
    }
});

</script>

</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 11.12.2016, 14:24
Кандидат Javascript-наук
Отправить личное сообщение для drkrol Посмотреть профиль Найти все сообщения от drkrol
 
Регистрация: 09.10.2013
Сообщений: 114

рони,
а диапазон дат возможно как-нибудь? Чтобы не указывать все даты, а указать только начало и конец.
Ответить с цитированием
  #4 (permalink)  
Старый 11.12.2016, 15:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,789

drkrol,
строка 25 для диапазона ...
var a = data[0], b = data[1];
 if (dayElem.dateObj.getTime() >= a && dayElem.dateObj.getTime() <= b)
Ответить с цитированием
  #5 (permalink)  
Старый 11.12.2016, 16:39
Кандидат Javascript-наук
Отправить личное сообщение для drkrol Посмотреть профиль Найти все сообщения от drkrol
 
Регистрация: 09.10.2013
Сообщений: 114

спасибо
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .flatpickr-day.busy {
    background-color:  #FF0000 ;
  }

  </style>

</head>

<body>
<div id="slider"></div>
<link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">
<script src="https://unpkg.com/flatpickr"></script>
<input class="flatpickr" type="text" placeholder="Select Date..">
<script>
var data = [(new Date(2016,11,17,0,0,0,0)).getTime(),(new Date(2016,11,21,0,0,0,0)).getTime() ];
flatpickr(".flatpickr", {
    onDayCreate: function(dObj, dStr, fp, dayElem){
var a = data[0], b = data[1];
 if (dayElem.dateObj.getTime() >= a && dayElem.dateObj.getTime() <= b)

           // dayElem.innerHTML += "<span class='event busy'>test</span>";
              dayElem.classList.add("busy")
    }
});

</script>

</body>
</html>


но на локальной машине всё работает)

Последний раз редактировалось drkrol, 12.12.2016 в 02:15.
Ответить с цитированием
  #6 (permalink)  
Старый 11.12.2016, 17:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,789

drkrol, добавьте run, для запуска примера
[HTML run][/HTML]
Ответить с цитированием
  #7 (permalink)  
Старый 12.12.2016, 02:17
Кандидат Javascript-наук
Отправить личное сообщение для drkrol Посмотреть профиль Найти все сообщения от drkrol
 
Регистрация: 09.10.2013
Сообщений: 114

рони,
Подскажи, а как обработать даты такого вида:
["2016-12-12", "2106-12-16"]
?
Ответить с цитированием
  #8 (permalink)  
Старый 12.12.2016, 09:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,789

Сообщение от drkrol
Подскажи,
читайте документацию, там много интересного ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .flatpickr-day.busy {
    background-color:  #FF0000 ;
  }
  </style>

</head>

<body>
<div id="slider"></div>
<link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">
<script src="https://unpkg.com/flatpickr"></script>
<input class="flatpickr" type="text" placeholder="Select Date..">
<script>
var data = ["2016-12-12", "2016-12-16"];
flatpickr(".flatpickr", {
    onDayCreate: function(dObj, dStr, fp, dayElem){
    var a = fp.parseDate(data[0]), b = fp.parseDate(data[1]);
    if (dayElem.dateObj.getTime() >= a && dayElem.dateObj.getTime() <= b)
              dayElem.classList.add("busy")
    }
});
</script>

</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 13.12.2016, 01:26
Кандидат Javascript-наук
Отправить личное сообщение для drkrol Посмотреть профиль Найти все сообщения от drkrol
 
Регистрация: 09.10.2013
Сообщений: 114

рони,
то, что можете сделать вы, в документации нет...
Последняя просьба с flatpickr. Как в таком формате (["2016-12-12", "2016-12-16"] вывести отдельно стоящие даты ( не диапазон). То есть первый код, но с датами в привычном виде. Я этот dateParce и туда, и сюда, но ничего не вышло
Ответить с цитированием
  #10 (permalink)  
Старый 13.12.2016, 07:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,789

flatpickr выделение дат,данные строка или массив диапазона(начало/конец)
drkrol,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .flatpickr-day.busy {
    background-color:  #FF0000 ;
  }
  </style>

</head>

<body>
<div id="slider"></div>
<link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">
<script src="https://unpkg.com/flatpickr"></script>
<input class="flatpickr" type="text" placeholder="Select Date..">
<script>
var data = ["2016-12-12", "2016-12-16", ["2016-12-28", "2016-12-30"]];//
flatpickr(".flatpickr", {
    onDayCreate: function(dObj, dStr, fp, dayElem) {
        var a = dayElem.dateObj.getTime();
        a = data.some(function(b) {
            return typeof b == "string" ? a == fp.parseDate(b).getTime() :
            a >= fp.parseDate(b[0]).getTime() && a <= fp.parseDate(b[1]).getTime()
        });
        if (a) dayElem.classList.add("busy")
    }
});
</script>

</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Можно ли как то выделить текст в блоке при клике по блоку? someLogin Элементы интерфейса 1 10.10.2011 04:10
как в datepicker задать диапазон дат во время выполнения скрипта. Yurik jQuery 0 23.02.2011 11:19
Как выделить активный пункт? dididima Общие вопросы Javascript 2 03.01.2011 00:29
Как выделить элементы одного уровня? InviS jQuery 1 20.08.2010 08:03
Как выделить нужный текст? povter3091 Элементы интерфейса 2 03.11.2009 19:34