vue-custom-datepicker's Introduction

vue-custom-datepicker

Highly customizable datepicker for Vue.js

Demo at https://ajhaupt7.github.io/vue-custom-datepicker-example/

Requirements

Vue.js ^2.0.0
moment ^2.18.1

Installation

npm

$ npm install vue-custom-datepicker --save

Usage

Emits dateSelected event that returns the formatted date
Prop primaryColor will set the colors for the current date and the day selection (these can also be styled individually)
Each element (i.e. header, body, weekdays, etc.) can be changed individually through the relevant style prop
Min and max dates can be set in the limits prop
Date can be formatted in any format that Moment can handle
Font used in screenshot is Cabin

<template>
  <div id="app">
    <h2>{{ selectedDate }}</h2>
    <custom-datepicker 
      @dateSelected  = "setDate($event)"
      :date          = "selectedDate" 
      :primaryColor  = "primaryColor"
      :wrapperStyles = "wrapperStyles"
      :limits        = "limits"
    />
  </div>
</template>

<script>
import vue from 'vue'
import CustomDatepicker from 'vue-custom-datepicker'
import moment from 'moment'

export default {
  name: 'app',
  components: {
    'custom-datepicker': CustomDatepicker
  },
  data () {
    return {
      selectedDate: moment().format('YYYY-MM-DD'),
      wrapperStyles: { width: '325px' },
      primaryColor: "#0918bc",
      limits: {
        start: '2017-04-02',
        end: '2017-05-22'
      }
    }
  },
  methods: {
    setDate(date) {
      this.selectedDate = date
    }
  }
}
</script>

API

props: {
  date: {
    type: null
  },
  limits: {
    type: Object,
    default() {
      return {
        start: null,
        end: null
      }
    }
  },
  dateFormat: {
    type: String,
    default() {
      return 'YYYY-MM-DD'
    }
  },
  primaryColor: {
    type: String,
    default() {
      return "#ff5a5f"
    }
  },
  wrapperStyles: {
    type: Object 
  },
  headerStyles: {
    type: Object
  },
  weekdayStyles: {
    type: Object
  },
  bodyStyles: {
    type: Object
  },
  activeDateBackgroundColor: {
    type: String
  },
  activeDateTextColor: {
    type: String,
    default() {
      return 'white'
    }
  },
  todayTextColor: {
    type: String
  }
}

vue-custom-datepicker's People

Contributors

Stargazers

Watchers

vue-custom-datepicker's Issues

Adding new features of blocking days

It's actually not an issue. First of all thank you for such a nice awesome project.

I an wondering if it's possible to add options for restricting to only those dates we want along with start and end limit. It a good idea with start and end date but if we could add a restriction of date would be great.

For example, let's say we want to show 10 dates then only show those dates and rest is blocked.

Any idea how to achieve it or what files to edit would be great. Also if you can update it would be nice.

Thank you

Get initialDate and endDate

Multiple limits

I need to set an array of object for limits.
for example: [{start: 2020-03-12, end: 2020-03-15}, {start: 2020-03-27, end: 2020-03-30}]
why you don't support?

Recommend Projects