https://github.com/HC200ok/vue-easy-range-date-picker

An easy-to-use range date picker component made with Vue.js 2.x
https://github.com/HC200ok/vue-easy-range-date-picker

datepicker daterangepicker rangedatepicker vue vue-component vue2 vuejs2

Last synced: 2 months ago
JSON representation

An easy-to-use range date picker component made with Vue.js 2.x

• Host: GitHub
• URL: https://github.com/HC200ok/vue-easy-range-date-picker
• Owner: HC200ok
• License: mit
• Created: 2019-10-29T14:45:50.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-03-03T08:51:16.000Z (over 1 year ago)
• Last Synced: 2024-01-25T13:03:14.932Z (5 months ago)
• Topics: datepicker, daterangepicker, rangedatepicker, vue, vue-component, vue2, vuejs2
• Language: Vue
• Homepage:
• Size: 1.15 MB
• Stars: 5
• Watchers: 2
• Forks: 6
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-vue - vue-easy-range-date-picker - A simple and easy VueJS (2.x) component for date range selection (Components & Libraries / UI Components)
• awesome-vue - vue-easy-range-date-picker - A simple and easy VueJS (2.x) component for date range selection (Components & Libraries / UI Components)
• awesome-vue - vue-easy-range-date-picker - A simple and easy VueJS (2.x) component for date range selection (Components & Libraries / UI Components)
• awesome-vue - vue-easy-range-date-picker - A vue2 range datepicker ` 📝 a month ago` (UI Components [🔝](#readme))

README

        
# vue-easy-range-date-picker

> A simple and easy-to-use range date picker based on Vue2

# Installation

```bash

npm install --save vue-easy-range-date-picker

```

# Usage

```js

  

import RangeDatePicker from 'vue-easy-range-date-picker';

export default {

  components: {

    RangeDatePicker,

  },

  data() {

    return {

      dates: {

        start: 1572879600000,

        end:  1575730800000

      },

    };

  },

}

```

# Demo



[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/dates-with-start-and-end-kgm6v?file=/src/App.vue)

# Props

| Props                | Type         | Required | Default     |

| ---------------------| -------------| -------- | ------------|

| v-model(1)           | Object       | yes      | null        |

| language(2)          | String       | no       | 'zh'        |

| colorToday(3)        | String       | no       | '#41b883'   |

| colorSelected(3)     | String       | no       | '#34495e'   |

| colorActive(3)       | String       | no       | '#41b883'   |

(1) v-model: Binding an object which contains start timestamp and end timestamp: 

```js

// example

dates: { 

  start: 1573052400000,

  end: 1574434800000

}

```

you can also pass an empty object as the default value like this:

```js

  

import RangeDatePicker from 'vue-easy-range-date-picker';

export default {

  components: {

    RangeDatePicker,

  },

  data() {

    return {

      dates: {},

    };

  },

}

```



[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/initial-empty-dates-wso98o?file=/src/App.vue)

(2) Now supporting Chinese('zh'), Japanese('jp'), English('en')

(3)



# Event

`closePicker` event will be emitted when both the start date and end date are selected.

# Build Setup

``` bash

# install dependencies

npm install

# serve with hot reload at localhost:8080

npm run dev

# build for production with minification

npm run build

```