Problem with custom datepicker in Chrome and safari

I have a problem with chrome and safari ..the date picker is not opening while clicking on the button. I set the calander image as the background of the button here is my code

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');
}

Thanks in advance.

Have you given your input two classes?

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

Combine the CSS/JS into one class, see if this makes any difference. Safari and Chrome are "future browsers" perhaps they have trouble reading both classes.

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;
}