0

Overview

Users need to select a date in a form field. This form field uses bootstrap-datepicker. It is very important that dates before today are non selectable.

Code

var date = new Date();
$('.datepicker').datepicker({
    todayHighlight: true,
    format: 'yyyy-mm-dd',
    startDate: date,
    minDate:   date,
});

Problem

It is the 15th-18:00H here at the moment. My timezone is Paris +0200H... if I change my computer time to +10 then I am the 16th-04:00H. Trouble is that the date picker is still showing the 15th... I need to some how account for the time-zone offset so that it shows the 16th.

I am also using jstz and moment.js

Note to future self:

To get this to work you need to do the following:

var date      = new Date();
var startDate = moment().utcOffset(-this.date.getTimezoneOffset()).format('YYYY-MM-DD'); // get the users timezone offset
$('.datepicker').datepicker({
    todayHighlight: true,
    format: 'yyyy-mm-dd',
    startDate: startDate, // pass it in
    minDate:   date,
});
$('input[name=start_date]').val(startDate); // set the value of the field
Jethro Hazelhurst
  • 3,230
  • 7
  • 38
  • 80
  • 1
    I'm not really able to reproduce your problem, It works for me. However, I have to refresh the page. Are you looking for a solution that automatically updates the `datepicker` when the date changes? – arc Apr 15 '17 at 16:28
  • Essentially I only want people to be able to be able to pick dates that are wither today or in the future... at the moment if I am in australia the date is the 16th but I look at the form and the 15th is selectable. – Jethro Hazelhurst Apr 15 '17 at 16:32
  • 1
    When you check the date on your computer, is it correct? And have you tried refreshing the page? Just to be sure I'm working on the right solution – arc Apr 15 '17 at 16:33
  • Possible duplicate of [Bootstrap datepicker disabling past dates without current date](http://stackoverflow.com/questions/16123056/bootstrap-datepicker-disabling-past-dates-without-current-date) – Scanfi98 Apr 15 '17 at 16:34
  • 2
    @JethroHazelhurst what does `this.offset` contain? – arc Apr 15 '17 at 16:35
  • @arcs it does seem to be working with the edited code above... it looks like the timezone is being detected... – Jethro Hazelhurst Apr 15 '17 at 16:36
  • 1
    @JethroHazelhurst, okay. but is that what you want? I assume you have a date in `this.offset` and you want to adjust this one for the current timezone. is that correct? – arc Apr 15 '17 at 16:39
  • Yes, sorry... a bit confused here... `this.offset = -this.date.getTimezoneOffset()` I was trying to detect the users time zone offset then generate a new `moment()` to pass the correct date to the datepicker. – Jethro Hazelhurst Apr 15 '17 at 16:40
  • Phew, sorry there arcs, you were right, it was not what I wanted... the correct code is in the edit above. Thanks for thinking this through with me. – Jethro Hazelhurst Apr 15 '17 at 16:47

0 Answers0