使用Glyphicon PRO日历选择器日历PRO日历图标

我有一个星期选择器，工作很好，但我希望通过点击日历的Glyphicons PRO图标打开选择器。使用Glyphicon PRO日历选择器日历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/

来源

2014-01-15 NotAnotherCliche

代替Glyphicons亲，jQuery UI的日期选择器是提供能够LIK

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。

FYI.live在jQuery的1.9.1被移除，与.on

来源

2014-01-15 07:14:31 Praveen

我想用这样Glyphicons我的项目中的所有图标都是相同的样式。在这种情况下，jQuery UI提供的图像按钮不可行。 – NotAnotherCliche

@NotAnotherCliche好吧，可以通过触发。你有没有计划使用bootstrap datepicker？ – Praveen

我已经在我的项目中使用了jQuery UI，所以我宁愿坚持，而不是切换到另一个日期选择器。 – NotAnotherCliche

更换.live您可以使用 “glyphicon” 和标签 “的” 属性

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

来源

2015-12-16 05:40:42

使用Glyphicon PRO日历选择器日历PRO日历图标

回答

相关问题