# vuetify_datetimepicker_vue

> A Vue component that has vuetify datetimepicker

Latest version **0.1.0** (published 2019-02-19) · 0 weekly downloads

## Install

```sh
npm install vuetify_datetimepicker_vue
pnpm add vuetify_datetimepicker_vue
yarn add vuetify_datetimepicker_vue
bun add vuetify_datetimepicker_vue
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2019-02-19 |
| First published | 2019-02-19 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 3.2 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Subash |
| Maintainers | subashdbc |

## Links

- npm: https://www.npmjs.com/package/vuetify_datetimepicker_vue
- Repository: https://github.com/subashdbc/datetime_picker_vuetify
- Homepage: https://github.com/subashdbc/datetime_picker_vuetify#readme
- Issues: https://github.com/subashdbc/datetime_picker_vuetify/issues
- npm.io page: https://npm.io/package/vuetify_datetimepicker_vue

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.5.22
- [moment](https://npm.io/package/moment.md) ^2.24.0
- [vuetify](https://npm.io/package/vuetify.md) ^1.3.0
- [material-design-icons-iconfont](https://npm.io/package/material-design-icons-iconfont.md) ^4.0.4

## Recent versions

- 0.1.0 (latest) — 2019-02-19

## README

# vuetify_datetimepicker_vue

A Vue component that has vuetify datetimepicker

## Installation

```js
npm i --save vuetify_datetimepicker_vue
```

### Browser

Include the script file, then install the component with `Vue.use(DatetimePicker);` e.g.:

```html
<script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/vuetify_datetimepicker_vue/dist/datetimepicker-vuetify.js"></script>
<script type="text/javascript">
  Vue.use(DatetimePicker);
</script>
```

### Module

```js
import DatetimePicker from 'vuetify_datetimepicker_vue';
```

## Usage

You can use just as this after your installation,

```html
<date-time-picker label="Select Datetime" v-model="datetime"></date-time-picker>
```

# Properties
<table>
  <thead>
    <tr>
      <td>Name</td>
      <td>Type</td>
      <td>Default Value</td>
      <td>Description</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>datetime (model)</td>
      <td>Date/String</td>
      <td>null</td>
      <td>Datetime picker model</td>
    </tr>
    <tr>
      <td>label</td>
      <td>String</td>
      <td>Pick a date</td>
      <td>Datetimepicker label text</td>
    </tr>
    <tr>
      <td>dateFormat</td>
      <td>String</td>
      <td>DD.MM.YYYY</td>
      <td>Sets date format</td>
    </tr>
    <tr>
      <td>timeFormat</td>
      <td>String</td>
      <td>HH:mm:ss</td>
      <td>Sets time format</td>
    </tr>
    <tr>
      <td>locale</td>
      <td>String</td>
      <td>en-us</td>
      <td>Sets locale for date picker</td>
    </tr>
    <tr>
      <td>color</td>
      <td>String</td>
      <td>green</td>
      <td>Sets color for datetime picker</td>
    </tr>
    <tr>
      <td>firstDayOfWeek</td>
      <td>Number</td>
      <td>0</td>
      <td>Sets firstDayWeek on date picker</td>
    </tr>
    <tr>
      <td>timeFormatType</td>
      <td>String</td>
      <td>ampm</td>
      <td>Defines the format of a time displayed in picker. Available options are ampm and 24hr.</td>
    </tr>
    <tr>
      <td>disabled</td>
      <td>Boolean</td>
      <td>false</td>
      <td>Enable/Disable datepicker field</td>
    </tr>
    <tr>
      <td>allowedStep</td>
      <td>Function</td>
      <td></td>
      <td>It uses Vuetify's timepicker allowed-minutes method</td>
    </tr>
  </tbody>
</table>

# Events

<table>
 <thead>
    <tr>
      <td>Name</td>
      <td>Arguments</td>
      <td>Description</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>input</td>
      <td>value (Date/String)</td>
      <td>The updated bound model</td>
    </tr>
  </tbody>
</table>

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