🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A jQuery date picker plugin which allows you to select a date from a monthly calendar with tons of customization options and full-featured API.

Date-Picker

Documentation

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

You May Also Like