Search code examples
bootstrap-datetimepicker

Using Eonasdan bootstrap-datetimepicker, need to preset year to 65 years ago

I have an application for medical professionals servicing Medicare patients typically in their 60's to 100's and we I use Eonasdan bootstrap-datetimepicker to allow them to select birthdates like so:

JavaScript:

$('.birthDateTimePicker').datetimepicker({
    format: 'M/D/YYYY',
    maxDate: (new Date()),// used to disallow future dates
    showClose: true,
    viewMode: 'years'
});

HTML:

<div class="input-group birthDateTimePicker">
    <input id="birthDt" name="birthDt" type="text" placeholder="Birth Date"
            class="form-control col-sm-3 col-md-3 col-lg-2" required />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

This produces a display that initially does not have a date selected, but says:Birth date in the input box. The problem is, it defaults to 2015, so selecting the year is painfully slow due to the advanced age of most of the patients. I tried setting the defaultDate like so:

$('.birthDateTimePicker').datetimepicker({
    defaultDate: moment().subtract(68, 'y'),
    format: 'M/D/YYYY',
    maxDate: (new Date()),// used to disallow future dates
    showClose: true,
    viewMode: 'years'
});

But now, instead of it displaying Birth date in the input box, it displays an actual date like 12/10/1947 in the input box. I want to pre-set the starting year, BUT NOT pre-select the entire date. The birthday is VERY important in the medical treatment they receive AND is used with their name for identification, and the LAST thing I want is for someone to forget to enter the birthdate, and because it has already pre-selected a specific date, they get the wrong birthday. So, how do I make it easy for the medical professional to select the year, but not have it arbitrarily enter the wrong date?

Solution

  • If you're using the latest version you can set your options as such:

    viewDate: moment().subtract(68, 'y'),
format: 'M/D/YYYY',
maxDate: moment(),
showClose: true,
viewMode: 'years'

    viewDate is an option that will cause the picker to open at the specified date.