Skip to content

rohanrhu/jquery.datepicker

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
js
 
 
 
 
 
 
 
 
 
 

jquery.datepicker

a futuristic datepicker for web

GitHub release GitHub nightly build

jquery.datepicker

Visit project page for example and api reference for documentation.

Init

Javascript

$(document).ready(function () {
    var $selected = $('.selected');
    var $start = $('.start');
    var $toggleMode = $('.toggleMode');

    var $some_datepicker = $('.some_datepicker');
    $some_datepicker.datepicker();
    var datepicker = jQueryDatepicker.data($some_datepicker);

    var date = new Date();

    $some_datepicker.on(jQueryDatepicker.event('date_selected'), function (event, date) {
        if (date.mode == 'date') {
            console.log('date selected:', date);
        } else if (date.mode == 'start_date') {
            console.log('start date selected:', date);
        }

        if (datepicker.isStartDateSelected()) {
            $start.show().html('<b>start date:</b> '+date.start_date.date.toString());
        }
        
        $selected.show().html('<b>date:</b> '+date.date.toString());
    });

    // If you need a date range
    datepicker.setStartDate({
        year: 2017,
        month: date.getMonth()+1,
        day: 4
    });

    datepicker.setDate({
        year: 2017,
        // jquery.datepicker accepts first month as 1
        // (built-in Date() class accepts first month as 0)
        month: date.getMonth()+1,
        day: 21
    });

    $toggleMode.on('click', function (event) {
        datepicker.toggleMode();

        if (datepicker.getMode() == 'date') {
            $toggleMode.html('toggle start date selection mode');
        } else {
            $toggleMode.html('toggle date selection mode');
        }
    });
});

HTML

<div style="width: 300px; font-family: 'Arial'; margin: auto;">
    <div class="some_datepicker">
    </div>
</div>

<div class="toggleMode btn" style="margin: auto; margin-top: 15px;">
    toggle start date selection mode
</div>

<div class="start" style="margin: auto; margin-top: 15px;">
</div>

<div class="selected" style="margin: auto;margin-top: 10px;">
</div>

CSS

.btn {
    display: inline-block;
    cursor: pointer;
    border: 1px solid #c1c1c1;
    border-bottom: 2px solid #c1c1c1;
    padding: 5px; border-radius: 2px;
    transition: all 250ms;
    font-size: 14px;
}

.selected,
.start {
    font-size: 14px;
}

.btn:hover {
    background: #f1f1f1;
}

I18N

jQueryDatepicker.day_names_short = {
    1: 'Mon',
    2: 'Tue',
    3: 'Wed',
    4: 'Thu',
    5: 'Fri',
    6: 'Sat',
    7: 'Sun'
};

jQueryDatepicker.day_names = {
    1: 'Monday',
    2: 'Tuesday',
    3: 'Wednesday',
    4: 'Thursday',
    5: 'Friday',
    6: 'Saturday',
    7: 'Sunday'
};

jQueryDatepicker.month_names = {
    1: 'January',
    2: 'February',
    3: 'March',
    4: 'April',
    5: 'May',
    6: 'June',
    7: 'July',
    8: 'Agust',
    9: 'September',
    10: 'October',
    11: 'November',
    12: 'December'
};

License

MIT