BIN-UI-DESIGN

English

简体中文

English

简体中文

Appearance

DatePicker ​

A date (Date) picker component.

Basic Usage ​

Set type to date (Date) for single date (Date) selection or date (Date)range for date (Date) range selection.

Set placement to control the direction in which the picker appears.

Basic
With shortcuts
<template>
  <div flex="box:mean" style="width: 600px">
    <div style="padding: 0 10px">
      <div class="demonstration">Basic</div>
      <b-date-picker v-model="value1" type="date" placeholder="Select date"></b-date-picker>
    </div>
    <div style="padding: 0 10px">
      <div class="demonstration">With shortcuts</div>
      <b-date-picker
        v-model="value2"
        type="date"
        placeholder="Select date"
        :disabled-date="disabledDate"
        :shortcuts="shortcuts"
      ></b-date-picker>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const disabledDate = time => time.getTime() > Date.now()
const shortcuts = [
  {
    text: 'Today',
    value: new Date()
  },
  {
    text: 'Yesterday',
    value: (() => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    })()
  },
  {
    text: 'A week ago',
    value: (() => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    })()
  }
]
const value1 = ref('')
const value2 = ref('')
</script>

Different Picker Types ​

Different date (Date) formats can be selected.

Year
周
Month
多个Day期
<template>
  <div flex="box:mean">
    <div style="padding: 0 10px">
      <div class="demonstration">Year</div>
      <b-date-picker v-model="value1" type="year" placeholder="选择Year"></b-date-picker>
    </div>
    <div style="padding: 0 10px">
      <div class="demonstration">周</div>
      <b-date-picker
        v-model="value2"
        type="week"
        format="gggg 第 ww 周"
        placeholder="选择周"
      ></b-date-picker>
    </div>
    <div style="padding: 0 10px">
      <div class="demonstration">Month</div>
      <b-date-picker v-model="value3" type="month" placeholder="选择Month"></b-date-picker>
    </div>
    <div style="padding: 0 10px">
      <div class="demonstration">多个Day期</div>
      <b-date-picker v-model="value4" type="dates" placeholder="选择一个或多个Day期"></b-date-picker>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

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

Date Range ​

Set type to date (Date)range for range mode.

Basic
To
With shortcuts
To
<template>
  <div flex="box:mean" style="width: 600px">
    <div style="padding: 0 10px">
      <div class="demonstration">Basic</div>
      <b-date-picker
        v-model="value1"
        type="daterange"
        range-separator="To"
        start-placeholder="Start date"
        end-placeholder="End date"
      ></b-date-picker>
    </div>
    <div style="padding: 0 10px">
      <div class="demonstration">With shortcuts</div>
      <b-date-picker
        v-model="value2"
        type="daterange"
        unlink-panels
        range-separator="To"
        start-placeholder="Start date"
        end-placeholder="End date"
        :shortcuts="shortcuts"
      ></b-date-picker>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const shortcuts = [
  {
    text: 'Last week',
    value: (() => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    })()
  },
  {
    text: 'Last month',
    value: (() => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    })()
  },
  {
    text: 'Last 3 months',
    value: (() => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    })()
  }
]
const value1 = ref('')
const value2 = ref('')
</script>

Month Range ​

Conveniently select a month range in a single picker.

Basic
to
带快捷option
to
<template>
  <div flex="box:mean" style="width: 600px">
    <div style="padding: 0 10px">
      <div class="demonstration">Basic</div>
      <b-date-picker
        v-model="value1"
        type="monthrange"
        range-separator="to"
        start-placeholder="开始Month份"
        end-placeholder="结束Month份"
      ></b-date-picker>
    </div>
    <div style="padding: 0 10px">
      <div class="demonstration">带快捷option</div>
      <b-date-picker
        v-model="value2"
        type="monthrange"
        unlink-panels
        range-separator="to"
        start-placeholder="开始Month份"
        end-placeholder="结束Month份"
        :shortcuts="shortcuts"
      ></b-date-picker>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const shortcuts = [
  {
    text: '本Month',
    value: [new Date(), new Date()]
  },
  {
    text: '今Yearto今',
    value: (() => {
      const end = new Date()
      const start = new Date(new Date().getFullYear(), 0)
      return [start, end]
    })()
  },
  {
    text: '最近六个Month',
    value: (() => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 6)
      return [start, end]
    })()
  }
]
const value1 = ref('')
const value2 = ref('')
</script>

Default Value ​

If the user has not selected a date (Date), the current month is shown by default. Use default-value to set a different default date (Date).

date
daterange
-
<template>
  <div flex="box:mean" style="width: 600px">
    <div style="padding: 0 10px">
      <div class="demonstration">date</div>
      <b-date-picker
        v-model="value1"
        type="date"
        placeholder="Pick a date"
        :default-value="new Date(2020, 4, 27)"
      ></b-date-picker>
    </div>
    <div style="padding: 0 10px">
      <div class="demonstration">daterange</div>
      <b-date-picker
        v-model="value2"
        type="daterange"
        start-placeholder="Start Date"
        end-placeholder="End Date"
        :default-value="[new Date(2020, 1, 1), new Date(2020, 10, 1)]"
      ></b-date-picker>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

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

Disabled State ​

date
daterange
-
<template>
  <div flex="box:mean" style="width: 600px">
    <div style="padding: 0 10px">
      <div class="demonstration">date</div>
      <b-date-picker
        v-model="value1"
        type="date"
        placeholder="Pick a date"
        disabled
        :default-value="new Date(2020, 4, 27)"
      ></b-date-picker>
    </div>
    <div style="padding: 0 10px">
      <div class="demonstration">daterange</div>
      <b-date-picker
        v-model="value2"
        type="daterange"
        start-placeholder="Start Date"
        end-placeholder="End Date"
        disabled
        :default-value="[new Date(2020, 1, 1), new Date(2020, 10, 1)]"
      ></b-date-picker>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

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

Date Format ​

Use format to specify the input display format. By default, the component accepts and returns Date objects. See dayjs for supported format parameters.

Use value-format to specify the format of the bound value. By default, the component binds a Date object. The format of the bound value will match the return value format.

Value:
Value: 2024-01-01

-
Value: []
-
Value: [ "2024-01-01", "2024-04-30" ]

Value:
Value: 
<template>
  <div flex="cross:center">
    <div style="padding: 0 10px; width: 500px">
      <b-date-picker
        v-model="value1"
        type="date"
        format="YYYY-MM-DD"
        placeholder="Select date"
      ></b-date-picker>
      <div>Value: {{ value1 }}</div>
    </div>
    <div style="padding: 0 10px; width: 500px">
      <b-date-picker
        v-model="value2"
        type="date"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        placeholder="Select date"
      ></b-date-picker>
      <div>Value: {{ value2 }}</div>
    </div>
  </div>
  <br />
  <div flex="cross:center">
    <div style="padding: 0 10px; width: 500px">
      <b-date-picker
        v-model="value3"
        type="daterange"
        format="YYYY-MM-DD"
        placeholder="Select date"
      ></b-date-picker>
      <div>Value: {{ value3 }}</div>
    </div>
    <div style="padding: 0 10px; width: 500px">
      <b-date-picker
        v-model="value4"
        type="daterange"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        placeholder="Select date"
      ></b-date-picker>
      <div>Value: {{ value4 }}</div>
    </div>
  </div>
  <br />
  <div flex="cross:center">
    <div style="padding: 0 10px; width: 500px">
      <b-date-picker v-model="value5" type="datetime" placeholder="Select date"></b-date-picker>
      <div>Value: {{ value5 }}</div>
    </div>
    <div style="padding: 0 10px; width: 500px">
      <b-date-picker
        v-model="value6"
        value-format="YYYY-MM-DD HH:mm:ss"
        type="datetime"
        placeholder="Select date"
      ></b-date-picker>
      <div>Value: {{ value6 }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref('')
const value2 = ref('2024-01-01')
const value3 = ref([])
const value4 = ref(['2024-01-01', '2024-04-30'])
const value5 = ref('')
const value6 = ref('')
</script>

Sizes ​

Like other form controls, four sizes are available.

<template>
  <div flex="cross:center box:mean">
    <div style="padding: 0 10px">
      <b-date-picker
        v-model="value1"
        type="date"
        size="large"
        placeholder="Select date"
      ></b-date-picker>
    </div>
    <div style="padding: 0 10px">
      <b-date-picker v-model="value1" type="date" placeholder="Select date"></b-date-picker>
    </div>
    <div style="padding: 0 10px">
      <b-date-picker
        v-model="value1"
        size="small"
        type="date"
        placeholder="Select date"
      ></b-date-picker>
    </div>
    <div style="padding: 0 10px">
      <b-date-picker
        v-model="value1"
        size="mini"
        type="date"
        placeholder="Select date"
      ></b-date-picker>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

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

Date & Time ​

Date and time can be selected together.

Basic
With shortcuts
Default time
<template>
  <div flex="cross:center box:mean">
    <div style="padding: 0 10px">
      <div class="demonstration">Basic</div>
      <b-date-picker v-model="value1" type="datetime" placeholder="Select date time"></b-date-picker>
    </div>
    <div style="padding: 0 10px">
      <div class="demonstration">With shortcuts</div>
      <b-date-picker
        v-model="value2"
        type="datetime"
        placeholder="Select date time"
        :shortcuts="shortcuts"
      ></b-date-picker>
    </div>
    <div style="padding: 0 10px">
      <div class="demonstration">Default time</div>
      <b-date-picker
        v-model="value3"
        type="datetime"
        placeholder="Select date time"
        :default-value="new Date(2000, 1, 1, 12, 0, 0)"
      ></b-date-picker>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const shortcuts = [
  {
    text: 'Today',
    value: new Date()
  },
  {
    text: 'Yesterday',
    value: (() => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    })()
  },
  {
    text: 'A week ago',
    value: (() => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    })()
  }
]
const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
</script>

Date & Time Range ​

Date and time range configuration.

Basic
to
带快捷option
to
<template>
  <div flex="cross:center box:mean" style="width: 800px">
    <div style="padding: 0 10px">
      <div class="demonstration">Basic</div>
      <b-date-picker
        v-model="value1"
        type="datetimerange"
        range-separator="to"
        start-placeholder="开始Day期"
        end-placeholder="结束Day期"
      ></b-date-picker>
    </div>
    <div style="padding: 0 10px">
      <div class="demonstration">带快捷option</div>
      <b-date-picker
        v-model="value2"
        type="datetimerange"
        range-separator="to"
        start-placeholder="开始Day期"
        end-placeholder="结束Day期"
        :shortcuts="shortcuts"
      ></b-date-picker>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const shortcuts = [
  {
    text: '最近一周',
    value: (() => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    })()
  },
  {
    text: '最近一个Month',
    value: (() => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    })()
  },
  {
    text: '最近三个Month',
    value: (() => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    })()
  }
]
const value1 = ref([new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)])
const value2 = ref('')
</script>

Default Start and End Time ​

Default start and end time

起始Day期时刻为 12:00:00
to
起始Day期时刻为 12:00:00，结束Day期时刻为 08:00:00
to
<template>
  <div flex="cross:center box:mean" style="width: 800px">
    <div style="padding: 0 10px">
      <div class="demonstration">起始Day期时刻为 12:00:00</div>
      <b-date-picker
        v-model="value1"
        type="datetimerange"
        range-separator="to"
        start-placeholder="开始Day期"
        end-placeholder="结束Day期"
        :default-time="[new Date(2021, 1, 1, 12, 0, 0)]"
      ></b-date-picker>
    </div>
    <div style="padding: 0 10px">
      <div class="demonstration">起始Day期时刻为 12:00:00，结束Day期时刻为 08:00:00</div>
      <b-date-picker
        v-model="value2"
        type="datetimerange"
        range-separator="to"
        start-placeholder="开始Day期"
        end-placeholder="结束Day期"
        :default-time="[new Date(2021, 1, 1, 12, 0, 0), new Date(2021, 2, 1, 8, 0, 0)]"
      ></b-date-picker>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

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

Props ​

ParameterDescriptionTypeOptionsDefault
value / v-modelBound valuedate (Date)(DatePicker) / array(DateRangePicker)——
readonlyFully read-onlyboolean—false
disabledDisabledboolean—false
editableText field is editableboolean—true
clearableShow clear buttonboolean—true
sizeInput sizestringlarge/medium/small/minilarge
placeholderPlaceholder for non-range selectionstring——
start-placeholderPlaceholder for start date in range selectionstring——
end-placeholderPlaceholder for end date in range selectionstring——
typePicker typestringyear/month/date (Date)/date (Date)s/ week/date (Date)time/date (Date)timerange/ date (Date)range/monthrangedate (Date)
formatDisplay format in the inputstringYYYY MM DD hh mm ssYYYY-MM-DD
value-formatFormat of the actual bound value. Note: must follow ISO 8601 format for parsing the given stringstringYYYY MM DD hh mm ss—
popper-classCustom class name for DatePicker dropdownstring——
range-separatorSeparator for range selectionstring—'-'
default-valueOptional, default date displayed when the picker opensDateParseable by new Date()—
default-timeThe specific time of day used when selecting a date in range selectionDate[]Array of length 2, the first specifies the start time, the second specifies the end time. Defaults to 00:00:00 if not specified—
unlink-panelsUnlink the two date panels in the range pickerboolean—false
prefix-iconCustom prefix icon class namestring——
clear-iconCustom clear icon class namestring——
validate-eventWhether to trigger form validation on inputboolean-true
shortcutsSet shortcut options, requires an array of objectsobject[{ text: string, value: Date }]——
disabledDateSet disabled state. Parameter is the current date, must return a BooleanFunction——

Events ​

Event NameDescriptionCallback Parameters
changeTriggers when the user confirms the selected valueComponent bound value
blurTriggers when input loses focusComponent instance
focusTriggers when input gains focusComponent instance

Methods ​

Method NameDescriptionParameter
focusMake input gain focus—

MIT Licensed | Copyright © 2023-present bin-ui-design