Date time picker

Basic Usage

The date time picker have several themes: default, transparent

Default theme

Transparent theme

<template>
  <div class="flex">
    <HcDateTimePicker
      v-model="value1"
      label="Default theme"
      placeholder="MM / DD / YYYY"
      class="w-80"
    />

    <HcDateTimePicker
      v-model="value2"
      label="Transparent theme"
      placeholder="MM / DD / YYYY"
      class="w-80 ml-10"
      theme="transparent"
    />
  </div>
</template>

<script lang="ts" setup>
import { HcDateTimePicker } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref('');
const value2 = ref('');
</script>

Sizes

The date time pickers have text sizes: small, medium

The date time pickers have sizes: small, medium

Medium text size

Small text size

Medium size

Small size

<template>
  <div class="">
    <div class="grid grid-cols-2 gap-6 items-start">
      <HcDateTimePicker
        v-model="value1"
        label="Medium text size"
        placeholder="MM / DD / YYYY"
        class="w-80"
        text-size="medium"
      />

      <HcDateTimePicker
        v-model="value2"
        label="Small text size"
        placeholder="MM / DD / YYYY"
        class="w-80"
        text-size="small"
      />
    </div>

    <div class="grid grid-cols-2 gap-6 items-start mt-5">
      <HcDateTimePicker
        v-model="value3"
        label="Medium size"
        placeholder="MM / DD / YYYY"
        class="w-80"
        size="medium"
      />
      <HcDateTimePicker
        v-model="value4"
        label="Small size"
        placeholder="MM / DD / YYYY"
        class="w-full"
        size="small"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { HcDateTimePicker } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref('');
const value2 = ref('');
const value3 = ref('');
const value4 = ref('');

</script>

Types

Use props type to determinate type of the picker

Date

Date and time

Month

<template>
  <div class="grid grid-cols-3 gap-3 items-start">
    <HcDateTimePicker
      v-model="value1"
      label="Date"
      placeholder="MM / DD / YYYY"
      type="date"
    />

    <HcDateTimePicker
      v-model="value2"
      label="Date and time"
      placeholder="MM"
      type="datetime"
    />

    <HcDateTimePicker
      v-model="value3"
      label="Month"
      placeholder="MM"
      type="month"
      format="MMMM"
    />
  </div>
</template>

<script lang="ts" setup>
import { HcDateTimePicker } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref('');
const value2 = ref('');
const value3 = ref('');
</script>

States

Use props disabled, readonly or clearable

Disabled

Readonly

Clearable

<template>
  <div class="grid grid-cols-3 gap-3 items-start">
    <HcDateTimePicker
      v-model="value1"
      label="Disabled"
      disabled
    />

    <HcDateTimePicker
      v-model="value2"
      label="Readonly"
      readonly
    />

    <HcDateTimePicker
      v-model="value3"
      label="Clearable"
      clearable
    />
  </div>
</template>

<script lang="ts" setup>
import { HcDateTimePicker } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref('');
const value2 = ref('');
const value3 = ref('');

</script>

Error

Use props errorMsg to show error message or use prop boolean error to detarmitate error state of the component

Error

Error msg

This field is required

Error and disabled

<template>
  <div class="grid grid-cols-3 gap-3 items-start">
    <HcDateTimePicker
      v-model="value1"
      label="Error"
      error
    />

    <HcDateTimePicker
      v-model="value2"
      label="Error msg"
      error-msg="This field is required"
    />

    <HcDateTimePicker
      v-model="value3"
      label="Error and disabled"
      error
      disabled
    />
  </div>
</template>

<script lang="ts" setup>
import { HcDateTimePicker } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref('');
const value2 = ref('');
const value3 = ref('');
</script>

Props

Property	Type	Values	Description	Default
modelValue	String	String	binding value	false
format	String	String	format of the displayed value in the input box	undefined
size	String	smallmedium	component size	medium
textSize	String	smallmedium	component field text size	small
clearable	Boolean	Boolean	whether to show clear button	false
theme	String	defaulttransparent	component default	default
label	String	String	label text
placeholder	String	String	placeholder text	MM/DD/YYYY
type	String	year/month/date/datetime/ week/datetimerange/daterange	type of the picker	datetime
disabledDate	Function	Function	function that determining if a date is disabled with that date as its parameter. Should return a Boolean
disabled	Boolean	Boolean	whether component is disabled	false
readonly	Boolean	Boolean	whether component is read only	false
error	Boolean	Boolean	determine if the component has error and change its style to that state.	false
errorMsg	String	String	error message

Slots

Property	Type	Values	Description	Default
label-suffix		-	customize label suffix content

Events

Property	Type	Values	Description
update:model-value	Function	value - string	triggers when the binding value changes
change	Function	value - string	triggers when the binding value changes
blur	Function	event - FocusEvent	triggers when DateTimePicker blurs
focus	Function	event - FocusEvent	triggers when DateTimePicker focuses
visible-change	Function	visible - boolean	triggers when the DateTimePicker's dropdown appears/disappears

Date time picker #

Basic Usage #

Sizes #

Types #

States #

Error #

Props #

Slots #

Events #

Date time picker

Basic Usage

Sizes

Types

States

Error

Props

Slots

Events