gdui2

# Datepicker 日期选择器

# 基础用法

21
<template>
  <div>
    <gd-datepicker
      v-model="date1">
    </gd-datepicker>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        date1: new Date(),
      };
    },
  };
</script>

# 不同尺寸

21
21
21
21
<template>
  <div>
    <gd-datepicker
      size="small"
      v-model="date1">
    </gd-datepicker>
    <gd-datepicker
      v-model="date1">
    </gd-datepicker>
    <gd-datepicker
      size="large"
      v-model="date1">
    </gd-datepicker>
    <gd-datepicker
      size="larger"
      v-model="date1">
    </gd-datepicker>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        date1: new Date(),
      };
    },
  };
</script>

# 时间段

21
21
<template>
  <div>
    <gd-datepicker
      v-model="date1"
      range>
    </gd-datepicker>
    <gd-datepicker
      type="month"
      range>
    </gd-datepicker>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        date1: new Date(),
      };
    },
  };
</script>

# 年份

21
<template>
  <div>
    <gd-datepicker
      v-model="date1"
      type="year"
      format="YYYY">
    </gd-datepicker>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        date1: new Date(),
      };
    },
  };
</script>

# 月份

21
<template>
  <div>
    <gd-datepicker
      v-model="date1"
      type="month"
      format="YYYY-MM">
    </gd-datepicker>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        date1: new Date(),
      };
    },
  };
</script>

# 时间

21
<template>
  <div>
    <gd-datepicker
      v-model="date1"
      type="time"
      format="HH:mm:ss">
    </gd-datepicker>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        date1: new Date(),
      };
    },
  };
</script>

# 日期时间

21
21
<template>
  <div>
    <gd-datepicker
      v-model="date1"
      type="datetime"
      format="YYYY-MM-DD HH:mm:ss">
    </gd-datepicker>
    <gd-datepicker
      v-model="date2"
      type="datetime"
      range
      format="YYYY-MM-DD HH:mm:ss">
    </gd-datepicker>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        date1: new Date(),
        date2: [],
      };
    },
  };
</script>

# 带确认按钮

21
<template>
  <div>
    <gd-datepicker
      v-model="date8"
      type="datetime"
      format="YYYY-MM-DD HH:mm:ss"
      confirm>
    </gd-datepicker>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        date8: '',
      };
    },
  };
</script>

# 只读

21
<template>
  <div>
    <gd-datepicker
      readonly
      v-model="date1">
    </gd-datepicker>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        date1: new Date(),
      };
    },
  };
</script>

# 禁用

21
<template>
  <div>
    <gd-datepicker
      disabled
      v-model="date1">
    </gd-datepicker>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        date1: new Date(),
      };
    },
  };
</script>

# 属性配置

# props

参数 说明 类型 可选值 默认值
value/v-model 值 String - -
size 尺寸 String larger/large/small -
value-type 值类型 String timestamp/date/format date
placeholder 占位符 String - -
format 日期格式 String - YYYY-MM-DD
type 类型 String date/datetime/time/year/month date
range 是否选择时间段 Boolean - false
disabled 禁用状态 Boolean - false
readonly 只读状态 Boolean - false
confirm 是否确认按钮 Boolean - false
clearable 内容可清除 Boolean - true

# events

事件名 说明 返回值
change 值改变事件 value
clear 值清除事件 -
blur blur事件 event
focus focus事件 event

← Timeline 时间轴 →

Loading...

提示

提示