# vuejs-datepicker-string

> Forked form vuejs-datepicker tu use string date formatting. A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations

Latest version **0.4.58** (published 2017-01-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install vuejs-datepicker-string
pnpm add vuejs-datepicker-string
yarn add vuejs-datepicker-string
bun add vuejs-datepicker-string
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.58 |
| Published | 2017-01-12 |
| First published | 2016-12-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Andrés Teszkiewicz |
| Maintainers | ateszki |
| Keywords | vue, datepicker, date-picker, calendar |

## Links

- npm: https://www.npmjs.com/package/vuejs-datepicker-string
- Repository: https://github.com/desarrollo-cooperativo/vuejs-datepicker-string
- Homepage: https://github.com/desarrollo-cooperativo/vuejs-datepicker-string#readme
- Issues: https://github.com/desarrollo-cooperativo/vuejs-datepicker-string/issues
- npm.io page: https://npm.io/package/vuejs-datepicker-string

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^1.0.0
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.0.0

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 0.4.58 (latest) — 2017-01-12
- 0.4.57 — 2017-01-12
- 0.4.55 — 2017-01-12
- 0.4.54 — 2017-01-12
- 0.4.53 — 2017-01-12
- 0.4.52 — 2016-12-19
- 0.4.51 — 2016-12-19
- 0.4.50 — 2016-12-19
- 0.4.49 — 2016-12-19
- 0.4.48 — 2016-12-19
- 0.4.47 — 2016-12-19
- 0.4.46 — 2016-12-19
- 0.4.45 — 2016-12-19
- 0.4.44 — 2016-12-19
- 0.4.43 — 2016-12-19
- … 11 more at https://npm.io/package/vuejs-datepicker-string/versions

## README

# Datepicker

![](https://travis-ci.org/charliekassel/vuejs-datepicker.svg?branch=master) [![Coverage Status](https://coveralls.io/repos/github/charliekassel/vuejs-datepicker/badge.svg?branch=master)](https://coveralls.io/github/charliekassel/vuejs-datepicker?branch=master)

A datepicker Vue component. Compatible with Vue 1.x and Vue 2.x

## Demo

http://www.webpackbin.com/N1vgz1XRb

## Install

``` bash
$ npm install vuejs-datepicker --save
```
``` javascript
import Datepicker from 'vuejs-datepicker';

Vue.component('my-component', {
    components: {
        Datepicker
    }
});
```


## Usage

``` html
<datepicker></datepicker>
```

*value* prop if passed should be a Date object

``` html
<script>
var state = {
    date: new Date(2016, 9,  16)
}
</script>
<datepicker :value="state.date"></datepicker>
```
support name attribute for normal html form submission
``` html
<datepicker :value="state.date" name="uniquename"></datepicker>
```
Emits events
``` html
<datepicker v-on:selected="doSomethingInParentComponentFunction" v-on:opened="datepickerOpenedFunction">
```
Inline always open version
``` html
<datepicker :inline="true"></datepicker>
```
## Available props

| Prop         | Type         | Default     | Description                         |
|--------------|--------------|-------------|-------------------------------------|
| value        | Date         |             | Date value of the datepicker        |
| name         | String       |             | input name property                 |
| format       | String       | dd MMM yyyy | Date formatting string              |
| language     | String       | en          | Translation for days and months     |
| disabled     | Object       |             | See below for configuration         |
| placeholder  | String       |             | input placeholder text              |   
| inline       | Boolean      |             | to show the datepicker always open  |
| inputClass   | String       |             | css class applied to the input el   |
| wrapperClass | String       |             | css class applied to the outer div  |
| mondayFirst  | Boolean      | false       | To start the week on Monday         |

## Date formatting

NB. This is not very robust at all - use at your own risk! Needs a better implementation.

| Token | Desc                   | Example     |
|-------|------------------------|-------------|
| d     | day                    | 1           |
| dd    | 0 prefixed day         | 01          |
| D     | abbr day               | Mon         |
| su    | date suffix            | st, nd, rd  |
| M     | month number (1 based) | 1 (for Jan) |
| MM    | 0 prefixed month       | 01          |
| MMM   | abbreviated month name | Jan         |
| MMMM  | month name             | January     |
| yy    | two digit year         | 16          |
| yyyy  | four digit year        | 2016        |


#### Disabled Dates
Dates can disabled in a number of ways.

``` html
<script>
var state = {
    disabled: {
        to: new Date(2016, 0, 5), // Disable all dates up to specific date
        from: new Date(2016, 0, 26), // Disable all dates after specific date
        days: [6, 0], // Disable Saturday's and Sunday's
        dates: [ // Disable an array of dates
            new Date(2016, 9, 16),
            new Date(2016, 9, 17),
            new Date(2016, 9, 18)
        ]
    }
}
</script>
<datepicker :disabled="state.disabled"></datepicker>
```


#### Translations

``` html
<datepicker language="es"></datepicker>
```
Available languages

| Abbr        | Language         |          |
| ----------- |------------------|----------|
| en          | English          | *Default*|
| es          | Spanish          |          |
| fi          | Finnish          |          |
| fr          | French           |          |
| hr          | Croatian         |          |
| it          | Italian          |          |
| nl          | Dutch            |          |
| de          | German           |          |
| da          | Danish           |          |
| cs          | Czech            |          |
| pt-br       | Portuguese-Brazil|          |
| vi          | Vietnamese       |          |
| zh          | Chinese          |          |
| ja          | Japanese         |          |
| he          | Hebrew           |          |
| ru          | Russian          |          |
| sv          | Swedish          |          |
| th          | Thai             |          |

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