bootstrap-datepicker: How to use specific time zone?

Question

I created a small program to select the date using bootstrap-datepicker and write it to MySQL.

The catch is that this date must be local to Europe/Berlin regardless where the user is at the moment.

$(....).datepicker({ startDate: 'today' });

My question is: how do I set startDate to be local to specific timezone without using server side code (PHP) or any other libraries?

I tried using moment + moment-timezone but it's also showing the local browser date.

var todaysDate = moment().tz('Europe/Berlin').format();
$(...).datepicker({ startDate: todaysDate });

Thanks.

Michaelemichaelina

Answer 1

Just needed

moment.tz.setDefault("Europe/Berlin");

After which moment generated the correct date without using tz(). Also make sure that format matches.

var todaysDate = moment().format('D MMM YYYY');
$(...).datepicker({ format: 'dd M yyyy', startDate: todaysDate });

Michaelemichaelina

I am getting the below error. Uncaught TypeError: option startDate is not recognized! – Reyreyes

Answer 2

The date object will always be in Local time zone (browser based).

dateObj.getTime() will give you absolute milliseconds.

http://momentjs.com/ is great library for timezone conversions.

EDIT

About how:

 var newYork    = moment.tz("2014-06-01 12:00", "America/New_York");
 var losAngeles = newYork.clone().tz("America/Los_Angeles");
 var london     = newYork.clone().tz("Europe/London");
 
 newYork.format();    // 2014-06-01T12:00:00-04:00
 losAngeles.format(); // 2014-06-01T09:00:00-07:00
 london.format();     // 2014-06-01T17:00:00+01:00

and

By default, moment parses and displays in local time.

This is the exact code from their website. If you don't pass America/New_York and just simply moment("2014-06-01 12:00") it will get local time.

moment().utcOffset() function will get you utcOffset if you want to know which timezone moment interprets.

See the demo in jsFiddle

EDIT 2022 momenjs is deprecated, use date-fns or luxon

Argyle

I tried using moment + moment-timezone but it's also showing the local browser date. – Michaelemichaelina

Answer 3

Maybe something like this can get you in the right direction?

HTML

<div class='input-group date date-time-picker'>
    <input type='text' class="form-control" placeholder="Start Time"/>
    <span class="input-group-addon">
        <i class="glyphicon glyphicon-calendar"></i>
    </span>
</div>

JavaScript

var options = {
    format: 'mm/dd/yyyy hh:ii',
    autoclose: true
};

$('.date-time-picker').datetimepicker(options).on("changeDate", function (e) {
    var TimeZoned = new Date(e.date.setTime(e.date.getTime() + 
                            (e.date.getTimezoneOffset() * 60000)));
    $(this).datetimepicker('setDate', TimeZoned);
});

Crwth

hell no idea what does mean: "ii" in time format - and also, why you are multiplicate it by 60k? – Lastminute

@Lastminute That's the format used by the plugin: malot.fr/bootstrap-datetimepicker . getTimezoneOffset() returns the offset in minutes, getTime() returns current time in milliseconds. So it's just a conversion from minutes to milliseconds. – Crwth

Answer 4

export const convertToCST= (date) => {
   var convertToCT = date.toLocaleString('en-US', {
        timeZone: 'CST',
    })
    var day = convertToCT.split("/")[1];
    var month = convertToCT.split("/")[0] < 10 ? `0${convertToCT.split("/")[0]}` : convertToCT.split("/")[0];
    var year = (convertToCT.split("/")[2]).split(",")[0];
    var formtedDate = `${year}-${month}-${day}`
    return formtedDate;
}

<input required type="date" className="form-control" value={convertToCST(new Date(date))} />

ex

Kedgeree

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Victualer