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();

});