RendezVous.js

Keep calm and Pick a date !

Simple

Render

HTML

				<div rendezvous></div>

JavaScript

				// void

Css

				/* void */

Configurable

Render

HTML

				<div id="rendez-vous"></div>

JavaScript

				var settings = { /* ... */ };
				var callback = function(rdv) { /* ... */ };

				$('#rendez-vous').RendezVous(settings, callback);

Css

				/* void */

Default date

Render

HTML

				<div id="rendez-vous"></div>

JavaScript

				$('#rendez-vous').RendezVous({
					inputEmptyByDefault: false,
					defaultDate: {
						day: 1,    // 1 through 31
						month: 1,  // 0 through 11
						year: 2011 // No limits
					}
				});

Css

				/* void */

Custom language (Chinese)

Render

HTML

				<div id="rendez-vous"></div>

JavaScript

                $('#rendez-vous-french').RendezVous({
                    i18n: {
                        calendar: {
                            month: {
                                previous: '上一月',
                                next:     '下一月',
                                up:       '选择月份'
                            },
                            year: {
                                previous: '上一年',
                                next:     '下一年',
                                up:       '选择年份'
                            },
                            decade: {
                                previous: '上十年',
                                next:     '下十年',
                                up:       '选择日期'
                            }
                        },
                        days: {
                            abbreviation: {
                                monday:    '一',
                                tuesday:   '二',
                                wednesday: '三',
                                thursday:  '四',
                                friday:    '五',
                                saturday:  '六',
                                sunday:    '日'
                            },
                            entire: {
                                monday:    '星期一',
                                tuesday:   '星期二',
                                wednesday: '星期三',
                                thursday:  '星期四',
                                friday:    '星期五',
                                saturday:  '星期六',
                                sunday:    '星期日'
                            }
                        },
                        months: {
                            abbreviation:
                            {
                                january:   '一月',
                                february:  '二月',
                                march:     '三月',
                                april:     '四月',
                                may:       '五月',
                                june:      '六月',
                                july:      '七月',
                                august:    '八月',
                                september: '九月',
                                october:   '十月',
                                november:  '十一月',
                                december:  '十二月'
                            },
                            entire: {
                                january:   '一月',
                                february:  '二月',
                                march:     '三月',
                                april:     '四月',
                                may:       '五月',
                                june:      '六月',
                                july:      '七月',
                                august:    '八月',
                                september: '九月',
                                october:   '十月',
                                november:  '十一月',
                                december:  '十二月'
                            }
                        }
                    }
                });

Css

				/* void */

Fullscreen opening

Render

HTML

				<div id="rendez-vous"></div>

JavaScript

				$('#rendez-vous').RendezVous();

Css

				#rendez-vous .rendezvous-popup {
					position: fixed;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					background-color: rgba(30, 30, 30, 0.4);
				}
				#rendez-vous .rendezvous-datepicker {
					position: absolute;
					left: 50%;
					top: 50%;
					width: 21em;
					font-size: 1.3em;
					margin-left: -11em;
					margin-top: -8em;
				}

Custom date format (e.g. "Thursday 1 January 2015")

Render

HTML

				<div id="rendez-vous"></div>

JavaScript

				$('#rendez-vous').RendezVous({
					formats: {
						display: {
							date: '%Day %d %Month %Y'
						}
					}
				});

Css

				#rendez-vous .rendezvous-input input {
					width: 180px; /* to fit the result in the input */
				}

Input split

Render

HTML

				<div id="rendez-vous"></div>

JavaScript

				$('#rendez-vous').RendezVous({
					splitInput: true,
				});

Css

				#rendez-vous .rendezvous-input input {
					width: 60px; /* to fit the result in the inputs */
				}

Catch events

Render

HTML

				<div id="rendez-vous"></div>

JavaScript

				$('#rendez-vous')
					.on('rendezvous-init', function(event, rdv) {
						console.log('rdv-init');
					})
					.on('rendezvous-open', function(event, rdv) {
						console.log('rdv-open');
					})
					.on('rendezvous-close', function(event, rdv) {
						console.log('rdv-close');
					})
					.on('rendezvous-change', function(event, rdv) {
						console.log('rdv-change');
					})
					.RendezVous();

Css

				/* void */

Always open

Render

HTML

				<div id="rendez-vous"></div>

JavaScript

				$('#rendez-vous').RendezVous({
						canClose: false,
						openByDefault: true
					}
				);

Css

				#rendez-vous .rendezvous-popup {
					position: inherit;
				}

适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

来源：站长素材