vue-ctk-date-time-picker便利 - もがき系プログラマの日常

はじめに

こんばんは。最近vue触ってます。

今回はDateTimePicker系の便利なライブラリである vue-ctk-date-time-picker です。

スタイルは tailwindcss を使用しています。

本題

いろいろなオプションの指定がありますが、そのへんは端折って、自分は以下みたいな感じで component可しています。

<template>
  <div class="mb-4">
    <validation-provider v-slot="{ errors }" :rules="validateRules">
      <label class="block text-sm font-bold mb-2">{{ label }}</label>
      <vue-ctk-date-time-picker
        v-model="internalValue"
        :disabled="isDisable"
        :no-label="true"
        :no-header="true"
        :no-button-now="true"
        :formatted="'YYYY-MM-DD HH:mm'"
        :format="'YYYY-MM-DD HH:mm'"
        :minute-interval="minuteStep"
        :label="placeHolder"
      />
      <p v-if="helpText.length > 0" class="text-sm text-gray-600">
        {{ helpText }}
      </p>
      <span class="text-red-500">
        {{ errors[0] }}
      </span>
    </validation-provider>
  </div>
</template>

<script>
export default {
  name: 'DateTimePicker',
  props: {
    value: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: 'テキスト'
    },
    validateRules: {
      type: String,
      default: null
    },
    isDisable: {
      type: Boolean,
      default: false
    },
    helpText: {
      type: String,
      default: ''
    },
    placeHolder: {
      type: String,
      default: '選択してください'
    },
    minuteStep: {
      type: Number,
      default: 30
    }
  },
  computed: {
    internalValue: {
      get() {
        return this.value
      },
      set(newValue) {
        if (this.value !== newValue) {
          this.$emit('update:value', newValue)
        }
      }
    }
  }
}
</script>