$(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');
        }
    });
});

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'
};