Below I have a Jquery datepicker and a jquery timepicker (both trent richardson's datepicker and timepicker)
$(function() {
$( "#datepicker" ).datepicker({minDate: 0,
dateFormat: "dd-mm-yy",
showOn: "button",
buttonImage: "Images/calendar.gif",
buttonImageOnly: true});
});
$('#durationpicker').trenttimepicker({
timeFormat:'hh mm ss',
hourGrid: 4,
minuteGrid: 10,
secondGrid: 10,
showOn: 'button',
buttonImage: "Images/clock.gif",
buttonImageOnly: true
});
});
Now both datepicker and timepicker are accessed by the user clicking on an icon (a calender icon for datepicker and a clock icon for timepicker ('#durationpicker'). What my question is that how can I get it so that the pointer cursor appears when the user is hovering over the two icons?
Below is the html:
<p><strong>3: Duration:</strong> <input type="text" id="durationpicker" name="durationChosen" readonly="readonly" />
<p><strong>4: Date:</strong> <input type="text" id="datepicker" name="dateChosen" readonly="readonly" />
.ui-datepicker-trigger{cursor:pointer}
$( ".ui-datepicker-trigger" ).css('cursor','pointer');
This works for me the jQuery way, you can include it in your script and it should not give you any issues. I'm using it myself for a project with both jQuery ThemeSwitcher and jQuery UI Themes.
This is a wild guess, but should take you where you need to :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With