Форум

useruser · #1 (**permalink**) 18.04.2015, 12:34

Скрипт календаря большой. Привел код нужной функции.

По клику на поле с тегом input и классом date появляется календарь.
После выбора даты в календаре - в поле появляется выбранная дата.

Мне нужно чтобы по клику на картинке появлялся календарь.
После выбора даты в календаре - в поле появляется выбранная дата.
Проблема в том, что после изменения скрипта - в поле не появляется выбранная дата.
Календарь появляется по клику на картинке, дата выбирается, дата не появляется в поле.
Строки до изменения закомментированы.

HTML

Код:

<input type="text" name="some_date" class="date">
<img src="images/calendar.png" class="calendar">

Код нужной функции.

function initCalendar(e, el) {
d.onkeyup = cancel
var inputs = (el) ? [el] : gt("img") , inp;
//var inputs = (el) ? [el] : gt("input") , inp;
for (var e in inputs) {
inp = inputs[e]
if (!hc(inp && inp.className, "calendar")) continue;
//if (!hc(inp && inp.className, "date")) continue;
inp.onclick = showMonth 
inp.onfocus = showMonth 
inp.onblur = hideMonth 
}
}

Пожалуйста, помогите советом, подскажите где исправить код.

рони · #2 (**permalink**) 18.04.2015, 13:44

useruser,
может готовое решение ?

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Icon trigger</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css">
<style type="text/css">
#ui-datepicker-div{
  font-size: 12px;
}

</style>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      yearRange:'1920:+5',
      changeYear: true,
      firstDay: 1, 
      showOn: "both",
      buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
      buttonImageOnly: true,
      buttonText: "Select date"
    });
  });
  </script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

useruser · #3 (**permalink**) 18.04.2015, 16:29

---может готовое решение ?
рони, спасибо за ответ - но тут надо много "допиливать".
Я видел много календарей, в том числе и на сайте jquery ui. Но они не подходят.
Конкретно в этом календаре нет возможности изменять год (или где-то скрыта, отключена). А даты у меня могут быть и будут от 1920 года.

рони · #4 (**permalink**) 18.04.2015, 17:07

useruser,

документация на все параметры
в часности на диапазон лет
http://api.jqueryui.com/datepicker/#option-yearRange
смотрите код выше строки 19 возможность выбирать год , строка 18 диапазон выбора

useruser · #5 (**permalink**) 18.04.2015, 17:52

Выполнил всё в соответствии с инструкцией - не получается

Год с 2002 по 2012.
Инструкция не верна?

!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Icon trigger</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css">
<style type="text/css">
#ui-datepicker-div{
  font-size: 12px;
}

</style>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  
  

  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      changeYear: true,
      firstDay: 1, 
      showOn: "both",
      buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
      buttonImageOnly: true,
      buttonText: "Select date"
    });
  });
  

$( ".selector" ).datepicker({
  showOtherMonths: true
  yearRange: "2002:2012"
});
// Getter
var yearRange = $( ".selector" ).datepicker( "option", "yearRange" );
 
// Setter
$( ".selector" ).datepicker( "option", "yearRange", "2002:2012" );

</script>
  
  

  
  
  
  
  
  
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

рони · #6 (**permalink**) 18.04.2015, 19:29

useruser,
и где у вас элемент в коде с классом selector?

вам же пример дали во втором посте и инструкцию в 4 посте

useruser · #7 (**permalink**) 18.04.2015, 23:14

ронни, всё делал по инструкции. Всё взял из примера. Убрал только yearRange:'1920:+5',.
Переписывать код не буду, но добавление

<p>Date1: <input type="text" class="selector"></p>

никак не поможет.

Я ничего не придумываю. Всё делаю четко по инструкции. Сказали nitialize the datepicker, я сделал. Сказали Get or set the yearRange option - сделал.
Всё. Инструкция окончена. Инпут с селектором вставил. И ничего не работает.

Форум

Справочник

Discord чат

Курсы javascript