nutui/src/packages/__VUE/datepicker/doc.en-US.md

DatePicker

Intro

Used to select time, support date and time dimensions, usually used with the Popup component.

Install

import { createApp } from 'vue';
// vue
import { DatePicker, Picker, Popup, OverLay } from '@nutui/nutui';
// taro
import { DatePicker, Picker, Popup, OverLay } from '@nutui/nutui-taro';

const app = createApp();
app.use(DatePicker);
app.use(Picker);
app.use(Popup);
app.use(OverLay);

Choose Date

:::demo

<template>
  <nut-cell title="Show Chinese" :desc="desc" @click="show = true"></nut-cell>
  <nut-datepicker
      v-model="currentDate"
      v-model:visible="show"
      :min-date="minDate"
      :max-date="maxDate"
      :is-show-chinese="true"
      :three-dimensional="false"
      @confirm="confirm"
  ></nut-datepicker> 
</template>

<script>
  import { ref } from 'vue';
  export default {
    setup(props) {
      const show = ref(false);
      const desc = ref('2022-05-10');
      const minDate = new Date(2020, 0, 1),
      const maxDate = new Date(2025, 10, 1),
      const currentDate = new Date(2022, 4, 10, 10, 10);
      const confirm = ({ selectedValue, selectedOptions })=>{
        desc.value = selectedOptions.map((option) => option.text).join('');
      }
      return {
        currentDate,
        show,
        desc,
        minDate,
        maxDate,
        confirm
      };
    }
  };
</script>

:::

Choose Month-Day

:::demo

<template>
  <nut-cell title="Limit the start and end time" :desc="desc" @click="show = true"></nut-cell>
  <nut-datepicker
      v-model="currentDate"
      type="month-day"
      title="Choose Time"
      :min-date="new Date(2022, 0, 1)"
      :max-date="new Date(2022, 7, 1)"
      @confirm="confirm"
      v-model:visible="show"
  ></nut-datepicker> 
</template>

<script>
  import { ref } from 'vue';
  export default {
    setup(props) {
      const show = ref(false);
      const desc = ref('05-10');
      const currentDate = new Date(2022, 4, 10, 10, 10);
      const confirm = ( { selectedValue, selectedOptions } )=>{
        desc.value = selectedValue.join('-');
      }
      return {
        show,
        desc,
        currentDate,
        confirm
      };
    }
  };
</script>

:::

Choose DateTime

:::demo

<template>
  <nut-cell title="Choose Time" :desc="desc" @click="show = true"></nut-cell>
  <nut-datepicker
      v-model="currentDate"
      title="Choose Time"
      type="datetime"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="confirm"
      v-model:visible="show" 
  ></nut-datepicker> 
</template>
<script>
  import { ref } from 'vue';
  export default {
    setup(props) {
      const show = ref(false);
      const desc = ref('2022-05-10 10:10');
      const currentDate = new Date(2022, 4, 10, 10, 10);
      const confirm = ( { selectedValue, selectedOptions } )=>{
        date = selectedValue.slice(0, 3).join('-');
        time = selectedValue.slice(3).join(':');
        desc.value = date + ' ' + time;
      }
      return {
        show,
        desc,
        currentDate,
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        confirm
      };
    }
  };
</script>

:::

Choose Time

:::demo

<template>
  <nut-cell title="Choose Time" :desc="desc" @click="show = true"></nut-cell>
  <nut-datepicker
      v-model="currentDate"
      title="Choose Time"
      type="time"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="confirm"
      v-model:visible="show"
  ></nut-datepicker>
</template>
<script>
  import { ref } from 'vue';
  export default {
    setup(props) {
      const show = ref(false);
      const desc = ref('10:10:00');
      const currentDate = new Date(2022, 4, 10, 10, 10);
      const confirm = ( { selectedValue, selectedOptions } )=>{
        desc.value = selectedValue.join(':');
      }
      return {
        show,
        desc,
        currentDate,
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        confirm
      };
    }
  };
</script>

:::

Option Formatter

:::demo

<template>
  <nut-cell title="Choose Time" :desc="desc" @click="show = true"></nut-cell>
  <nut-datepicker
      v-model="currentDate"
      title="Choose Time"
      type="datetime"
      :min-date="new Date(2022, 0, 1)"
      :max-date="new Date(2022, 10, 1)"
      :formatter="formatter"
      @confirm="confirm"
      v-model:visible="show"
  ><nut-button block type="primary" @click="alwaysFun">Forever</nut-button></nut-datepicker>
</template>
<script>
  import { ref } from 'vue';
  export default {
    setup(props) {
      const show = ref(false);
      const desc = ref('10:10:00');
      const currentDate = new Date(2022, 4, 10, 10, 10);
      const confirm = ( { selectedValue, selectedOptions } )=>{
        date = selectedOptions.slice(1, 3).map((op) => op.text).join('');
        time = selectedOptions.slice(3).map((op) => op.value).join(':');
        desc.value = selectedOptions[0].text + 'Year' + date + ' ' + time;
      }
      const formatter = (type: string, option) => {
        switch (type) {
          case 'year':
            option.text += '';
            break;
          case 'month':
            option.text += 'Month';
            break;
          case 'day':
            option.text += 'Day';
            break;
          case 'hour':
            option.text += 'Hour';
            break;
          case 'minute':
            option.text += 'Minute';
            break;
          default:
            option.text += '';
        }
        return option;
      };
      const alwaysFun = () => {
        show.value = false;
        desc.value = 'Forever';
      };
      return {
        show,
        desc,
        currentDate,
        confirm,
        formatter,
        alwaysFun
      };
    }
  };
</script>

:::

Option Steps

:::demo

<template>
  <nut-cell title="Choose Time" :desc="desc" @click="show = true"></nut-cell>
  <nut-datepicker
      v-model="currentDate"
      type="time"
      :minute-step="5"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="confirm"
      v-model:visible="show"
  ></nut-datepicker>
</template>
<script>
  import { ref } from 'vue';
  export default {
    setup(props) {
      const show = ref(false);
      const desc = ref('10:10:00');
      const currentDate = new Date(2022, 4, 10, 10, 10);
      const confirm = ( { selectedValue, selectedOptions } )=>{
        desc.value = selectedValue.join(':');
      }
      return {
        show,
        desc,
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        confirm
      };
    }
  };
</script>

:::

Option Filter

:::demo

<template>
  <nut-cell title="Choose Time" :desc="desc" @click="show = true"></nut-cell>
  <nut-datepicker
      v-model="currentDate"
      title="Choose Time"
      type="datehour"
      :min-date="minDate"
      :max-date="maxDate"
      :filter="filter"
      :formatter="formatter"
      @confirm="confirm"
      v-model:visible="show"
  ></nut-datepicker>
</template>
<script>
  import { ref } from 'vue';
  export default {
    setup(props) {
      const show = ref(false);
      const desc = ref('2022-05-10 00');
      const currentDate = new Date(2022, 4, 10, 0, 0);
      const formatter = (type: string, option) => {
        switch (type) {
          case 'year':
            option.text += 'Year';
            break;
          case 'month':
            option.text += 'Month';
            break;
          case 'day':
            option.text += 'Day';
            break;
          case 'hour':
            option.text += 'Hour';
            break;
          default:
            option.text += '';
        }
        return option;
      };

      const filter = (type: string, options) => {
        if (type == 'hour') {
          return options.filter((option) => Number(option.value) % 6 === 0);
        }
        return options;
      };
      const confirm = ( { selectedValue, selectedOptions } )=>{
        descList[index].value = selectedOptions.map((option) => option.text).join('');
      }
      return {
        show,
        desc,
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        confirm,
        formatter,
        filter
      };
    }
  };
</script>

:::

API

Props

Attribute	Description	Type	Default
v-model	Default Date	Date	null
v-model:visible	Is Show	Boolean	false
type	Can be set to date time year-month month-day datehour	String	'date'
minute-step	Option minute step	Number	1
is-show-chinese	Show Chinese	Boolean	false
min-date	Start date	Date	Ten years ago on January 1
max-date	End date	Date	Ten years later on December 31
formatter v3.1.18	Option text formatter	(type: string, option: PickerOption) => PickerOption
filter v3.1.18	Option filter	(type: string, option: PickerOption) => PickerOption[]
title	Title	String	null
ok-text	Text of confirm button	String	confirm
cancel-text	Text of cancel button	String	cancel
three-dimensional v3.1.23	Turn on 3D effects	Boolean	true
swipe-duration v3.2.2	Duration of the momentum animation	Number、String	1000
safe-area-inset-bottom v3.2.4	Whether to enable iPhone series full screen bottom safety zone adaptation, which is only valid when position is bottom	Boolean	false

Events

Event	Description	Arguments
confirm	Emitted when click confirm button.	{ selectedValue, selectedOptions }
close	Emitted when click close button.	{ selectedValue, selectedOptions }
change	Emitted when current option changed.	{ columnIndex, selectedValue, selectedOptions }

Slots

Event	Description
default	Custom content bottom columns
top	Custom content top columns