# default-calendar

> 自定义日历组件

Latest version **0.3.7** (published 2022-12-31) · ISC license · 0 weekly downloads

## Install

```sh
npm install default-calendar
pnpm add default-calendar
yarn add default-calendar
bun add default-calendar
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.7 |
| Published | 2022-12-31 |
| First published | 2022-09-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 323.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | zero~one~gu |

## Links

- npm: https://www.npmjs.com/package/default-calendar
- Repository: https://github.com/register2019/calendar
- Homepage: https://github.com/register2019/calendar#readme
- Issues: https://github.com/register2019/calendar/issues
- npm.io page: https://npm.io/package/default-calendar

## Recent versions

- 0.3.7 (latest) — 2022-12-31
- 0.3.6 — 2022-12-30
- 0.3.5 — 2022-12-28
- 0.3.4 — 2022-12-27
- 0.3.3 — 2022-12-25
- 0.3.2 — 2022-11-12
- 0.3.1 — 2022-11-06
- 0.3.0 — 2022-11-06
- 0.2.9 — 2022-11-06
- 0.2.8 — 2022-11-01
- 0.2.7 — 2022-11-01
- 0.2.6 — 2022-10-29
- 0.2.5 — 2022-10-29
- 0.2.4 — 2022-10-24
- 0.2.3 — 2022-10-23
- … 20 more at https://npm.io/package/default-calendar/versions

## README

## 使用方法

### 全局引入

#### 在 main.ts 中

```typescript
import { DefaultComponents } from "default-calendar";
app.use(DefaultComponents());
```

#### type 为 DateTimePicker、DatePicker

```html
<DefaultCalendar
	v-model="selectedTimeRange"
	type="DateTimePicker"
	@onClick="getSelectedTimeRange"
	:pickerOptions="pickerOptions"
	:selectOptions="selectOptions"
/>
<DefaultCalendar
	v-model="selectedTimeRange"
	type="DatePicker"
	@onClick="getSelectedTimeRange"
	:pickerOptions="pickerOptions"
	:selectOptions="selectOptions"
/>
```

```typescript
const selectedTimeRange = ref<[Date, Date]>([
	new Date(2000, 10, 10, 10, 10),
	new Date(2000, 10, 11, 10, 10),
]);

const getSelectedTimeRange = (val: number[]) => {};

const pickerOptions = [
	{
		text: "最近一周",
		value: () => {
			const end = new Date().getTime();
			const start = new Date().getTime() - 3600 * 1000 * 24 * 6;
			return [start, end];
		},
	},
];

// 当timeType为Select时
const selectOptions = {
	start: "08:30",
	step: "00:15",
	end: "18:30",
};
```

#### type 为 DateTime、Date

```html
<DefaultCalendar
	v-model="defaultValue"
	timeType="Select"
	type="DateTime"
	:picker-options="pickerOptions"
	:selectOptions="selectOptions"
	@onClick="getSelectedTime"
/>
<DefaultCalendar
	v-model="defaultValue"
	type="Date"
	:pickerOptions="pickerOptions"
	@onClick="getSelectedDate"
/>
```

```typescript
// 默认时间应该于timeType类型相匹配
const defaultValue = ref(new Date(2000, 10, 10, 8, 30));
const pickerOptions = [
	{
		text: "今天",
		value: () => new Date().getTime(),
	},
	{
		text: "昨天",
		value: () => new Date().getTime() - 3600 * 1000 * 24,
	},
	{
		text: "一周前",
		value: () => new Date().getTime() - 3600 * 1000 * 24 * 7,
	},
];
const selectOptions = {
	start: "08:00",
	step: "00:15",
	end: "18:30",
};
const getSelectedTime = (val: number) => {
	console.log(val);
};
```

#### disabledDate 使用

```typescript
// 只禁用这一天
const disabledDate = {
	type: "today",
	range: "2022-11-06 00:00:00",
};
// 禁用包括这一天之前的日期
const disabledDate = {
	type: "before",
	range: "2022-11-06 00:00:00",
};
// 禁用包括这一天之后的日期
const disabledDate = {
	type: "after",
	range: "2022-11-06 00:00:00",
};
// 禁用这个范围的日期
const disabledDate = {
	type: "range",
	range: ["2022-11-06 00:00:00", "2022-11-16 00:00:00"],
};
```

#### i18n 国际化

```html
<DefaultCalendar
	v-model="defaultValue"
	type="DateTime"
	timeType="Select"
	:i18n="i18nGlobal"
	:picker-options="pickerOptions"
/>
```

```js
const i18nGlobal = ref("zh");
// 使用vue-i18n需要国际化的内容需要写成函数形式
const pickerOptions = [
	{
		text: "today",
		value: () => new Date().getTime(),
	},
	{
		text: () => t("yestorday"),
		value: () => new Date().getTime() - 3600 * 1000 * 24,
	},
	{
		text: () => t("beforeWeek"),
		value: () => new Date().getTime() - 3600 * 1000 * 24 * 7,
	},
];
```

| 参数           | 描述                                                                    | 类型    | 默认值                         |
| -------------- | ----------------------------------------------------------------------- | ------- | ------------------------------ |
| unlinkPanels   | 可选 是否取消左右 日期面板的联动                                        | boolean | false                          |
| timeType       | 日期面板时间类型 可选 Picker 和 Select                                  | string  | Picker                         |
| pickerOptions  | 设置快捷选项                                                            | Array   | ~                              |
| selectOptions  | 当 timeType 为 Select 时 用于设置 TimeSelect 的开始、结束及间隔时间     | Object  | ~                              |
| type           | 日历面板的类型 目前支持 DateTimePicker、DateTime、Date、DatePicker      | String  | DateTimePicker                 |
| disabledDate   | 禁用日期 支持 before、after、today、range 四种类型                      | Object  | ~                              |
| rangeSeparator | 类型为 DatePicker 或 DateTimePicker 时 分隔符可自定义                   | String  | 至                             |
| format         | 用于格式化选中日期的类型 支持 yyyy-MM-DD（HH:mm:ss、HH:mm、HH）         | String  | yyyy-MM-DD HH:mm:ss            |
| pickerFormat   | 用于格式化 TimeType 为 Picker 时的时间显示格式 支持 HH:mm:ss、HH:mm、HH | String  | HH:mm:ss                       |
| i18n           | 用于国际化文本内容                                                      | string  | 中文-'zh' 英文-'en' 默认为中文 |
| theme          | 设置主题 目前支持 light 和 dark 模式                                    | string  | light                          |
| inputSize      | 用于设置 input 的大小 支持 normal、small                                | string  | normal                         |

---
_Source: https://npm.io/package/default-calendar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._