如何使用选定的下拉菜单使用受尊重的时区进行日期时间选择器？
[英]How to do date time picker with respected timezone with selected dropdown?
问题描述
I need a calendar with time select as well as timezone selection.
我需要一个带有时间选择和时区选择的日历。 Like below image:如下图所示：
Here is my code:这是我的代码：
$('#datetimepicker').datetimepicker({ // format:'dmY 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>
I got the datetimepicker plungin to do this.我得到了 datetimepicker 插件来做到这一点。 But can't able to add calendar based on timezone.但无法根据时区添加日历。 Here i'm attached my working code, but not added any timezone dropdown here.在这里我附上了我的工作代码，但没有在这里添加任何时区下拉列表。 Can anyone suggest to achieve this:任何人都可以建议实现这一目标：
1 个解决方案
解决方案1
1 已采纳 2020-02-16 05:10:03
One option is to use control groups .一种选择是使用控制组。 In the snippet below, I used the CSS classes ui-controlgroup and ui-controlgroup-vertical to achieve this.在下面的代码片段中，我使用了 CSS 类ui-controlgroup和ui-controlgroup-vertical来实现这一点。 However, you can also use scripting as shown in the documentation .但是，您也可以使用文档中所示的脚本。 As you will observe, I took the liberty to demonstrate the dropdown using specific timezones, but, you can use Moment in conjunction with Luxon to achieve your needs.正如您将看到的，我冒昧地使用特定时区演示了下拉菜单，但是，您可以将Moment与Luxon结合使用来满足您的需求。 The datetimepicker plugin does not have a built-in ability to refresh after update, but I attempted a hack using blur to achieve that. datetimepicker插件没有内置的更新后刷新功能，但我尝试使用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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.