WTS - Calendar Picker

by Paulo Ávila

HTML

<link rel="stylesheet" href="http://sbs.waytostay.com/ITC/pickadate/pickadate.02.classic.css">
<script src="http://sbs.waytostay.com/ITC/pickadate/pickadate.legacy.min.js"></script>
<input class="calendar-arr" type="text"> Arrival<br>
<input class="calendar-dep" type="text"> Departure

CSS

body { font-family: Arial; }

.pickadate__calendar { background-color: #f1e9e0; }
.pickadate__table {
    /*border-collapse: collapse;
    border-spacing: 0;
    box-shadow: 0 1px 5px #aaa;
    border-radius: 5px;*/
}
.pickadate__table td { border-bottom: 1px solid #efe9e4; border-right: 1px solid #efe9e4; }
.pickadate__body { background-color: white; border-radius: 3px; }
/*
.pickadate__body tr:first-child td:nth-child(1) div { border-top-left-radius: 5px; }
.pickadate__body tr:first-child td:nth-child(7) div { border-top-right-radius: 5px; }
.pickadate__body tr:last-child td:nth-child(1) div { border-bottom-left-radius: 5px; }
.pickadate__body tr:last-child td:nth-child(7) div { border-bottom-right-radius: 5px; }
*/
.pickadate__weekday { color: black; font-weight: bold; }

.pickadate__day { margin: 0; padding: .5em; border: 3px solid transparent; }
.pickadate__day:hover { background-color: transparent; border-color: #1fa8df; }

.pickadate__day--disabled,
.pickadate__day--disabled:hover { background: #ccc; border: 3px solid transparent; color: #888; /*text-decoration: line-through;*/ }

.pickadate__day--today:before { content: none; }
.pickadate__day--today { color: black; font-weight: bold; }
.pickadate__day--today:hover { color: black; }

.pickadate__wrap .pickadate__day--highlighted { color: black; background-color: white; border: 3px solid #1fa8df; }

.pickadate__day--outfocus,
.pickadate__day--outfocus:hover { color: #ababab; opacity: 1; }

.pickadate__day--disabled.pickadate__day--outfocus { background: #ddd; }

.pickadate__nav--next,
.pickadate__nav--prev {  }

JavaScript

now = new Date();
todayYear = now.getFullYear();
todayMonth = now.getMonth() + 1;
todayDay = now.getDate();

// http://amsul.ca/pickadate.js/docs.htm#options
var arrCalendar,
    depCalendar;

// sets default options for both calendars
$.extend($.fn.pickadate.defaults, {
    monthsFull: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    weekdaysFull: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    today: 'Hoy',
    clear: false,
    format: 'dd-mm-yyyy',
    //formatSubmit: 'dd-mm-yyyy',
    firstDay: 1,
    monthPrev: '&#9664;',
    monthNext: '&#9654;',
    monthSelector: true,
    yearSelector: true,
    //selectively disable the browser native "date" type using Modernizer
    //disablePicker: true,
    dateMin: [todayYear, todayMonth, (todayDay + 1)],
    dateMax: [(todayYear + 1), todayMonth, todayDay]
});

// init the arrival calendar and set its specific options
arrCalendar = $('.calendar-arr').pickadate({
    onSelect: function () {
        var depYear, depMonth, depDay,
            arr = new Date(this.getDate(true)),
            future = new Date(arr.getTime() + (3 * (24 * 60 * 60 * 1000))),
            arrYear = this.getDate('yyyy'),
            arrMonth = this.getDate('mm'),
            arrDay = this.getDate('dd');

        depYear = future.getFullYear();
        depMonth = future.getMonth() + 1;
        depDay = future.getDate();

        depCalendar.data('pickadate').setDateLimit([arrYear, arrMonth, arrDay]);
        depCalendar.data('pickadate').setDate(depYear, depMonth, depDay).open();
    }
});

// init the departure calendar and set its specific options
depCalendar = $('.calendar-dep').pickadate({
    today: false
});