Vue AK-DatePicker component

Incomplete document

Introduction

The DatePicker component provides a simple and customizable date picker in 'jajali' and 'gregorian' calendar for Vue.js applications.

Usage

1. Install the DatePicker Component

1npm install ak-datepicker

or

1yarn add ak-datepicker

2. Import and Use in Your Vue Component

1
2<script setup lang="ts">
3  import { DatePicker } from 'ak-datepicker'
4  import 'ak-datepicker/style.css'
5  import { ref } from 'vue'
6
7  const datePickerConfig = {
8    dateType: 'gregorian',
9    minDate: '1990-01-01',
10    maxDate: '2050-01-01',
11    range: false,
12    format: 'yyyy-mm-dd'
13  }
14  const date = ref('')
15</script>
16
17<template>
18  <DatePicker :config="datePickerConfig" v-model:value="date" />
19</template>

3. Configuration Options

• dateType: Type of date system, e.g., 'gregorian' or 'jalali'.
• minDate: Minimum selectable date.
• maxDate: Maximum selectable date.
• range: Boolean indicating whether to select a range of dates.
• format: Date format, e.g., 'yyyy-mm-dd'.

4. Example Configuration

In the sample code above, we configure the DatePicker component to use the Gregorian calendar with a date range between 1990-01-01 and 2050-01-01. The date is displayed in the format 'yyyy-mm-dd'. (Format is 'yyyy-MM-dd' right now.)

5. Data Binding

The selected date(s) are bound to the value variable using the v-model directive.

Configuration

Calendar configuration

You can provide configuration Object as:

1import { provide } from 'vue'
2import { ConfigInterface } from 'ak-datepicker'
3
4const dateConfig: ConfigInterface = {
5  "dateType": "jalali",
6  "minDate": "1990-01-01",
7  "maxDate": "2050-01-01",
8  "range": true,
9  "format": "yyyy-mm-dd"
10}
11
12export default {
13  setup() {
14    provide('akDatepickerConf', dateConfig)
15  }
16}

In other way you can pass config as props to the component:

1
2<script setup lang="ts">
3  import { ref } from 'vue'
4  import { DatePicker } from 'ak-datepicker'
5  import { ConfigInterface } from 'ak-datepicker'
6
7  const dateConfig: ConfigInterface = {
8    dateType: 'jalali',
9    minDate: '1990-01-01',
10    maxDate: '2050-01-01',
11    range: true,
12    format: 'yyyy-mm-dd'
13  }
14  const date = ref('')
15</script>
16
17<template>
18  <DatePicker v-model:value="date" />
19</template>

Style

You must import styles to app in one of these options:

1. Global import:

For global definition you must import styles in main.ts:

1import { createApp } from 'vue'
2import 'ak-datepicker/style.css'
3
4// Other scripts
5
6createApp(App).mount('#app')
7
8// Other scripts

2. Local import

For local definition in specific page or component you must import styles in that desired page or component like this:

1<script setup lang="ts">
2  // Other imports
3  import { DatePicker } from 'ak-datepicker'
4  import 'ak-datepicker/style.css'
5  
6  // Other scripts
7</script>

Customize colors:

1:root {
2    --bg-main: #0e141a;
3    --main-color: #70d1f2;
4    --primary-color: #005297;
5    --select-trigger-bg: rgb(75 85 99 / var(--select-trigger-bg-opacity));
6    --select-trigger-bg-opacity: 0.2;
7    --hover-color: #4b5563;
8    --in-range-date-bg: #0A273F
9}

• --bg-main: Background of datepicker
• --main-color: First color. Color of selected date.
• --primary-color: Primary color. Color of selected elements.
• --select-trigger-bg: Background of trigger (trg: Year,Month,Date) box.
• --select-trigger-bg-opacity: Opacity of trigger box.
• --hover-color: Used color for hovering act.
• --in-range-date-bg: Color of dates between two selected date. (range mode)