Pitcher Datetime Picker

Simple Usage

Simple usage example of PNumpadInput.

Show Code

<template>
  <div>
    <div>
      <code>dateTime:</code>
      <span class="secondary--text">
        {{ datetime }}
      </span>
    </div>
    <div class="mb-6">
      <code>timezone:</code>
      <span class="secondary--text">
        {{ timezoneOffset }}
      </span>
    </div>
    <PDatetimePicker v-model="datetime" v-bind="attrs" />
  </div>
</template>

<script>
import { PDatetimePicker } from '@pitcher/pitcherify'
import { computed, defineComponent, reactive, toRefs } from '@vue/composition-api'

export default defineComponent({
  name: 'ExampleComponent',
  components: {
    PDatetimePicker,
  },
  setup() {
    const state = reactive({
      attrs: {
        // enableAmPm: false,
        // withInitialValue: false,
        // locale: 'en-US',
        lazy: false,
        type: 'datetime',
      },
      datetime: '2021-10-10 16:00:00',
      // datetime: new Date(),
      // datetime: null,
      // datetime: new Date('2021-10-10'),
      // datetime: '2021-05-05',
      // datetime: '2021-10-10T16:00:00.000+0000',
      // datetime: '2021-10-10T16:00:00.758Z',
    })

    const timezoneOffset = computed(() => {
      let offset = Math.floor(new Date(state.datetime).getTimezoneOffset() / 60)

      offset = `GMT ${offset < 0 ? '+' : '-'}${Math.abs(offset)}`

      return offset
    })

    return { ...toRefs(state), timezoneOffset }
  },
})
</script>

Lazy

Using with lazy property.

Show Code

<template>
  <div>
    <PDatetimePicker v-model="datetime" lazy type="datetime" locale="en-US" />
  </div>
</template>

<script>
import { PDatetimePicker } from '@pitcher/pitcherify'
import { defineComponent, reactive, toRefs } from '@vue/composition-api'

export default defineComponent({
  name: 'ExampleComponent',
  components: {
    PDatetimePicker,
  },
  setup() {
    const state = reactive({
      datetime: new Date(),
    })

    return { ...toRefs(state) }
  },
})
</script>

Using as DatePicker only

Using PDatetimePicker only as a DatePicker. To change type of the DatePicker, use type="date" or do not add type param at all as default value of type property is "date".

Show Code

<template>
  <div>
    <PDatetimePicker v-model="datetime" withInitialValue type="date" locale="en-US" />
  </div>
</template>

<script>
import { PDatetimePicker } from '@pitcher/pitcherify'
import { defineComponent, reactive, toRefs } from '@vue/composition-api'

export default defineComponent({
  name: 'ExampleComponent',
  components: {
    PDatetimePicker,
  },
  setup() {
    const state = reactive({
      datetime: null,
    })

    return { ...toRefs(state) }
  },
})
</script>

API

src: pitcherify/src/components/PDatetimePicker/PDatetimePicker.vue fa fa-external-link

Pitcher props

Vuetify props

Inherits attributes from vuetify component: VDatePicker

Pass props at: *   (* means root level as Pitcher props on the <VDatePicker />)

Props listed below can be used on <PDatetimePicker />

Events

Slots