Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-rangedate-picker-aureliusm with all npm packages installed. Try it out:

var vueRangedatePickerAureliusm = require("vue-rangedate-picker-aureliusm")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-rangedate-picker-aureliusm v1.0.6

Date picker with range selection


npm vue2

Vue Date picker with range selection



npm install --save vue-rangedate-picker-winslow


Bundler (Webpack, Rollup)

import Vue from 'vue'
import VueRangedatePicker from 'vue-rangedate-picker-winslow'



<!-- Include after Vue -->
<!-- Local files -->
<script src="vue-rangedate-picker-winslow/dist/vue-rangedate-picker.min.js"></script>

<!-- From CDN -->
<script src=""></script>

Available Events

You can catch these below Events to <vue-rangedate-picker @events="events"></vue-rangedate-picker> template :

  • selected

    Description : function that will $emit when datepicker set value, this function will get parameter response :

      start: new Date(2018, 05, 01)
      end: new Date(2018, 05, 31)

Available Props

You can pass these below props to <vue-rangedate-picker :props="props"></vue-rangedate-picker> template :

  • configs

    Description : -

    Type : Object

    Default Value : {}

  • i18n

    Description : For text translation (currently: ID/EN)

    Type : String

    Default Value : 'EN'

    Component Example : <vue-rangedate-picker i18n="ID" />

  • months

    Description : Array of months name

    Type : Array

    Default Value :

    EN: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    ID: ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember']

    Component Example : <vue-rangedate-picker :months="['Enero', 'Febrero', 'Marzo', ...]" />

  • shortDays

    Description : Array of days name in short

    Type : Array

    Default Value :

    EN: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    ID: ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab']
  • captions

    Description : Object for text title and OK button

    Type : Object

    Default Value :

      'title': 'Choose Dates',
      'ok_button': 'Apply'
  • format

    Description : Date format

    Type : String

    Default Value : 'DD MMM YYYY'

    Component Example : <vue-rangedate-picker months="YYYY-MM-DD" />

  • styles

    Description : -

    Type : Object

    Default Value :

      daysWeeks: 'calendar_weeks',
      days: 'calendar_days',
      daysSelected: 'calendar_days_selected',
      daysInRange: 'calendar_days_in-range',
      firstDate: 'calendar_month_left',
      secondDate: 'calendar_month_right',
      presetRanges: 'calendar_preset-ranges'
  • initRange

    Description : Initial date range (start date & end date) for date range picker.

    Type : Object

    Default Value : null

    Example Object :

      start: new Date(this.initRange.start),
      end: new Date(this.initRange.end)

Component Example : <vue-rangedate-picker :initRange="initialRange" />

// initial 7 day range
const n = new Date();
const start = new Date(n.getFullYear(), n.getMonth(), n.getDate() - 5);
const end = new Date(n.getFullYear(), n.getMonth(), n.getDate() + 1);
  start: start,
  end: end
  • startActiveMonth

    Description : Month will be shown in first launch

    Type : Number

    Default Value : new Date().getMonth()

  • startActiveYear

    Description : Year will be shown in first launch

    Type : Number

    Default Value : new Date().getFullYear()

  • presetRanges

    Description : Set of objects that will shown as quick selection of daterange

    Type : Object

    Example Object :

      today: function () {
        const n = new Date()
        const startToday = new Date(n.getFullYear(), n.getMonth(), n.getDate() + 1, 0, 0)
        const endToday = new Date(n.getFullYear(), n.getMonth(), n.getDate() + 1, 23, 59)
        return {
          label: presetRangeLabel[i18n].today,
          active: false,
          dateRange: {
            start: startToday,
            end: endToday

    Default Value :

      today: function () {
        return {
          // label: 'string', active: 'boolean', dateRange: {start: date, end: end}
      thisMonth: function () {},
      lastMonth: function () {},
      last7days: function () {},
      last30days: function () {}
  • compact

    Description : Set to 'true' if you want to make datepicker always shown in compact mode

    Type : String

    Default Value : 'false'

  • righttoleft

    Description : Set to 'true' if you want datepicker shown align to right

    Type : String

    Default Value : 'false'


Launch visual tests

npm run dev

Launch Karma with coverage

npm run dev:coverage


Bundle the js and css of to the dist folder:

npm run build


The prepublish hook will ensure dist files are created before publishing. This way you don't need to commit them in your repository.

# Bump the version first
# It'll also commit it and create a tag
npm version
# Push the bumped package and tags
git push --follow-tags
# Ship it 🚀
npm publish



RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free