Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Смена часового пояся для Jquery ui timepicker (https://javascript.ru/forum/dom-window/77197-smena-chasovogo-poyasya-dlya-jquery-ui-timepicker.html)

seotapki 05.04.2019 08:50

Смена часового пояся для Jquery ui timepicker
 
Всем привет.
Использую jquery-ui-timepicker, мне необходимо установить не локальное время пользователя, а нужный мне часовой пояс(и вести отсчет от него):


<link rel="stylesheet" media="all" type="text/css" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" media="all" type="text/css" href="/catalog/view/theme/<?php echo TEMPLATE; ?>/js/jquery-ui-timepicker/jquery-ui-timepicker-addon.css" />
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="/catalog/view/theme/<?php echo TEMPLATE; ?>/js/jquery-ui-timepicker/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="/catalog/view/theme/<?php echo TEMPLATE; ?>/js/jquery-ui-timepicker/i18n/jquery-ui-timepicker-addon-i18n.min.js"></script>
<script type="text/javascript" src="/catalog/view/theme/<?php echo TEMPLATE; ?>/js/jquery-ui-timepicker/jquery-ui-sliderAccess.js"></script>

<script type="text/javascript">
    $('#delivery_flowers_date').datetimepicker( 

        $.extend(
            $.datepicker.regional['ru'] = {
                closeText: 'Закрыть',
                prevText: '<Пред',
                nextText: 'След>',
                currentText: 'Сегодня',
                monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь',
                'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
                monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн',
                'Июл','Авг','Сен','Окт','Ноя','Дек'],
                dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
                dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
                dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
                weekHeader: 'Не',
                dateFormat: 'dd.mm.yy',
                firstDay: 1,
               minDate: 0, // Скрываем прошедшие дни
                buttonImage: '/images/datepicker.gif',
                isRTL: false,
                showMonthAfterYear: false,
                yearSuffix: '',
                onSelect: function(date){

                    var selectDate = new Date(date);
                    var fromDate = new Date('<?php echo $date; ?> 10:00');
                    var toDate = new Date('<?php echo $date; ?> 18:00');

                    if (selectDate <= fromDate  || selectDate > toDate) { // 24*60*60*1000
                        $("#prorated2").html('Скрыть доставку'+selectDate);
                    } else {
                        $("#prorated2").html('Показываем способы доставки'+selectDate);
                    }

                    //console.log(date);
                    console.log('Выбранное время: '+selectDate);
                    console.log('Начало доставки на сегодня: '+fromDate);
                    console.log('Крайнее время на сегодня: '+toDate);

                    $("#prorated").html('Вы выбрали доставку на '+date);

                }
            },
            $.timepicker.regional['ru'] = {
                timeOnlyTitle: 'Выберите время',
                timeText: 'Время',
                hourText: 'Часы',
                minuteText: 'Минуты',
                secondText: 'Секунды',
                millisecText: 'Миллисекунды',
                timezoneText: 'Часовой пояс',
                currentText: 'Сейчас',
                closeText: 'Закрыть',
                timeFormat: 'HH:mm',
                amNames: ['AM', 'A'],
                pmNames: ['PM', 'P'],
                isRTL: false
            }
        ));

//  var currentDate = $( ".selector" ).datepicker( "getDate" );

// console.log(date);

</script>



На php смена часового пояса сейчас выглядит так:


<?php
//date_default_timezone_set('Asia/Vladivostok');

date_default_timezone_set('Etc/GMT+6'); // Бишкек


$datetime = date('d.m.Y h:i', time());
$date = date('d.m.Y', time());
echo "Дата и время в Бишкеке:".$datetime;
?>


Как изменить часовой пояс для Jquery ui timepicker ?

2 Вопрос, как в переменную отдельно получить только дату, а в другую переменную только время? или же придется полную дату обрезать?

рони 05.04.2019 09:25

seotapki,
Date setTimezoneOffset method

seotapki 05.04.2019 10:24

Цитата:

Сообщение от рони (Сообщение 506014)

Я так понимаю, это работает уже после выбора даты пользователем? верно?

а как мне сделать, чтобы часовой пояс учитывался до выбора даты? в Jquery ui timepicker есть такая опция:

minDate: 0


, которая отключает прошедшие даты в календаре, а на сайте мне необходимо ограничить возможность выбора даты, которая по нужному мне часовому поясу уже прошла. Т.е, заходит пользователь из Владивостока например на сайт и у него нет возможности выбрать нужное время, потому что :
minDate: 0
, эту дату уже скрыла из календаря, хотя в Москве например, это время еще не прошло..

seotapki 05.04.2019 12:08

Кажется нашел решение моего вопроса:

1. Создаем перемену и помещаем в нее время из нужного часового пояса php:

var dateToday = new Date('<?php echo $datetime; ?>');


2. В опцию minDate вставляем текущее время часового пояса:

minDate: dateToday,


3. Осталось исправить правильность даты при создании объекта, потому что:

Отсчет месяцев month начинается с нуля 0
// то же самое, часы/секунды по умолчанию равны 0

Делаем следующее, переменную php:

$datetime == date('D M d Y H:i:s', time());


и все работает

рони 05.04.2019 12:54

seotapki,
onSelect: function(date){ 
var selectDate = new Date(date);
*!*
selectDate.setTimezoneOffset(-180);//-180 Timezone "из нужного часового пояса" 
*/!*

seotapki 05.04.2019 14:32

Цитата:

Сообщение от рони (Сообщение 506026)
seotapki,
onSelect: function(date){ 
var selectDate = new Date(date);
*!*
selectDate.setTimezoneOffset(-180);//-180 Timezone "из нужного часового пояса" 
*/!*



Рони, подскажите пожалуйста по преобразованию даты(проблемы)


У меня есть следующее условие:
Оформить доставку на сегодня можно в период времени с 10:00 до 18:00 (если доставка день в день). Если вы делаете заказ сегодня, но оформляете доставку на следующий день, то время можете выбрать любое в период с 10:00 до 21:00.



Я написал такой код:


onSelect: function(date){

                    var selectDate = new Date(date); // Выбранная дата в календаре, формата: 19.04.2019 17:08
                    var sdDay = selectDate.getDate(); // Получаем выбранный день недели(число)
                    var sdHours = selectDate.getHours(); // Получаем выбранное время (часы)


                    var fromDate = new Date('<?php echo (string)$date; ?> 10:00'); // php возвращает сегодняшнюю дату 05.04.2019, получается строка вида 05.04.2019 10:00
                    var fdDay = fromDate.getDate(); // Получаем сегодняшний день недели(число)
                    var fdHours = fromDate.getHours(); // Получаем время (часы) 10:00


                    var toDate = new Date('<?php echo (string)$date; ?> 18:00'); // php возвращает сегодняшнюю дату 05.04.2019, получается строка вида 05.04.2019 18:00
                    var tdDay = toDate.getDate(); // Получаем сегодняшний день недели(число)
                    var tdHours = toDate.getHours(); // Получаем время (часы) 18:00


                    if (sdDay <= fdDay  && sdHours <= fdHours) { // Если выбранное число(день) в календаре <= текущей даты и выбранное время в календаре меньше 10 часов утра, то скрываем возможность выбрать способы доставки 
                        console.log('Скрыть доставку');

                    } else if(sdDay <= fdDay  && sdHours >= tdHours) { // Если выбранное число(день) в календаре <= текущей даты и выбранное время в календаре больше 18 часов вечера, то скрываем возможность выбрать способы доставки 
                        console.log('Скрыть доставку');

                    } else { // В остальных случаях показываем способы доставки
                        console.log('Показать доставку');
                    }


                }




С одной стороны логика вроде правильна, но судя по всему проблемы с преобразованием дат, потому что в консоли при выборе определенных дней, появляются такие штуки:

http://prntscr.com/n7vqrs

Что я делаю не так?

seotapki 05.04.2019 14:37

Так-же почему- то, без преобразования в объект
var selectDate = new Date(date);



и вызове метода:

var sdDay = selectDate.getDate();


происходит редирект

laimas 05.04.2019 14:48

Цитата:

Сообщение от seotapki
php возвращает сегодняшнюю дату 05.04.2019, получается строка вида 05.04.2019 10:00

05.04.2019 - некорректный формат даты, поэтому и ошибка в консоли. Верный формат, это Y-m-d

рони 05.04.2019 15:04

seotapki,
в плагине есть опция timezone, возможно это вам поможет.
https://trentrichardson.com/examples...ezone_examples


Часовой пояс GMT +3, время: 20:09.