Open date picker calendar using Glyphicon PRO calendar icon

Question

I've got a week picker that is working great, but I'd like for the picker to open by clicking on the Glyphicons PRO icon for a calendar.

Anyone know how to use a Glyphicons PRO calendar icon instead of the input field to open the date picker's calendar?

I'd also like the calendar to correctly highlight rows as I hover over any date in that row. Now, the rows are highlighted only if my chosen date is within that week's range.

$(function () {
var startDate;
var endDate;

var selectCurrentWeek = function () {
    window.setTimeout(function () {
        $('.ui-weekpicker').find('.ui-datepicker-current-day a').addClass('ui-state-active').removeClass('ui-state-default');
    }, 1);
}

var setDates = function (input) {
    var $input = $(input);
    var date = $input.datepicker('getDate');
    if (date !== null) {
        var firstDay = $input.datepicker("option", "firstDay");
        var dayAdjustment = date.getDay() - firstDay;
        if (dayAdjustment < 0) {
            dayAdjustment += 7;
        }
        startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - dayAdjustment);
        endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - dayAdjustment + 6);

        var inst = $input.data('datepicker');
        var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
        $('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings));
        $('#endDate').text($.datepicker.formatDate(dateFormat, endDate, inst.settings));
    }
}

$('.week-picker').datepicker({
    beforeShow: function () {
        $('#ui-datepicker-div').addClass('ui-weekpicker');
        selectCurrentWeek();
    },
    onClose: function () {
        $('#ui-datepicker-div').removeClass('ui-weekpicker');
    },
    showOtherMonths: true,
    selectOtherMonths: true,
    onSelect: function (dateText, inst) {
        setDates(this);
        selectCurrentWeek();
        $(this).change();
    },
    beforeShowDay: function (date) {
        var cssClass = '';
        if (date >= startDate && date <= endDate) cssClass = 'ui-datepicker-current-day';
        return [true, cssClass];
    },
    onChangeMonthYear: function (year, month, inst) {
        selectCurrentWeek();
    }
});

setDates('.week-picker');

var $calendarTR = $('.ui-weekpicker .ui-datepicker-calendar tr');
$calendarTR.live('mousemove', function () {
    $(this).find('td a').addClass('ui-state-hover');
});
$calendarTR.live('mouseleave', function () {
    $(this).find('td a').removeClass('ui-state-hover');
});
});

Here's my fiddle.... http://jsfiddle.net/notanothercliche/ke62p/

Answer 1

Instead of Glyphicons pro, jQuery UI datepicker is providing a calendar icons which can used lik

showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true

JSFiddle

As per your comments,

I have triggered the datepicker when the icon class is clicked,

$('.glyphicon-calendar').on('click', function () {
        $('.week-picker').focus()
    });

check this fiddle.

FYI .live is removed in jQuery 1.9.1 so replace .live with .on

Answer 2

You can use a label with "glyphicon" and "for" attribute

<label for="date_control" class="glyphicon glyphicon-calendar"></label>