Incomplete document ## Introduction
npm install ak-datepickersh
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)