Wondering what’s next for npm?Check out our public roadmap! »

    vuejs-datepicker

    1.6.2 • Public • Published

    Datepicker

    Travis Build Version Coveralls github Downloads

    A datepicker Vue component. Compatible with Vue 2.x

    NB. Vue 1.x was supported up to version v0.9.9. If you want to use this component with Vue 1.x you can install with npm install vuejs-datepicker@0.9.9

    Demo

    To view a demo online: https://codesandbox.io/s/mpklq49wp

    To view demo examples locally clone the repo and run npm install && npm run serve

    Install

    npm install vuejs-datepicker --save
    import Datepicker from 'vuejs-datepicker';
     
    export default {
      // ...
      components: {
        Datepicker
      }
      // ...
    }

    Or use directly from a CDN

    <div id="app">
      <vuejs-datepicker></vuejs-datepicker>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vuejs-datepicker"></script>
    <script>
    const app = new Vue({
      el: '#app',
      components: {
       vuejsDatepicker
      }
    })
    </script> 
     
    <!-- French language example -->
    <div id="app">
      <vuejs-datepicker :language="fr"></vuejs-datepicker>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vuejs-datepicker"></script>
    <script src="https://unpkg.com/vuejs-datepicker/dist/locale/translations/fr.js"></script>
    <script>
    const app = new Vue({
      el: '#app',
      data() {
        return {
          fr: vdp_translation_fr.js
        }
      },
      components: {
       vuejsDatepicker
      }
    })
    </script> 

    Usage

    <datepicker></datepicker>

    value prop if passed should be a Date object

    <script>
    var state = {
      date: new Date(2016, 9,  16)
    }
    </script> 
    <datepicker :value="state.date"></datepicker>

    support name attribute for normal html form submission

    <datepicker :value="state.date" name="uniquename"></datepicker>

    Using v-model

    <datepicker v-model="state.date" name="uniquename"></datepicker>

    Emits events

    <datepicker @selected="doSomethingInParentComponentFunction" @opened="datepickerOpenedFunction" @closed="datepickerClosedFunction">

    Inline always open version

    <datepicker :inline="true"></datepicker>

    Available props

    Prop Type Default Description
    value Date|String Date value of the datepicker
    name String Input name property
    id String Input id
    format String|Function dd MMM yyyy Date formatting string or function
    full-month-name Boolean false To show the full month name
    language Object en Translation for days and months
    disabled-dates Object See below for configuration
    placeholder String Input placeholder text
    inline Boolean To show the datepicker always open
    calendar-class String|Object CSS class applied to the calendar el
    input-class String|Object CSS class applied to the input el
    wrapper-class String|Object CSS class applied to the outer div
    monday-first Boolean false To start the week on Monday
    clear-button Boolean false Show an icon for clearing the date
    clear-button-icon String Use icon for button (ex: fa fa-times)
    calendar-button Boolean false Show an icon that that can be clicked
    calendar-button-icon String Use icon for button (ex: fa fa-calendar)
    calendar-button-icon-content String Use for material-icons (ex: event)
    day-cell-content Function Use to render custom content in day cell
    bootstrap-styling Boolean false Output bootstrap v4 styling classes.
    initial-view String minimumView If set, open on that view
    disabled Boolean false If true, disable Datepicker on screen
    required Boolean false Sets html required attribute on input
    typeable Boolean false If true, allow the user to type the date
    use-utc Boolean false use UTC for time calculations
    open-date Date|String If set, open on that date
    minimum-view String 'day' If set, lower-level views won't show
    maximum-view String 'year' If set, higher-level views won't show

    Events

    These events are emitted on actions in the datepicker

    Event Output Description
    opened The picker is opened
    closed The picker is closed
    selected Date|null A date has been selected
    selectedDisabled Object A disabled date has been selected
    input Date|null Input value has been modified
    cleared Selected date has been cleared
    changedMonth Object Month page has been changed
    changedYear Object Year page has been changed
    changedDecade Object Decade page has been changed

    Date formatting

    String formatter

    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

    Function formatter

    Delegates date formatting to provided function. Function will be called with date and it has to return formated date as a string. This allow us to use moment, date-fns, globalize or any other library to format date.

    <script>
      methods: {
        customFormatter(date) {
          return moment(date).format('MMMM Do YYYY, h:mm:ss a');
        }
      }
    </script> 
    <datepicker :format="customFormatter"></datepicker>

    Disabled Dates

    Dates can be disabled in a number of ways.

    <script>
    var state = {
      disabledDates: {
        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
        daysOfMonth: [29, 30, 31], // Disable 29th, 30th and 31st of each month
        dates: [ // Disable an array of dates
          new Date(2016, 9, 16),
          new Date(2016, 9, 17),
          new Date(2016, 9, 18)
        ],
        ranges: [{ // Disable dates in given ranges (exclusive).
          from: new Date(2016, 11, 25),
          to: new Date(2016, 11, 30)
        }, {
          from: new Date(2017, 1, 12),
          to: new Date(2017, 2, 25)
        }],
        // a custom function that returns true if the date is disabled
        // this can be used for wiring you own logic to disable a date if none
        // of the above conditions serve your purpose
        // this function should accept a date and return true if is disabled
        customPredictor: function(date) {
          // disables the date if it is a multiple of 5
          if(date.getDate() % 5 == 0){
            return true
          }
        }
      }
    }
    </script> 
    <datepicker :disabled-dates="state.disabledDates"></datepicker>

    Highlighted Dates

    Dates can be highlighted (e.g. for marking an appointment) in a number of ways. Important: By default disabled dates are ignored, to highlight disabled dates set the includeDisabled property to true. Note: Both to and from properties are required to define a range of dates to highlight.

    <script>
    var state = {
      highlighted: {
        to: new Date(2016, 0, 5), // Highlight all dates up to specific date
        from: new Date(2016, 0, 26), // Highlight all dates after specific date
        days: [6, 0], // Highlight Saturday's and Sunday's
        daysOfMonth: [15, 20, 31], // Highlight 15th, 20th and 31st of each month
        dates: [ // Highlight an array of dates
          new Date(2016, 9, 16),
          new Date(2016, 9, 17),
          new Date(2016, 9, 18)
        ],
        // a custom function that returns true of the date is highlighted
        // this can be used for wiring you own logic to highlight a date if none
        // of the above conditions serve your purpose
        // this function should accept a date and return true if is highlighted
        customPredictor: function(date) {
          // highlights the date if it is a multiple of 4
          if(date.getDate() % 4 == 0){
            return true
          }
        },
        includeDisabled: true // Highlight disabled dates
      }
    }
    </script> 
    <datepicker :highlighted="state.highlighted"></datepicker>

    Slots

    Slots will help you customize content. .

    beforeCalendarHeader

    Sometimes you need to show custom content before the calendar header. For such cases you can use the named slot beforeCalendarHeader.

    An example would be to use bootstrap's input-group-prepend and input-group-append to show some custom text:

    <datepicker :bootstrap-styling="true">
      <div slot="beforeCalendarHeader" class="calender-header">
        Choose a Date
      </div>
    </datepicker>

    afterDateInput

    To implement some custom styling (for instance to add an animated placeholder) on DateInput, you might need to add elements as DateInput siblings. Slot named afterDateInput allows you to do that:

    <datepicker>
      <span slot="afterDateInput" class="animated-placeholder">
        Choose a Date
      </span>
    </datepicker>

    Translations

    Contributing guide - please use appropriate code from this list as the translation property.

    • Add your language as a module in the src/locale/translations dir.
    • Import and export it in the src/locale/index file
    • Add the Language to the available languages in the readme file.
    • Run npm run lint to make sure your code formatting is in line with the required code style.

    How to apply language

    Below script tag in component.

    import {en, es} from 'vuejs-datepicker/dist/locale'

    In component data.

    data () {
        return {
          en: en,
          es: es
        }
    }

    html.

    <datepicker :language="es"></datepicker>

    Available languages

    Abbr Language
    af Afrikaans
    ar Arabic
    bg Bulgarian
    bs Bosnian
    ca Catalan
    cs Czech
    da Danish
    de German
    ee Estonian
    el Greek
    en English Default
    es Spanish
    fa Persian (Farsi)
    fi Finnish
    fo Faroese
    fr French
    ge Georgia
    gl Galician
    he Hebrew
    hu Hungarian
    hr Croatian
    id Indonesian
    is Icelandic
    it Italian
    ja Japanese
    kk Kazakh
    ko Korean
    lb Luxembourgish
    lt Lithuanian
    lv Latvian
    mk Macedonian
    mn Mongolian
    nbNO Norwegian Bokmål
    nl Dutch
    pl Polish
    ptBR Portuguese-Brazil
    ro Romanian
    ru Russian
    sk Slovak
    slSI Slovenian
    sv Swedish
    sr Serbian (Latin)
    srCyrl Serbian (Cyrl)
    th Thai
    tr Turkish
    uk Ukrainian
    ur Urdu
    vi Vietnamese
    zh Chinese
    zhHK Chinese_HK

    Install

    npm i vuejs-datepicker

    DownloadsWeekly Downloads

    118,232

    Version

    1.6.2

    License

    MIT

    Unpacked Size

    467 kB

    Total Files

    117

    Last publish

    Collaborators

    • avatar