Question

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" />

Answer 1

.ui-datepicker-trigger{cursor:pointer}