Как сделать выбор даты и времени с соответствующим часовым поясом с выбранным выпадающим списком - PullRequest
Новая
       1

Как сделать выбор даты и времени с соответствующим часовым поясом с выбранным выпадающим списком

2 голосов
/ 15 февраля 2020

Мне нужен календарь с выбором времени и выбором часового пояса. Как показано на рисунке ниже: enter image description here

Вот мой код: 

$('#datetimepicker').datetimepicker({
    // format:'d.m.Y H:i',
    // timepicker:false,
    // allowTimes: []
    // onSelectDate:function(ct,$i){ // only to select time the changed date highlighted
    //     alert(ct.dateFormat('d/m/Y'));
    // },
    inline:true,
    step: 30,
    lang:'ru',
    disabledWeekDays: [0,6]
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.js"></script>

<div>
    <input id="datetimepicker" type="text" >
</div>

Я получил плагин datetimepicker, чтобы сделать это. Но не могу добавить календарь на основе часового пояса. Здесь я прикрепил свой рабочий код, но не добавил здесь ни одного раскрывающегося списка часовых поясов. Может ли кто-нибудь предложить достичь этого:

1 Ответ

1 голос
/ 16 февраля 2020

Один из вариантов - использовать контрольные группы . В приведенном ниже фрагменте я использовал CSS классы ui-controlgroup и ui-controlgroup-vertical для достижения этой цели. Однако вы также можете использовать скрипты, как показано в документации . Как вы заметите, я позволил себе продемонстрировать раскрывающийся список с использованием указанных c часовых поясов, но вы можете использовать Момент в сочетании с Luxon для достижения ваших потребностей. Плагин datetimepicker не имеет встроенной способности обновить sh после обновления, но я попытался взломать, используя blur, чтобы добиться этого. 

<!DOCTYPE html>
<html>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css"/>
	<script src="https://cdn.jsdelivr.net/npm/luxon@1.22.0/build/global/luxon.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.js"></script>
	<body>
		<!-- https://jqueryui.com/controlgroup/ -->
		<div class="ui-controlgroup ui-controlgroup-vertical">
			<input id="datetimepicker" type="text" class="ui-controlgroup-item">
			<select id="timezonepicker" class="ui-controlgroup-item">
				<option value="Europe/Moscow" selected>Moscow Standard Time</option>
				<option value="Asia/Omsk">Omsk Time</option>
				<option value="Asia/Novosibirsk">Novosibirsk Time</option>
			</select>
		</div>
		<script>
			$('#datetimepicker').datetimepicker({
                            inline:true,
                            step: 30,
                            lang:'ru',
                            disabledWeekDays: [0,6]
			});
			$('#timezonepicker').change(function() {

                                let newDate = luxon.DateTime.fromISO(luxon.DateTime.local(), {zone: $(this).val()}).toFormat('yyyy/MM/dd hh:mm');
				$('#datetimepicker').val(newDate);
				$('#datetimepicker').trigger('blur');
			});
		</script>
	</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...