Javascript-форум - Помогите с выбором календаря

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Помогите с выбором календаря (https://javascript.ru/forum/dom-window/47878-pomogite-s-vyborom-kalendarya.html)

Цитата:

Сообщение от Эдди

А мне надо переформатировать дату для запроса ajax к скрипту php.
Могу, конечно, уже в php разобрать строку. Но, думаю, это неправильно.
В JS есть функция (простая, иначе легче сделать в php), которая переформатирует дату в Y-m-d?

а почитать про плагин
сделайте дополнительное поле укажите для поля необходимый формат и отправляйте

<!doctype html>



<html lang="en">

<head>

  <meta charset="utf-8" />

  <title>jQuery UI Datepicker - Default functionality</title>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css" />

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

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

  <link rel="stylesheet" href="/resources/demos/style.css" />
   <style type="text/css">

   body{
     font-size: 12px;
   }
.active .ui-state-default{
    background: rgba(102, 255, 102, 1)
}
.active:hover .ui-state-default{
    background: rgba(255, 255, 0, 1)
}
   </style>
  <script>

  $(function() {

    $.datepicker.regional['ru'] = {
		closeText: 'Закрыть',
		prevText: '&#x3c;Пред',
		nextText: 'След&#x3e;',
		currentText: 'Сегодня',
		monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь', 'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
		monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн', 'Июл','Авг','Сен','Окт','Ноя','Дек'],
		dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
		dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
		dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
		dateFormat: 'dd.mm.yy',
		firstDay: 1,
		isRTL: false,
		showOtherMonths:true,
		selectOtherMonths:true,
		changeMonth:true,


        changeYear: false,
        showAnim:"scale"
};
var arr_data = [[2014,5,12],[2014,5,14]];
$.datepicker.setDefaults($.datepicker.regional['ru'])
$( '#datepicker' ).datepicker({ altField: "#show", altFormat: "yy-mm-dd",
beforeShowDay: function(date) {
for (var i=0; i<arr_data.length; i++)  { var d = arr_data[i];
if (date.getTime() == (new Date(d[0],d[1],d[2])).getTime()) return[true, "active", "Важная дата"]; }
return[true, ""];}
})
  });
  </script>
</head>
<body>  <label><input id='show'> Скрытое поле для отправки на сервер</label>
<label><input id='datepicker'> Видимое для клиента нажать выбрать дату</label>
</body>
</html>

Как все просто. В сотый раз МЕРСИ!

Кстати, вся эта функция излишня.
У меня подключен русскоязычный вариант.
Поэтому понадобился только <input type="hidden".....>
и вот это:

altField: "#show", altFormat: "yy-mm-dd",

Посмотрите в описании компонента

http://api.jqueryui.com/datepicker/#option-dateFormat

Насчет подсветки/отключения определенных дат ничего не работало.
Нарыл вот это. Работает, но не криво ли?

var dates = new Array('28-06-2014','05-07-2014');
    $(function(){
      $("#datepicker").datepicker({
        //Дополнительные параметры
        dateFormat: "dd-mm-yy",
        altField: "#datepicker_hid", altFormat: "yy-mm-dd", //формат даты для передачи php-скрипту
        minDate: "+1",
        beforeShowDay: disable
      });
    });
    function disable (d) {
      var dat = $.datepicker.formatDate("dd-mm-yy", d);
      for (var i=0; i < dates.length; i++){
        if ($.inArray(dat, dates)!=-1) return [true];
        else return [false];
      }
    }

Гляньте, если не лень...

Эдди,
:-?
...

<!doctype html>



<html lang="en">

<head>

  <meta charset="utf-8" />

  <title>jQuery UI Datepicker - Default functionality</title>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css" />

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

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

  <link rel="stylesheet" href="/resources/demos/style.css" />
   <style type="text/css">

   body{
     font-size: 12px;
   }
.active .ui-state-default{
    background: rgba(102, 255, 102, 1)
}
.active:hover .ui-state-default{
    background: rgba(255, 255, 0, 1)
}
   </style>
  <script>

  $(function() {

    $.datepicker.regional['ru'] = {
		closeText: 'Закрыть',
		prevText: '&#x3c;Пред',
		nextText: 'След&#x3e;',
		currentText: 'Сегодня',
		monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь', 'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
		monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн', 'Июл','Авг','Сен','Окт','Ноя','Дек'],
		dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
		dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
		dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
		dateFormat: 'dd.mm.yy',
		firstDay: 1,
		isRTL: false,
		showOtherMonths:true,
		selectOtherMonths:true,
		changeMonth:true,


        changeYear: false,
        showAnim:"scale"
};

var dates = ['28-06-2014','05-07-2014'];
$.datepicker.setDefaults($.datepicker.regional['ru']);
$( '#datepicker' ).datepicker({
        dateFormat: "dd-mm-yy",
        altField: "#datepicker_hid", altFormat: "yy-mm-dd", //формат даты для передачи php-скрипту
        minDate: "+1",
        beforeShowDay: disable});
function disable(date) {
for (var i=0; i<dates.length; i++)  { var d = dates[i].split("-");
if (date.getTime() == (new Date(d[2],d[1]-1,d[0])).getTime()) return[true, "active", "Важная дата"]; }
return[false, ""];}
})

  </script>
</head>
<body>  <label><input id='datepicker_hid'> Скрытое поле для отправки на сервер</label>
<label><input id='datepicker'> Видимое для клиента нажать выбрать дату</label>
</body>
</html>

Спасибо, рони!
Но ведь как у меня, тоже работает.
Главное, чтобы косяков там не было.
Я по разному тестировал, ничего "грешного" не нашел.
Если есть, скажи, пожалуйста.

Эдди,
убрал всё лишнее из вашего варианта.

<!doctype html>



<html lang="en">

<head>

  <meta charset="utf-8" />

  <title>jQuery UI Datepicker - Default functionality</title>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css" />

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

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

  <link rel="stylesheet" href="/resources/demos/style.css" />
   <style type="text/css">

   body{
     font-size: 12px;
   }
.active .ui-state-default{
    background: rgba(102, 255, 102, 1)
}
.active:hover .ui-state-default{
    background: rgba(255, 255, 0, 1)
}
   </style>
  <script>

  $(function() {

    $.datepicker.regional['ru'] = {
		closeText: 'Закрыть',
		prevText: '&#x3c;Пред',
		nextText: 'След&#x3e;',
		currentText: 'Сегодня',
		monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь', 'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
		monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн', 'Июл','Авг','Сен','Окт','Ноя','Дек'],
		dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
		dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
		dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
		dateFormat: 'dd.mm.yy',
		firstDay: 1,
		isRTL: false,
		showOtherMonths:true,
		selectOtherMonths:true,
		changeMonth:true,


        changeYear: false,
        showAnim:"scale"
};

var dates = ['28-06-2015','05-07-2015'];
$.datepicker.setDefaults($.datepicker.regional['ru']);
$( '#datepicker' ).datepicker({
        dateFormat: "dd-mm-yy",
        altField: "#datepicker_hid", altFormat: "yy-mm-dd", //формат даты для передачи php-скрипту
        minDate: "+1",
        beforeShowDay: disable});
function disable(d) {
       d = $.datepicker.formatDate("dd-mm-yy", d);
       d = $.inArray(d, dates);
       return [d != -1];
    }
})
  </script>
</head>
<body>  <label><input id='datepicker_hid'> Скрытое поле для отправки на сервер</label>
<label><input id='datepicker'> Видимое для клиента нажать выбрать дату</label>
</body>
</html>

Спасибо большое, профессориЩЕ!
Но сейчас задам супертупой вопрос.
Если будет минута и желание, ответьте, пожалуйста. :)

Скрипт мой уже состоит из 1000 строк. Очень боюсь что-то испортить.
В одной из функций ajax jquery получаю массив дат, которые будут использоваться в datepicker.
Как сделать, чтобы он был доступен в обсуждаемой функции?
Достаточно объявить массив за пределами любой функции var dates = new Array(), а потом заполнить его в функции ajax? которая получает массив из php? Будет ли этот массив доступен в функции datepicker?

Извиняюсь. Работая, учусь. Не бейте сильно.

Цитата:

Сообщение от Эдди

Достаточно объявить массив за пределами любой функции var dates = new Array(), а потом заполнить его в функции ajax? которая получает массив из php? Будет ли этот массив доступен в функции datepicker?

да если это строка 33 или подобная - dates становится доступно везде -- и естественно к моменту выбора даты массив уже должен быть заполнен, как поступать до прихода данных выбор за вами