Vue persian datetime picker

# Disabling

# Disable datepicker

<date-picker :disabled="true" />

disabled = true

# Disable dates

  • String
<date-picker disable="1397/05/09" />
  • Day name
<date-picker disable="Friday" />
  • Array of strings
<date-picker :disable="['1397/05/07', '1397/05/08', 'Friday']" />
  • Regular expression
<date-picker :disable="/1397\/05\/1(.*)/" />
  • Array of strings and RegExp
<date-picker :disable="['1397/05/06', /1397\/05\/1(.*)/]" />
  • Function
<date-picker :disable="checkDate" />
<script>
export default {
  methods: {
    checkDate(formatted, dateMoment, checkingFor) {
      return (
        formatted === '1397/04/03' ||
        dateMoment.jMonth() === 4  ||  // means "mordad"
        dateMoment.locale('en').format('dddd') === 'Friday'
      )
    }
  }
}
</script>
  • Datetime examples
String
<date-picker type="datetime" disable="1397/05/06 22:00" />

Array of strings
<date-picker type="datetime" :disable="['1397/05/05', '1397/05/06 22:05', 'Friday']" />

Regular Expressions
<date-picker type="datetime" :disable="/1397\/05\/0[1-9] 12:(.*)/" />

Array of strings and RegExp
<date-picker type="datetime" :disable="['1397/05/06 12:00', /(.*)22:(.*)/]" />
  • Time examples
String
<date-picker type="time" disable="22:00" />

Array of strings
<date-picker type="time" :disable="['22:00', '22:05', '22:10']" />

Regular Expressions
<date-picker type="time" :disable="/22:(.*)/" />

Array of strings and RegExp
<date-picker type="time" :disable="['22:00', /22:1[0-5]/]" />

← Label →