Проблема с пользовательским указателем даты в Chrome и Safari

Question

У меня проблема с хромом и сафари. При нажатии кнопки не открывается окно выбора даты. Я установил изображение каландра в качестве фона кнопки вот мой код

HTML:

input type="button" id="startdate" src="../images/Calendar.png" class="actions-edit-task task-exp-callendar">

Jquery:

$('#startdate').datepick({

        onSelect : showStartDate
    });

function showStartDate(dates) {
    var sdate = dates[0];
    taskStartDate = new Date(sdate.toDateString() + " " + $('#hourselector').val() + ":" + $('#minutselector').val() + " " + $('#ampmselector').text()).getTime();
}

CSS:

.actions-edit-task{
float: left;
padding: 5px;
margin: 5px 5px 0 5px;
}
.task-exp-callendar{
    height: 20px;
    width: 20px;
    background-image: url('../images/Calendar.png');
}

Заранее спасибо.

Answer 1

Вы дали свои входные данные двум классам?

class="actions-edit-task task-exp-callendar">

Объедините CSS / JS в один класс, посмотрите, имеет ли это какое-то значение.Safari и Chrome являются «будущими браузерами», возможно, им сложно читать оба класса.

HTML

<input type="button" id="startdate" src="../images/Calendar.png" class="combined-class">

CSS

.combined-class {
height: 20px;
width: 20px;
background-image: url('../images/Calendar.png');
float: left;
padding: 5px;
margin: 5px 5px 0 5px;
}