Informations

This component uses MazInput and therefore inherits all these options


This component is based on MomentJS

You can use any locale available in moment package.


Top or bottom position of pickers is calculate

But you can set the position with "position" props attribute :

  <MazPicker
  v-model="pickerValue"
  position="top right"
  @formatted="pickerFormatted = $event"
/>

Date Time Picker
Basic

Options: none

Value : null

Formatted value : null

Date Picker
Small input size clearable with input value formatted

Options: no-time - clearable - size="sm" - formatted="ll" - placeholder="Select date" - color="secondary"

Value : 2020-02-03

Formatted value : null

Double Date Picker
Large input size - french format - custom placeholder

Options: double - size="lg" - format="DD-MM-YYYY" - placeholder="Select date in big calander" - no-time

Value : 03-02-2020

Formatted value : null

Range Double Date Picker
Position forced

Options: range - double - position="top right" - placeholder="Select period" - color="third"

Value : null

Formatted value : null

date_range
Inline Double Date Time Picker
Min & max dates provided & without time picker

Options: inline - min-date="2020-05-05" - max-date="2020-06-22" - no-time

Value : 2020-05-15

Formatted value : null

2020
Friday, May 15
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Mon
Tue
Wed
Thu
Fri
Sat
Time Picker
Min & max dates provided & without time picker

Options: no-date - placeholder="Select time"

Value : null

Formatted value : null

Range Double Date Picker
Custom shortcuts

Options: range - double - placeholder="Select period" - custom-shortcuts

Value : null

Formatted value : null

Disabled

Value : 2020-05-15

Formatted value : null


How to use it ?

  <template>
  <MazPicker
    v-model="pickerValue"
  />
</template>

<script>
  import { MazPicker } from 'maz-ui'
  export default {
    components: { MazPicker },
    data () {
      return {
        pickerValue: null
      }
    }
  }
</script>