RendezVous.js

A jQuery Datepicker

• Lightweight
• Flat design
• User friendly
• Developer friendly
• Uses SCSS (full em based)
• Keep calm and Pick a date !

Some examples

RendezVous.js Demo →

How to use

$('#my-datepicker').RendezVous();

How to configure

var settings = { /* ... */ };
$('#my-datepicker').RendezVous(settings);

var callback = function(rdv) { /* ... */ };
$('#my-datepicker').RendezVous(callback);

var settings = { /* ... */ };
var callback = function(rdv) { /* ... */ };
$('#my-datepicker').RendezVous(settings, callback);

Custom settings

    // If false, the datepicker can be only closed by calling "close();"
    canClose: true

    // If true, the datepicker is open by default
    openByDefault: false

    // If true, the date input will be split in day, month and year inputs
    splitInput: false

    // If false, input content can be edited
    inputReadOnly: true

    // If false, input will contains the default date by default
    inputEmptyByDefault: true

    // Separator between inputs (for splitted input)
    inputSeparator: ' / '

    // Default scale at which the datepicker opens
    defaultScale: 'month' // month, year, decade

    // Input formats
    formats: {
        display: {
            day:   '%D',          // day input (for splitted input)
            month: '%Month',      // month input (for splitted input)
            year:  '%Y',          // year input (for splitted input)
            date:  '%D %Month %Y' // date input
        }
    }
    /**
     * Available formats
     *
     * DAYS
     * %d   : Numeric day (e.g. 2)
     * %D   : Numeric day with leading zeros (e.g. 02)
     * %da  : Textual day abbreviation (e.g mon)
     * %Da  : Textual capitalized day abbreviation (e.g Mon)
     * %day : Textual day (e.g monday)
     * %Day : Textual capitalized day (e.g Monday)
     *
     * MONTHS
     * %m     : Numeric month (e.g. 1)
     * %M     : Numeric month with leading zeros (e.g. 01)
     * %mo    : Textual month abbreviation (e.g jan)
     * %Mo    : Textual capitalized month abbreviation (e.g Jan)
     * %month : Textual month (e.g january)
     * %Month : Textual capitalized month (e.g January)
     *
     * YEARS
     * %y : Numeric year, 2 digits (e.g 15)
     * %Y : Numeric year, 4 digits (e.g 2015)
     *
     * DECADES
     * %x0 : Numeric decade start, 2 digits (e.g 10)
     * %X0 : Numeric decade start, 4 digits (e.g 2010)
     * %x9 : Numeric decade end, 2 digits (e.g 19)
     * %X9 : Numeric decade end, 4 digits (e.g 2019)
     */

    // Default selected date
    defaultDate: {
        day:   today.getDate(),    // 1 through 31
        month: today.getMonth(),   // 0 through 11
        year:  today.getFullYear() // No limits
    }

    // Current language (see live demo at http://rendezvous.julien-marcou.fr)
    i18n: { /* ... */ }

Custom callback

$('#my-datepicker').RendezVous(function(rdv) {
    // To open the datepicker
    rdv.open();
    // To close the datepicker
    rdv.close();
    // To set the day of the datepicker
    rdv.setDay(day); // 1 through 31
    // To get the day of the datepicker
    rdv.getDay();
    // To set the month of the datepicker
    rdv.setMonth(month); // 1 through 12
    // To get the month of the datepicker
    rdv.getMonth();
    // To set the year of the datepicker
    rdv.setYear(year); // No limits
    // To get the year of the datepicker
    rdv.getYear();
    // To get the decade of the datepicker
    rdv.getDecade();
    // To set the date of the datepicker
    // (combination of the 3 previous)
    rdv.setDate(day, month, year);
    // To get the date of the datepicker (Date object)
    rdv.getDate();
    // To set the date to the previous day
    rdv.previousDay();
    // To set the date to the next day
    rdv.nextDay();
    // To set the date to the previous month
    rdv.previousMonth();
    // To set the date to the next month
    rdv.nextMonth();
    // To set the date to the previous year
    rdv.previousYear();
    // To set the date to the next year
    rdv.nextYear();
    // To set the date to the previous decade
    rdv.previousDecade();
    // To set the date to the next decade
    rdv.nextDecade();
    // To set the scale of the datepicker
    rdv.setScale(scale); // month, year, decade
    // To get the current scale of the datepicker
    rdv.getScale();
});