CODEWITHSUNDEEP
vue.js
Scubbero
Scubbero

Reputation: 41

How to set monday as start of week instead of sunday in bliblidotcom vue-rangedate-picker

For this project i need for the week to start on monday opposed to sunday, and the documentation of the vue component doesn't say if it's possible. Is there a way to modify it?

Thanks in advance

Upvotes: 0

Views: 2238

Answers (2)

Scubbero
Scubbero

Reputation: 41

I managed it by extending the plugin and overwriting startMonthDay and startNextMonthDay computed properties to match monday as a starting weekday.

Code used below:

<script>
  import VueRangedatePicker from 'vue-rangedate-picker';
  export default{
    name:'selector-fecha',
    extends: VueRangedatePicker,
    data: function(){
      return{
      }
    },
    computed: {
        startMonthDay:function(){
          return new Date(this.activeYearStart,this.activeMonthStart,0).getDay()
        },
        startNextMonthDay:function(){
          return new Date(this.activeYearStart,this.startNextActiveMonth,0).getDay()
        },
    }
  }
</script>

Thanks for your answers

Upvotes: 1

Taylor
Taylor

Reputation: 1253

It does not appear to a straight forward way to change the ordering of the calendar. I would go with a package like this that is more supported, more flexible and doesn't have a failing build.

Highlight example

<script>
var state = {
  highlighted: {
    to: new Date(2016, 0, 5), // Highlight all dates up to specific date
    from: new Date(2016, 0, 26), // Highlight all dates after specific date
    days: [6, 0], // Highlight Saturday's and Sunday's
    daysOfMonth: [15, 20, 31], // Highlight 15th, 20th and 31st of each month
    dates: [ // Highlight an array of dates
      new Date(2016, 9, 16),
      new Date(2016, 9, 17),
      new Date(2016, 9, 18)
    ],
    // a custom function that returns true of the date is highlighted
    // this can be used for wiring you own logic to highlight a date if none
    // of the above conditions serve your purpose
    // this function should accept a date and return true if is highlighted
    customPredictor: function(date) {
      // highlights the date if it is a multiple of 4
      if(date.getDate() % 4 == 0){
        return true
      }
    },
    includeDisabled: true // Highlight disabled dates
  }
}
</script>
<datepicker :highlighted="state.highlighted"></datepicker>

Upvotes: 0

Related Questions