vba日期选择器用法_范围日期选择器，用法简单

最新推荐文章于 2024-08-03 08:59:54 发布

cuk5340

最新推荐文章于 2024-08-03 08:59:54 发布

阅读量2.6k

点赞数

文章标签：字符串 js python javascript vue ViewUI

原文链接：https://vuejsexamples.com/range-date-picker-with-simple-usage/

版权

VueRangedatePicker是一个Vue.js组件，提供日期范围选择功能。它可以用于Web应用程序中，支持各种事件和属性配置。例如，可以通过监听'selected'事件获取选定日期，并通过props传递配置对象以自定义日期格式、语言和其他样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vba日期选择器用法

VueRangedatePicker (VueRangedatePicker)

Date picker with range selection.

带有范围选择的日期选择器。

View demo 查看演示 Download Source 下载源

安装 (Installation)

npm install --save vue-rangedate-picker

用法 (Usage)

捆绑器(Webpack，汇总) (Bundler (Webpack, Rollup))

import Vue from 'vue'
import VueRangedatePicker from 'vue-rangedate-picker'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'vue-rangedate-picker/dist/vue-rangedate-picker.css'

Vue.use(VueRangedatePicker)

浏览器 (Browser)

<!-- Include after Vue -->
<!-- Local files -->
<link rel="stylesheet" href="vue-rangedate-picker/dist/vue-rangedate-picker.css"></link>
<script src="vue-rangedate-picker/dist/vue-rangedate-picker.js"></script>

<!-- From CDN -->
<link rel="stylesheet" href="https://unpkg.com/vue-rangedate-picker/dist/vue-rangedate-picker.css"></link>
<script src="https://unpkg.com/vue-rangedate-picker"></script>

可用事件 (Available Events)

You can catch these below Events to <rangedate-picker @events="events"></rangedate-picker> template :

您可以将以下事件捕获到<rangedate-picker @events="events"></rangedate-picker>模板中：

selected

已选

Description : function that will $emit when datepicker set value, this function will get parameter response :

说明：该函数将在datepicker设置值时$emit ，此函数将获得参数响应：
```
{
  start: dateObjectStart
  end: dateObjectEnd
}
```

可用道具 (Available Props)

You can pass these below props to <rangedate-picker :props="props"></rangedate-picker> template :

您可以将以下这些道具传递到<rangedate-picker :props="props"></rangedate-picker>模板：

configs

配置

Description : -

说明：-

Type : Object

类型：对象

Default Value : {}

默认值 ： {}
i18n

i18n

Description : For text translation (currently: ID/EN)

描述：用于文本翻译(当前：ID / EN)

Type : String

类型：字符串

Default Value : 'ID'

默认值 ： 'ID'

months

月

Description : Array of months name

描述：月份名称数组

Type : Array

类型：数组

Default Value :

预设值 ：

['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli',
 'Agustus', 'September', 'Oktober', 'November', 'Desember']

shortDays

短日子

Description : Array of days name in short

描述：短名称的天数组

Type : Array

类型：数组

Default Value :

预设值 ：
```
['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab']
```
captions

字幕

Description : Object for text title and OK button

描述：文本标题和“确定”按钮的对象

Type : Object

类型：对象

Default Value :

预设值 ：
```
{
  'title': 'Choose Dates',
  'ok_button': 'Apply'
}
```
format

格式

Description : Date format

描述：日期格式

Type : String

类型：字符串

Default Value : 'DD MMM YYYY'

默认值 ： 'DD MMM YYYY'

styles

样式

Description : -

说明：-

Type : Object

类型：对象

Default Value :

预设值 ：

{
  daysWeeks: 'calendar_weeks',
  days: 'calendar_days',
  daysSelected: 'calendar_days_selected',
  daysInRange: 'calendar_days_in-range',
  firstDate: 'calendar_month_left',
  secondDate: 'calendar_month_right',
  presetRanges: 'calendar_preset-ranges'
}

initRange

initRange

Description : -

说明：-

Type : Object

类型：对象

Default Value : null

默认值 ： null
startActiveMonth

startActiveMonth

Description : Month will be shown in first launch

说明：月份将在首次启动时显示

Type : Number

类型：数字

Default Value : new Date().getMonth()

默认值 ： new Date().getMonth()
startActiveYear

startActiveYear

Description : Year will be shown in first launch

说明：年份将在首次启动时显示

Type : Number

类型：数字

Default Value : new Date().getFullYear()

默认值 ： new Date().getFullYear()

presetRanges

预设范围

Description : Set of objects that will shown as quick selection of daterange

描述：一组对象，将显示为快速选择日期范围

Type : Object

类型：对象

Example Object :

示例对象：

{
  today: function () {
    const n = new Date()
    const startToday = new Date(n.getFullYear(), n.getMonth(), n.getDate() + 1, 0, 0)
    const endToday = new Date(n.getFullYear(), n.getMonth(), n.getDate() + 1, 23, 59)
    return {
      label: presetRangeLabel[i18n].today,
      active: false,
      dateRange: {
        start: startToday,
        end: endToday
      }
    }
  }
}

Default Value :

预设值 ：

{
  today: function () {
    return {
      // label: 'string', active: 'boolean', dateRange: {start: date, end: end}
    }
  },
  thisMonth: function () {},
  lastMonth: function () {},
  last7days: function () {},
  last30days: function () {}
}

compact

紧凑

Description : Set to 'true' if you want to make datepicker always shown in compact mode

描述：如果要使日期选择器始终以紧凑模式显示，则设置为'true'

Type : String

类型：字符串

Default Value : 'false'

默认值 ： 'false'
righttoleft

右到左

Description : Set to 'true' if you want datepicker shown align to right

说明：如果希望显示的日期选择器right对齐，则设置为'true'

Type : String

类型：字符串

Default Value : 'false'

默认值 ： 'false'

发展历程 (Development)

启动视觉测试 (Launch visual tests)

npm run dev

发起因果报应 (Launch Karma with coverage)

npm run dev:coverage

建立 (Build)

Bundle the js and css of to the dist folder:

将的js和CSS捆绑到dist文件夹：

npm run build

出版 (Publishing)

The prepublish hook will ensure dist files are created before publishing. This way you don't need to commit them in your repository.

prepublish挂钩将确保在发布之前创建dist文件。这样，您无需在存储库中提交它们。

# Bump the version first
# It'll also commit it and create a tag
npm version
# Push the bumped package and tags
git push --follow-tags
# Ship it 🚀
npm publish

翻译自: https://vuejsexamples.com/range-date-picker-with-simple-usage/

vba日期选择器用法