0

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

4

2 回答 2

0

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

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

JSFiddle

根据您的评论，

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

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

检查这个小提琴。

FYI .live在 jQuery 1.9.1 中被删除，所以替换.live为.on

于 2014-01-15T07:14:31.707 回答
0

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

<label for="date_control" class="glyphicon glyphicon-calendar"></label>
于 2015-12-16T05:40:42.303 回答