CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
JMon
JMon

Reputation: 3447

get an array of dates from today for datepicker with Javascript

I am trying to write a function that returns an array of dates from today till the maximum date, so that I can restrict the date picker selection. At the moment I have the following:-

   datesAfterToday: function (date) {
    var dates = []
    var currentDate = new Date()
    var endDate = new Date(8640000000000000).getFullYear()
    var addDays = function (days) {
      var date = new Date(this.valueOf())
      date.setDate(date.getDate() + days)
      return date
    }
    while (currentDate <= endDate) {
      dates.push(currentDate)
      currentDate = addDays.call(currentDate, 1)
    }
    return dates
  }

and then I am using Vue.js to mount it as follows :-

 mounted () {
   this.allowedDates = this.datesAfterToday
 },

however I am only getting an array of objects instead of the proper array.

How can I get the proper array of dates so that I can bind it to the allowdates property.

Thanks for your help and time!

Upvotes: 1

Views: 2584

Answers (2)

Khauri
Khauri

Reputation: 3863

For starters new Date(8640000000000000).getFullYear() will set endDate to the year of that date, which is 275760. currentDate will be today's date (in milliseconds), which at the time of me writing is 1511272934156. As you can see currentDate is always greater than endDate, so your while loop never goes to the statements inside.

Another issue is that the date you picked is really far in the future and you're populating an array one day at a time. Your loop will most likely make the page freeze or crash completely. Try picking a date that's more manageable.

For instance, in the snippet below I set endDate by first initializing it to today, then setting the year to exactly one year from now. This gives me an array with roughly 365 values.

You can imagine how big this array would be if I used a year that was 273,748 years in the future.

var dates = []
var currentDate = new Date()
var endDate = new Date()

endDate.setFullYear(endDate.getFullYear()+1)

var addDays = function (days) {
  var date = new Date(this.valueOf())
  date.setDate(date.getDate() + days)
  return date
}

while (currentDate <= endDate) {
  dates.push(currentDate)
  currentDate = addDays.call(currentDate, 1)
}
    
console.log(dates)

With all that being said, it looks like you're actually allowed to pass an object specifying the minimum and maximum values rather than an array.

https://vuetifyjs.com/components/pickers#example-6

let d = new Date()                  // today
let d2 = new Date()    
d2.setFullYear(date.getFullYear()+1) // Next year

this.allowedDays = {
    min : d.toISOString().substr(0, 10), // e.g. 2017-11-21
    max : d2.toISOString().substr(0, 10)
}

Upvotes: 1

Tim Hutchison
Tim Hutchison

Reputation: 3633

Another option would be to use vuejs-datepicker For example:

<script>
var state = {
    disabled: {
        to: new Date(), // Disable all dates up to specific date
        from: new Date(8640000000000000) // Disable all dates after specific date        
    }
}
</script>

<datepicker :disabled="state.disabled"></datepicker>

See Disabled Dates in the documentation.

Upvotes: 0

Related Questions