How to do date time picker with respected timezone with selected dropdown?
Question
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. 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 answers
solution1
1 ACCPTED 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. 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. The datetimepicker plugin does not have a built-in ability to refresh after update, but I attempted a hack using blur to achieve that.
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.