vuetify-datetime-picker - GitLite

KO | EN

gitlite — search

#javascript #golang #android #machine-learning #linux #docker #nodejs #macos #windows #awesome #cli #kubernetes #security #openai

vuetify-datetime-picker

(★ 171)

DatetimePicker component for Vuetify.js. https://darrenfang.github.io/vuetify-datetime-picker/

File Explorer

Download Latest Version (.zip)

- config.yml
- - DatetimePicker.vue
- - vuetify.js
- - DatetimePicker.styl
  - main.styl
- app.vue
- index.html
- index.js
- main.js
- webpack.base.config.js
- webpack.build.config.js
- webpack.dev.config.js
- webpack.docs.config.js
.babelrc
.eslintignore
.eslintrc
.gitignore
.npmignore
.prettierignore
.prettierrc
LICENSE
package.json
README.md

# Installation Guide

1. Get the code

git clone https://github.com/darrenfang/vuetify-datetime-picker

Downloads the entire project code from GitHub to your computer.

cd vuetify-datetime-picker

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install --save vuetify-datetime-picker

Downloads and installs the libraries listed in package.json.

yarn add vuetify-datetime-picker

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# vuetify-datetime-picker

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/darrenfang/vuetify-datetime-picker/blob/master/LICENSE)
[![npm version](https://img.shields.io/npm/v/vuetify-datetime-picker.svg?style=flat)](https://www.npmjs.com/package/vuetify-datetime-picker)
[![CircleCI](https://img.shields.io/circleci/project/github/darrenfang/vuetify-datetime-picker.svg)](https://circleci.com/gh/darrenfang/vuetify-datetime-picker)

DatetimePicker component for Vuetify.js.

[Online Demo](http://darrenfang.github.io/vuetify-datetime-picker/ 'Online Demo')

[Demo Source Code](https://github.com/darrenfang/vuetify-datetime-picker/blob/master/src/app.vue 'Demo Source Code')

## Installation

```shell
npm install --save vuetify-datetime-picker

or

yarn add vuetify-datetime-picker
```

```js
import Vue from 'vue'
import DatetimePicker from 'vuetify-datetime-picker'
// (Optional) import 'vuetify-datetime-picker/src/stylus/main.styl'

Vue.use(DatetimePicker)
```

If use the `main.styl`, you should configure the `stylus-loader` in `webpack.config.js`, or just ignore this style sheet.

## Usage

Once installed, it can be used in a template as simply as:

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

## Properties

| Name             | Type        | Default Value | Description                                                                                                 |
| ---------------- | ----------- | ------------- | ----------------------------------------------------------------------------------------------------------- |
| datetime (model) | Date/String |               | Time picker model.                                                                                          |
| disabled         | Boolean     | false         | Input is disabled.                                                                                          |
| loading          | Boolean     | false         | Input is loading.                                                                                           |
| label            | string      |               | Sets input label.                                                                                           |
| dialogWidth      | Number      | 340           | The width of the dialog.                                                                                    |
| dateFormat       | string      | yyyy-MM-dd    | Defines the format of a date.                                                                               |
| timeFormat       | string      | HH:mm         | Defines the format of a time.                                                                               |
| clearText        | string      | CLEAR         | Sets the text of the clear button.                                                                          |
| okText           | string      | OK            | Sets the text of the ok button.                                                                             |
| textFieldProps   | Object      |               | Text fields properties. See [Vuetify Docs](https://vuetifyjs.com/en/components/text-fields 'Vuetify Docs')  |
| datePickerProps  | Object      |               | Date pickers properties.See [Vuetify Docs](https://vuetifyjs.com/en/components/date-pickers 'Vuetify Docs') |
| timePickerProps  | Object      |               | Time pickers properties.See [Vuetify Docs](https://vuetifyjs.com/en/components/time-pickers 'Vuetify Docs') |

## Events

| Name  | Arguments           | Description             |
| ----- | ------------------- | ----------------------- |
| input | value (Date/String) | The updated bound model |

## Slots

| Name     | Description                                                                                 |
| -------- | ------------------------------------------------------------------------------------------- |
| dateIcon | Slot to put custom icon in the date tab.                                                    |
| timeIcon | Slot to put custom icon in the time tab.                                                    |
| actions  | Slot to put custom buttons in the dialog.                                                   |
| progress | Slot for custom progress linear (displayed when loading prop is not equal to Boolean False) |