# bt-vue-datetimepicker

> ## Prototype version: don't use for production

Latest version **0.1.6** (published 2020-02-19) · (MIT OR Apache-2.0) license · 0 weekly downloads

## Install

```sh
npm install bt-vue-datetimepicker
pnpm add bt-vue-datetimepicker
yarn add bt-vue-datetimepicker
bun add bt-vue-datetimepicker
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2020-02-19 |
| First published | 2019-06-17 |
| Weekly downloads | 0 |
| License | (MIT OR Apache-2.0) |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 13 |
| Unpacked size | 5.9 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | fazerty |

## Links

- npm: https://www.npmjs.com/package/bt-vue-datetimepicker
- npm.io page: https://npm.io/package/bt-vue-datetimepicker

## Dependencies (13)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [eslint](https://npm.io/package/eslint.md) ^6.8.0
- [moment](https://npm.io/package/moment.md) ^2.24.0
- [core-js](https://npm.io/package/core-js.md) ^2.6.11
- [bootstrap](https://npm.io/package/bootstrap.md) ^4.4.1
- [bootstrap-vue](https://npm.io/package/bootstrap-vue.md) ^2.1.0
- [moment-timezone](https://npm.io/package/moment-timezone.md) ^0.5.27
- [vue-class-component](https://npm.io/package/vue-class-component.md) ^7.2.3
- [@types/moment-timezone](https://npm.io/package/@types/moment-timezone.md) ^0.5.12
- [vue-property-decorator](https://npm.io/package/vue-property-decorator.md) ^8.4.0
- [@fortawesome/vue-fontawesome](https://npm.io/package/@fortawesome/vue-fontawesome.md) ^0.1.9
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^1.2.27
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^5.12.1

## Recent versions

- 0.1.6 (latest) — 2020-02-19
- 0.1.5 — 2020-02-19
- 0.1.4 — 2020-02-19
- 0.1.2 — 2019-06-17
- 0.1.1 — 2019-06-17
- 0.1.0 — 2019-06-17

## README

# bt-vue-datetimepicker

## Prototype version: don't use for production

A datetime picker component heavily inspired by\
 https://github.com/pingcheng/bootstrap4-datetimepicker/tree/master/src.\
It depends on bootstrap-vue https://github.com/bootstrap-vue/bootstrap-vue
and moment.js https://github.com/moment/moment/

Test it at https://portofolio.upurion.com/datetimepicker

Requirement:

**bootstrap vue:** See installation at https://bootstrap-vue.js.org/docs


## Installation

npm i --save bt-vue-datetimepicker\
npm i --save moment\
npm i --save @fortawesome/fontawesome-svg-core\
npm i --save @fortawesome/free-solid-svg-icons\
npm i --save @fortawesome/vue-fontawesome

The following examples are based on a project configured with [vue-cli](https://github.com/vuejs/vue-cli).

`src/main.js`

```javascript
import Vue from 'vue'
import App from './App'
import './plugins/bootstrap-vue'

/* -------- To add ----- */
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faUserSecret, faCalendar, faClock, faAngleLeft, faAngleRight, faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons'

library.add(faUserSecret, faCalendar, faClock, faAngleLeft, faAngleRight, faAngleUp, faAngleDown)
Vue.component('font-awesome-icon', FontAwesomeIcon)
/* -----------------------*/

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})
```

## Usage

### Recommended

`src/App.vue`

```vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <DateTimePicker :value="dateTime"></DateTimePicker>
  </div>
</template>

<script>
import DateTimePicker from 'bt-vue-datetimepicker'
import moment from 'moment'

export default {
  name: 'App',
  components: {
    HelloWorld, DateTimePicker
  },
  data() {
    return {
    dateTime:  new moment("20120520", "YYYYMMDD")
    }
  }
}
</script>
```
### Properties

**value:** moment\
**default:** moment()\
**info:** Value used by the date time picker

  **format:** string\
  **default:** 'DD-MM-YY HH:mm'\
  **info:** Format used to display the date/time in the input field.
  It's used also to parse the value entered in the input field
  See https://momentjs.com/docs/#/parsing/string-format/


  **placement:** string\
  **default:** 'bottom'\
  **info:** Positioning of the date time picker, relative to the target input date field.\
  **allowed values:** 'auto', 'top', 'bottom', 'left', 'right', 'topleft', 'topright',
   'bottomleft', 'bottomright', 'lefttop', 'leftbottom', 'righttop', 'rightbottom'

  **use24Hours:** boolean\
  **info:** In the time picker, if true, uses the 24 hours format, if false, uses the am/pm format\

  **datePicker:** boolean\
  **info:** Defines if the picker use the date picker

  **timePicker:** boolean\
  **info:** Defines if the picker use the time picker

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