test work: datePicker

Simple datePicker

by extempl

HTML

<!doctype html>
<html>
<head>
    <title>some</title>
    <script>
        doNotInitDatePicker = false; //set to true if do not want t oinit datePicker on page load
    </script>
    <style>
        input {
            width: 105px;
            height: 18px;
            border: 1px solid #999;
            padding: 2px 5px;
        }

        .inputWrapper {
            margin: 5px;
            position: absolute;
        }
    </style>
</head>
<body>

<div class="inputWrapper" style="left: 0; top: 0">
    <input type="text" data-datepicker="true" />
</div>
<div class="inputWrapper" style="left: 0; bottom: 0">
    <input type="text" data-datepicker="true" />
</div>
<div class="inputWrapper" style="right: 0; top: 25px">
    <input type="text" data-datepicker="true" />
</div>
<div class="inputWrapper" style="right: 0; bottom: 0">
    <input type="text" data-datepicker="true" />
</div>
</body>
</html>

CSS

.datePicker {
    display: inline-block;
    position: relative;
}

.datePicker > input {
    padding-right: 20px;
}

.calendar_icon {
    background: transparent url(data:image/gif;base64,R0lGODlhDQAKAIABAAAAAP///yH5BAEKAAEALAAAAAANAAoAAAIXjIGpFnDfmItU2Qun1vncz1VSRzXgFBQAOw==) no-repeat center center;
    height: 13px;
    width: 13px;
    position:absolute;
    right: 7px;
    top: 5px;
    cursor: pointer;
}

#popupDatePicker {
    height: 190px;
    width: 190px;
    position: absolute;
    display: none;
    background-color: #fff;
    border: 1px solid #b4b4b4;
    border-radius: 5px;
    padding: 2px;
    margin: 0;
    top: 21px;
    left: 21px;
    z-index: 10001;
    cursor: default;
    text-align: center;
    font-size: 12px;
    font-family: Arial;
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
}

#dataPickerHeader {
    background: #f3e7cd;
    border: 1px solid #f3dec4;
    border-radius: 2px;
    height: 14px;
    padding: 5px 0;
    position: relative;
    font-size: 10px;

}

#datePickerCentralHeader * {
    display: none;
}

#datePickerCentralHeader > [data-section="days"],
#datePickerCentralHeader .currentSection,
#datePickerCentralHeader > .currentSection[data-section="days"] > span {
    display: inline;
    padding: 6px 3px;
}

#datePickerCentralHeader > [data-section="days"] *:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, .1);
}

#leftDatePickerLister, #rightDatePickerLister {
    height: 10px;
    width: 8px;
    padding: 7px;
    cursor: pointer;
    background: transparent...

JavaScript

var DatePicker = function (parameters) {
    this.parameters = $.extend({
        i18n: {
            months: [
                'January', 'February', 'March',
                'April'  , 'May'     , 'June',
                'July'   , 'August'  , 'September',
                'October', 'November', 'December'
            ],
            weekDays: [
                'Su', 'Mo', 'Tu',
                'We', 'Th', 'Fr', 'Sa'
            ]

        },
        dateFormat: 'MMM d[ yyyy]'
    }, parameters);

    var shortMonths = [];
    for(var i = 0, l = this.parameters.i18n.months.length; i < l; i++)
        shortMonths[i] = this.parameters.i18n.months[i].substring(0, 3);

    this.parameters.i18n.shortMonths = shortMonths;

    var today = new Date();

    this.todayDates =  {
        year:  today.getFullYear(),
        month: today.getMonth(),
        day:   today.getDate()
    };
};

DatePicker.prototype = {
    /*
    * public initialise method
    * can handle environment for find inputs
    */
    init: function (env) {
        var self = this;
        if(!env) env = document;
        if(!$('#popupDatePicker').length) {
            /*
             * initialise popup element once
             */
            $(
                '<div id="popupDatePicker" class="popup">' +
                    '<div id="dataPickerHeader">' +
                        '<div id="leftDatePickerLister"></div>' +
                        '<div id="datePickerCentralHeader">' +
                            '<span data-section="days">' +
                                '<span data-type="month"></span>' +
                                '<span data-section="months" data-type="year"></span>' +
                            '</span>' +
                            '<span data-section="years"></span>' +
                        '</div>' +
                        '<div id="rightDatePickerLister"></div>' +
                    '</div>' +
                    '<div id="tableWrapper"><table...