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:'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>

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:

score 1 · Accepted Answer · answered Feb 16 '20 at 05:10

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>

Thanks for you reply. But can't understand what you given in the code. Is this a normal drop down or timezone based drop down. If yes, i didn't see any changes happens in the calendar while changing the drop down selection. — Umapathi, Feb 16 '20 at 12:48
(a) this is a normal dropdown. For timezone-based, you will need a jQuery plugin. See [this](https://www.jqueryscript.net/time-clock/Easy-Timezone-Picker-with-jQuery-Moment-js-Timezones.html) for an example; (b) the change does happen, however, the time picker does not scroll automatically to the newly selected time; this is a bug in the `datetimepicker` plugin (see bugs [this](https://github.com/xdan/datetimepicker/issues/555) and [this](https://github.com/xdan/datetimepicker/issues/549) which indicate issues regarding event processing. — Code Maverick, Feb 17 '20 at 04:17
Your ans is useful, but without luxon plugin any other option to change the calendar current date and time? — Umapathi, Feb 17 '20 at 08:15
See [this](https://stackoverflow.com/questions/6939685/get-client-time-zone-from-browser/37512371). Unfortunately, this didn't work for me in a previous project, so I suggested Luxon which did work for me as in the snippet above. — Code Maverick, Feb 17 '20 at 13:44

How to do date time picker with respected timezone with selected dropdown?

1 Answers1