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

【问题标题】：Open date picker calendar using Glyphicon PRO calendar icon使用 Glyphicon PRO 日历图标打开日期选择器日历
【发布时间】：2014-01-15 07:05:30
【问题描述】：

我有一个运行良好的星期选择器，但我希望通过单击日历的 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/

【问题讨论】：

标签： jquery-ui datepicker glyphicons

【解决方案1】：

jQuery UI datepicker 代替 Glyphicons pro 提供了一个日历图标，可以像这样使用

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

JSFiddle

根据您的comments，

点击icon class时我触发了datepicker，

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

检查此fiddle。

仅供参考 .live 在 jQuery 1.9.1 中被删除，所以将 .live 替换为 .on

【讨论】：

我想使用 Glyphicons，这样我项目中的所有图标的样式都相同。 jQuery UI 提供的图片按钮在这种情况下是不可用的。
@NotAnotherCliche 好的，可以通过触发来实现。你有使用引导日期选择器的计划吗？
我已经在整个项目中使用 jQuery UI，所以我更愿意坚持使用它而不是切换到另一个日期选择器。
@NotAnotherCliche 因为图标不在小提琴中，我使用过jsfiddle.net/ke62p/4
@NotAnotherCliche 我在点击图标类时触发了日期选择器。另外 FYI live 已在 jQuery 1.9.1 中删除，因此将 .live 替换为 .on

【解决方案2】：

您可以使用带有“glyphicon”和“for”属性的标签

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

【讨论】：