chrisdavies / tiny-date-picker

A small, modern, dependency-free date picker
https://chrisdavies.github.io/tiny-date-picker/
415 stars 87 forks source link

The "min" option opens the calendar on the minimum date #73

Closed subversivo58 closed 6 years ago

subversivo58 commented 6 years ago

I am using the min: option and it is working as expected however, the calendar is being opened on the min deadline, example:

I use (now 02/03/2018 - 18 => 03/03/2010):

// limiter years
let limiter = 18
// field node
let field = document.getElementById('input-date')
// constructor
let datePicker = TinyDatePicker(field, {
     lang: {
         days: [ "Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
         months: [ "Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
         today: 'hoje',
         clear: 'limpar',
         close: 'fechar'
     },
     format(dt) {
          return dt.toLocaleString('pt-BR', {
              year: '2-digit',
              month: '2-digit',
              day: '2-digit'
          })
      },
      max: (() => {
          let date = new Date()
          date.setFullYear(date.getFullYear() -limiter)
          return ((date.getFullYear()) + '/' + (date.getMonth() ) + '/' + (date.getDate()))
      })()
})

Show this:

tdp

But I wonder, should not the calendar open on the current date? Should minimum date selection not only "disable" date selection above the minimum date?

Am I wrong to find this behavior strange?

chrisdavies commented 6 years ago

I agree that this is strange. If the current date is within the min/max range, I think the current date should be selected. If current date is beyond the max range, I think max should be selected, and if current date is below the min, I think the min should be selected.

Does that make sense?

subversivo58 commented 6 years ago

Yes, that makes more sense.

Currently if there is no dialog box informed how it works, the user is "half lost" when accessing this interface the first time.

chrisdavies commented 6 years ago

Actually, it appears to be working as expected. Try tinkering with following:

TinyDatePicker(field, {
  min: new Date('2018-01-01'),
  max: new Date('2018-12-12'),
});

Here's what the calendar shows when I use your example:

image

It's showing the max date, since the current date is past the max date (which is what is expected). If the current date is within the min / max range, the current date is what shows. If the min date is greater than the current date, the min date is selected. This is the correct behavior, I think.