# quasar-ui-calender-touch

> Date-Picket at Quasar

Latest version **1.2.0** (published 2021-08-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install quasar-ui-calender-touch
pnpm add quasar-ui-calender-touch
yarn add quasar-ui-calender-touch
bun add quasar-ui-calender-touch
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2021-08-18 |
| First published | 2021-08-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 8.9.0 |
| Dependencies | 3 |
| Unpacked size | 369.1 KB |
| Known vulnerabilities | 0 (+4 in 1 direct dependencies) |
| Install scripts | no |
| Author | muhammad.farhan |
| Maintainers | intigration |
| Keywords | date-picker |

## Links

- npm: https://www.npmjs.com/package/quasar-ui-calender-touch
- npm.io page: https://npm.io/package/quasar-ui-calender-touch

## Dependencies (3)

- [quasar](https://npm.io/package/quasar.md) ^1.5.11
- [flatpickr](https://npm.io/package/flatpickr.md) 4.6.3
- [@quasar/extras](https://npm.io/package/@quasar/extras.md) ^1.3.3

## Recent versions

- 1.2.0 (latest) — 2021-08-18

## README

# DateTimeRangePicker
> Date time range picker component based on [Flatpickr](https://flatpickr.js.org) and [Quasar](https://quasar-framework.org/). Contains flatpickr wrapper and date-time picker.

## Installation
```bash
# npm
npm install git+https://github.com/flespi-software/DateTimeRangePicker.git --save
```

## Prerequisites:

- [Node.js](https://nodejs.org/en/) (>=9.x)
- npm version 5+ and [Git](https://git-scm.com/)
- [Quasar](https://v0-17.quasar-framework.org/) (^0.17.0)
- [Vue](https://vuejs.org/) (^2.5.0)

## Run examples on your localhost
* Clone this repo
* You should have quasar (^0.17.0) pre-installed
* Install dependencies `npm install`
* Run webpack dev server `quasar dev`
* This should open the demo page at `http://localhost:8080` in your default web browser

## DateTimeRangePicker component

![Screenshot](/misc/component.png?raw=true "DateTimeRangePicker")

### Features
* ES6 Javascript
* Vue.js
* Writing .vue files
* Rollup
* NPM ecosystems

### Usage
In quasar.config.js
```js
  framework: {
    components: [
      'QBtnToggle'
    ]
  }
```

```html
<template>
  <div>
    <date-range v-model="date"/>
  </div>
</template>

<script>
  import DateRange from 'datetimerangepicker'

  export default {
    data () {
      return {
        date: [new Date()],
      }
    },
    components: {
      DateRange
    }
  }
</script>
```
### Available props
The component accepts these props:

| Attribute        | Type                                            | Default              | Description           |
| :---             | :---:                                           | :---:                | :---                  |
| v-model / value  | Array                                           | `[new Date()]`               | RangeValue (required) |
| mode             | Number{0,1,2,3,4}                              | `0`                  | Component mode: `0` - Single date picker, `1` - week picker, `2` - month picker, `3` - custom range picker, `4` - manual formated or timestamp mode|
| theme           | Object                                           | `{color:'grey-9', bgColor:'white', modeSwitch:true}` | `color` - text color, `bgColor` - background color, `modeSwitch` - need show switch mode buttons |

### Available events
The component accepts these props:

| Event        | Payload                                            | Description      |
| :---             | :---:                                           | :---             |
| input  | `Array` | Selected dates timestamps array |
| error  | `Boolean` | Error in time range. |
| change:mode  | `Number` | New component mode |

## Flatpickr wrapper
![Screenshot](/misc/wrapper.png?raw=true "Flatpickr wrapper")
### Usage
```html
<template>
  <div>
    <vue-flat-pickr v-model="date" :config="config" />
  </div>
</template>

<script>
  import { VueFlatPickr } from 'datetimerangepicker'

  export default {
    data () {
      return {
        date: new Date(),
        config: {
          wrap: true, // set wrap to true only when using 'input-group'
          altFormat: 'M j, Y',
          altInput: true,
          dateFormat: 'Y-m-d',
          locale: Hindi, // locale for this instance only
        }
      }
    },
    components: {
      VueFlatPickr
    }
  }
</script>
```
### Events
* The component can emit all possible events, you can listen to them in your component
```html
<vue-flat-pickr v-model="date" @on-change="doSomethingOnChange" @on-close="doSomethingOnClose" />
```
* Events names has been converted to kebab-case.
* You can still pass your methods in `:config` like original flatpickr do.

### Available props
The component accepts these props:

| Attribute        | Type                                            | Default              | Description      |
| :---             | :---:                                           | :---:                | :---             |
| v-model / value  | String / Date Object / Array / Timestamp / null | `null`               | Date-picker value (required) |
| config           | Object                                          | `{wrap:false}`       | Flatpickr configuration [options](https://chmln.github.io/flatpickr/options/)|
| events           | Array                                           | Array of useful events  | Customise the [events](https://chmln.github.io/flatpickr/events/) to be emitted|
| theme            | Object                                          | `{color:'grey-9', bgColor:'white'}` | `color` - text color, `bgColor` - background color |
## License
[MIT](LICENSE) License

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