Datepicker jquery ui

@Vladislav306907 · Регистрация: 03.09.2015

Студворк — интернет-сервис помощи студентам

Доброй ночи. Реализовал поле для ввода даты:

JavaScript
1
2
3
4
5
    $("#datepicker").datepicker({
      showOn:"button", 
      buttonImage:"<?php bloginfo("template_directory"); ?>/images/calendar.png",
      buttonImageOnly:true
    });

Дело в том, что мне нужно, чтобы календарик открывался и по нажатию на кнопку и по нажатию на поле с датой, но получается либо только кнопка, либо только дата. Подскажите что дописать надо, api почитал не нашел нужной инфы.

@Almag13 · 02.11.2015, 05:14

Код немного не ясен...
У вас сейчас работает только кнопка, насколько понятно из параметров datepicker

JavaScript
1
buttonImageOnly:true

Может нужно вместе с датой вывести с input?
+
input отстилизовать как нужно?

Добавлено через 9 минут
Можно сделать как, в div обертку для инпута поставить картинку - иконку календаря, а сам input сделать прозрачным по бекграунду transaprent - отстилизовать div как нужно и установить вывод даты и тогда у вас будет срабатывать клик на input

HTML5
1
2
3
<div class="datepicker-wrap">
<input type="text" id="datepicker"/>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.datepicker-wrap{
border: 1px solid #eee;
background: #fff url('/images/calendar.png') no-repeat right center;
height: 30px;
 
}
 
.datepicker-wrap input{
background: transparent;
border: 0 none;
width: 100%;
padding: 0 50px 0 10px; //50px Для иконки, чтобы текст не наезжал
}

JavaScript
1
  $("#datepicker").datepicker():

@Vladislav306907 · 02.11.2015, 12:04 **[ТС]**

Так не работает, не открывает поле с датой даже

@Almag13 · 02.11.2015, 13:14

реализовал, работает... скиньте ссылку, возможно где то в коде ошибка

@Vladislav306907 · 02.11.2015, 13:34 **[ТС]**

я на локалке делаю, поэтому только код если...

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style type="text/css">
    .datepicker-wrap{
border: 1px solid #eee;
background: #fff url('/images/calendar.png') no-repeat right center;
height: 30px;
 
}
 
.datepicker-wrap input{
background: transparent;
border: 0 none;
width: 30px !important;
padding: 0 40px 0 10px; //50px Для иконки, чтобы текст не наезжал
}
</style>
<div class="datepicker-wrap">
<input type="text" id="datepicker"/>
</div>
<script type="text/javascript">
$("#datepicker").datepicker():
</script>

ничего не менял, библиотека подключена и нормально работает

@Almag13 · 02.11.2015, 13:39

нет а показать datepicker то где нужно? У вас задача то отрабатывать на иконку и на текстовое поле...
Вы сейчас ограничили ширину input 30 пикселями, вероятно как размер иконки...
Покажите то что нужно и как нужно. Может у вас поле Input в одной стороне а иконка в другой...

@Vladislav306907 · 02.11.2015, 14:16 **[ТС]**

http://www.ivanovoturist.ru/ - в шапке сайта форма бронирования. Нужно сделать тут, но на локалке я просто пытался проверить работу, поэтому стили не накручивал

@Almag13 · 02.11.2015, 14:29

Можно реализовать так...

Тот же вариант, что и выше

HTML5
1
2
3
4
5
<div class="datepicker-wrap">
<div class="input-wrap">
<input type="text" id="datepicker"/>
</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.datepicker-wrap{
position: relative;
border: 1px solid #eee;
background: #fff url('/images/calendar.png') no-repeat right center;
height: 30px;
}
 
.datepicker-wrap .input-wrap{
background: #ff00;
width: 300px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
 
.datepicker-wrap input{
position: absolute;
top: 0;
left: 0;
right: 0;
height: 30px;
background: transparent;
border: 0 none;
width: 100%;
padding: 0 50px 0 10px; //50px Для иконки, чтобы текст не наезжал
}
 
.datepicker-wrap input:focus{
outline: 0 none;
}

JavaScript
1
$("#datepicker").datepicker();

Еще вариант, делаем кнопку отдельно, ссылкой

И отрабатываем таким способом:

JavaScript
1
2
3
4
5
6
7
$("#datepicker").datepicker():
 
$('a.open-datepicker').click(function(e){
e.reventDefault();
 
$('#datepicker').trigger('click');
})

@Vladislav306907 · 03.11.2015, 01:25 **[ТС]**

Попробую ночью, отпишусь что как, заранее спасибо

Добавлено через 7 часов 56 минут
Попробовал реализовать ссылкой:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
<input type="text" id="datepicker"/>
<a  class="open-datepicker" href="javascript:dat(e)"><img src="<?php bloginfo("template_directory"); ?>/images/calendar.png" alt="rus"></a>
 
<script>
$("#datepicker").datepicker();
 
$('a.open-datepicker').click(function dat(e){
e.reventDefault();
$('#datepicker').trigger('click');
});
</script>

поле с датой срабатывает, картинка нет. если в ссылке писать alert какой-нибудь, ради теста, работает. А функцию туда впихнуть так и не получилось.
пробовал и function(e), но тогда в href не совсем догоняю что писать.

@Almag13 · 03.11.2015, 13:30

href можете оставить любым перехода не будет по нему...

HTML5
1
<a  class="open-datepicker" href="#"><img src="<?php bloginfo("template_directory"); ?>/images/calendar.png" alt="rus"></a>

JavaScript
1
2
3
4
5
6
7
8
<script>
$("#datepicker").datepicker();
 
$('a.open-datepicker').click(function(e){
[B]e.preventDefault();[/B] // тут опечатка
$('#datepicker').trigger('click');
});
</script>

@Vladislav306907 · 03.11.2015, 17:16 **[ТС]**

И так пробовал, api почитал и по preventDefault и по trigger, все верно вроде как, но не срабатывает...

JavaScript
1
2
3
4
5
6
7
8
<script>
$("#datepicker").datepicker();
 
$("a.open-datepicker").click(function(event){
event.preventDefault();
$("#datepicker").trigger("click");
});
</script>

Добавлено через 4 минуты
В самом тригере alert срабатывает, а вот click нет

Добавлено через 16 минут
Все, родил таки

JavaScript
1
2
3
4
5
6
7
8
9
10
<input type="text" id="datepicker"/>
<a  id="open-datepicker" href="#" class="trigger"><img src="<?php bloginfo("template_directory"); ?>/images/calendar.png" alt="rus"></a>
 
<script>
$("#datepicker").datepicker();
$(function() {
$("#open-datepicker").datepicker();
$(".trigger").click(function(){ $("#open-datepicker").datepicker("show"); }); 
});
</script>

Новые блоги и статьи Все статьи Все блоги /
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 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@Vladislav306907 0 / 0 / 1 Регистрация: 03.09.2015 Сообщений: 48
	02.11.2015, 12:04 [ТС]
	Так не работает, не открывает поле с датой даже 0

@Almag13 27 / 28 / 16 Регистрация: 18.10.2015 Сообщений: 187
	02.11.2015, 13:14
	реализовал, работает... скиньте ссылку, возможно где то в коде ошибка 0

@Almag13 27 / 28 / 16 Регистрация: 18.10.2015 Сообщений: 187
	02.11.2015, 13:39
	нет а показать datepicker то где нужно? У вас задача то отрабатывать на иконку и на текстовое поле... Вы сейчас ограничили ширину input 30 пикселями, вероятно как размер иконки... Покажите то что нужно и как нужно. Может у вас поле Input в одной стороне а иконка в другой... 0

@Vladislav306907 0 / 0 / 1 Регистрация: 03.09.2015 Сообщений: 48
	02.11.2015, 14:16 [ТС]
	http://www.ivanovoturist.ru/ - в шапке сайта форма бронирования. Нужно сделать тут, но на локалке я просто пытался проверить работу, поэтому стили не накручивал 0