Question

我有一个星期选择器工作得很好，但我想通过点击Glyphicons PRO图标来打开选择器。

任何人都知道如何使用Glyphicons PRO日历图标而不是输入字段来打开日期选择器的日历？

当我将鼠标悬停在该行的任何日期时，我也希望日历能够正确地突出显示行。现在，仅当我选择的日期在该周的范围内时，才会突出显示行。

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

这是我的小提琴.... http://jsfiddle.net/notanothercliche/ke62p/

Answer 1

而不是Glyphicons pro，jQuery UI datepicker提供了一个可以使用的日历图标

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

JSFiddle

根据您的comments，

点击datepicker时，我已触发icon class，

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

检查此fiddle。

在jQuery 1.9.1中删除了

FYI .live，因此将.live替换为.on

Answer 2

您可以使用标签＆＃34; glyphicon＆＃34; ＆＃34; for＆＃34;属性

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

使用Glyphicon PRO日历图标打开日期选择器日历

2 个答案: