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

$3

``sh
npm install ak-datepicker
`

or

`sh
yarn add ak-datepicker
`

$3

`vue




`

$3

* 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'.

$3

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.)

$3

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

Configuration

Calendar configuration

You can provide configuration Object as:

`ts
import { provide } from 'vue'
import { ConfigInterface } from 'ak-datepicker'

const dateConfig: ConfigInterface = {
"dateType": "jalali",
"minDate": "1990-01-01",
"maxDate": "2050-01-01",
"range": true,
"format": "yyyy-mm-dd"
}

export default {
setup() {
provide('akDatepickerConf', dateConfig)
}
}
`

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

`vue




`

Style

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

$3

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

`ts
import { createApp } from 'vue'
import 'ak-datepicker/style.css'

// Other scripts

createApp(App).mount('#app')

// Other scripts
`

$3

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

`vue

`

Customize colors:

`css
:root {
--bg-main: #0e141a;
--main-color: #70d1f2;
--primary-color: #005297;
--select-trigger-bg: rgb(75 85 99 / var(--select-trigger-bg-opacity));
--select-trigger-bg-opacity: 0.2;
--hover-color: #4b5563;
--in-range-date-bg: #0A273F
}
`

* --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)