RendezVous.js

Keep calm and Pick a date !

Simple

Render

Mon Tue Wed Thu Fri Sat Sun

HTML

1
2
<div rendezvous></div>

JavaScript

1
2
// void

Css

1
2
/* void */

Configurable

Render

Mon Tue Wed Thu Fri Sat Sun

HTML

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

JavaScript

1
2
3
4
5
var settings = { /* ... */ };
var callback = function(rdv) { /* ... */ };
 
$('#rendez-vous').RendezVous(settings, callback);

Css

1
2
/* void */

Default date

Render

Mon Tue Wed Thu Fri Sat Sun

HTML

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

JavaScript

1
2
3
4
5
6
7
8
9
$('#rendez-vous').RendezVous({
    inputEmptyByDefault: false,
    defaultDate: {
        day: 1,    // 1 through 31
        month: 1,  // 0 through 11
        year: 2011 // No limits
    }
});

Css

1
2
/* void */

Custom language (Chinese)

Render

一 二 三 四 五 六 日

HTML

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

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
$('#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

1
2
/* void */

Fullscreen opening

Render

Mon Tue Wed Thu Fri Sat Sun

HTML

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

JavaScript

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

Css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#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

Mon Tue Wed Thu Fri Sat Sun

HTML

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

JavaScript

1
2
3
4
5
6
7
8
$('#rendez-vous').RendezVous({
    formats: {
        display: {
            date: '%Day %d %Month %Y'
        }
    }
});

Css

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

Input split

Render

/ /
Mon Tue Wed Thu Fri Sat Sun

HTML

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

JavaScript

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

Css

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

Catch events

Render

Mon Tue Wed Thu Fri Sat Sun

HTML

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

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('#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

1
2
/* void */

Always open

Render

Mon Tue Wed Thu Fri Sat Sun

HTML

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

JavaScript

1
2
3
4
5
6
$('#rendez-vous').RendezVous({
        canClose: false,
        openByDefault: true
    }
);

Css

1
2
3
4
#rendez-vous .rendezvous-popup {
    position: inherit;
}

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

来源：站长素材