Открыть календарь выбора даты с помощью значка календаря Glyphicon PRO

У меня есть сборщик недель, который отлично работает, но я бы хотел, чтобы сборщик открылся, щелкнув значок Glyphicons PRO для календаря.Открыть календарь выбора даты с помощью значка календаря Glyphicon 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 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.

FYI.live удаляется в JQuery 1.9.1 так заменить .live с .on

источник

2014-01-15 07:14:31 Praveen

Я хочу использовать Glyphicons так все значки в моем проекте стилизованы одинаково. В этом случае кнопка изображения, предоставляемая пользовательским интерфейсом jQuery, не является выполнимой. – NotAnotherCliche

@NotAnotherCliche ok, это возможно при запуске. у вас есть какой-нибудь план использования bootstrap datepicker? – Praveen

Я уже использую пользовательский интерфейс jQuery во всем моем проекте, поэтому я предпочел бы придерживаться этого, а не переключаться на другой datepicker. – NotAnotherCliche

Вы можете использовать ярлык с "glyphicon" и "для" атрибута

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

источник

2015-12-16 05:40:42

Открыть календарь выбора даты с помощью значка календаря Glyphicon PRO

ответ

Смежные вопросы