Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.94/18: Рейтинг темы: голосов - 18, средняя оценка - 4.94
22 / 15 / 3
Регистрация: 05.11.2013
Сообщений: 425

Как добавить к себе в скрипт air-datepicker?

19.11.2021, 14:07. Показов 3634. Ответов 6
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Хотел добавить календарь air-datepicker который взял отсюда
Скачал и добавил в header сам календарь и необходимые ему файлы

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
        <title>$site_name</title>
     <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' href='./css/mini.css'>
    
 
 
<script src='./react/react.min.js'></script>
<script src='./react/react-dom.min.js'></script>
<script src='./react/jquery.min.js'></script>
 
<script src='./calendar/air-datepicker.js'></script>
<link href='./calendar/air-datepicker.css' rel='stylesheet'/>
 </head>
Далее в инструкции написано что использовать его нужна вот так:

JavaScript
1
2
3
4
import AirDatepicker from 'air-datepicker'
import 'air-datepicker/air-datepicker.css'
 
new AirDatepicker('#el' [, options]);
Не совсем понятно что это и куда вставлять?
У меня скрипт на php mysqli, стиль css

Я бы хотел чтобы данная форма вставилась в это поле:
HTML5
1
2
3
4
5
<div class='row responsive-label'><div class='col-sm-12 col-md-3'>
<label for='sf1-text' class='doc'>Дата<font color='red'>*</font></label></div>
<div class='col-sm-12 col-md'><p>
<input type='text' name='date' value='$date' placeholder='В формате yyyy-mm-dd' maxlength='10' style='width:70%;' >
</p></div></div>
Как правильно сделать чтобы при нажатии на поле для ввода даты, открывался календарь?

Добавлено через 1 минуту
Добавить календарь таким образом не получается

HTML5
1
2
3
4
5
<div class='row responsive-label'><div class='col-sm-12 col-md-3'>
<label for='sf1-text' class='doc'>Дата<font color='red'>*</font></label></div>
<div class='col-sm-12 col-md'><p>
<input type='text' name='date' class='datepicker-here' data-position='top right' data-min-view='months' value='$date' placeholder='Выбрать дату' maxlength='10' style='width:70%;' >
</p></div></div>
Добавлено через 5 минут
HTML5
1
2
3
4
  <div class='datepicker__container'>
    <label for='datepicker' class=''>Архив новостей за</label>
    <input type='text' class='js-datepicker' id='datepicker' placeholder='Выбрать дату'/>
  </div>
А так добавляется пустая форма без календаря

Добавлено через 2 минуты
Нашел вроде бы рабочий код
У меня по идее файл java script и css и так грузятся и header

но чего то не хватает?
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
19.11.2021, 14:07
Ответы с готовыми решениями:

Air datepicker. Как открыть календарь по кнопке?
Помогите плиз открыть календарь по кнопке. Календарь вот - https://github.com/t1m0n/air-datepicker/tree/master/dist Не могу...

air datepicker - не отслеживается on change
Календарь - https://github.com/t1m0n/air-datepicker/tree/master/dist Пытаюсь реализовать такой функционал: Открываем календарь,...

Ошибка "Unexpected token <" при подключении Air Datepicker
Пытаюсь подключить к своему проекту уже готовый datapicker. Прописываю в head страницы: &lt;link href=&quot;datepicker.css&quot;...

6
193 / 140 / 36
Регистрация: 19.11.2020
Сообщений: 881
19.11.2021, 20:23
Цитата Сообщение от Loompy Посмотреть сообщение
но чего то не хватает?

Цитата Сообщение от Loompy Посмотреть сообщение
HTML5
1
2
3
4
5
<script src='./react/react.min.js'></script>
<script src='./react/react-dom.min.js'></script>
<script src='./react/jquery.min.js'></script>
<script src='./calendar/air-datepicker.js'></script>
<link href='./calendar/air-datepicker.css' rel='stylesheet'/>

Скорее проблема в твоих точках. Никогда не надо писать "./" Надо писать только "/" Что указывает на главный домен "https://www.cyberforum.ru/calendar/air-datepicker.css"
0
22 / 15 / 3
Регистрация: 05.11.2013
Сообщений: 425
20.11.2021, 21:54  [ТС]
Цитата Сообщение от OpXiv Посмотреть сообщение
Скорее проблема в твоих точках. Никогда не надо писать "./" Надо писать только "/" Что указывает на главный домен "https://www.cyberforum.ru/calendar/air-datepicker.css"
Нет, если убрать точки, то ничего не работает, даже css мой отваливается.

С точками работает и на windows и на debian у меня.
0
193 / 140 / 36
Регистрация: 19.11.2020
Сообщений: 881
20.11.2021, 22:01
Открой исходный код страницы (правкой кнопкой мыши) и протыкай все подключения. И проверь, все ли подключения url открываются.

Добавлено через 45 секунд
Ещё в консоли по F12 нужно проверить код на ошибки. Если будут. То будет гореть красным.
0
22 / 15 / 3
Регистрация: 05.11.2013
Сообщений: 425
20.11.2021, 22:43  [ТС]
Проверил, красного ничего нет, все url и файлы грузятся
0
22 / 15 / 3
Регистрация: 05.11.2013
Сообщений: 425
23.11.2021, 08:37  [ТС]
Может кто знает?
0
22 / 15 / 3
Регистрация: 05.11.2013
Сообщений: 425
24.11.2021, 20:53  [ТС]
Как добавить этот календарь к себе в свой веб сайт в форму для ввода даты?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
24.11.2021, 20:53
Помогаю со студенческими работами здесь

Как добавить нового программиста к себе в apple developer?
Подскажите как добавить нового программиста себе в аккаунт developer? Чего то не могу найти( Спасибо.

Как через скрипт добавить скрипт к префабу
Моя цель это добавить написанный скрипт к только что заспавниному объекту префабу

Смена значения DatePicker при выборе в другом DatePicker
Добрый день! Есть модель данных: public class DatesDM : OnPropertyChangedClass { private int _deliveryId; ...

Запрет выбора даты DatePicker до указанной в другом DatePicker
У меня есть два Datepicker, и хотелось бы, чтобы во втором, чтобы нельзя было выбрать даты до указанной в первом. Но так не работает,...

На чём пишутся приложения, которые имеют расширение *.air (Adobe Air)?
Какой язык? Какая среда разработки? Я так понял на этом языке написан знаменитый сайт http://chatroulette.com/ ? Если кто-то не...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Новые блоги и статьи
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru