Open datetimepicker with icon only

Question

I'm currently using Trent Richardson's datetimepicker in a project. It's linked to a textbox so that when you click in the textbox, the picker pops up and you can either select a time or manually type something in.

My question: How do I add an icon "inside" the textbox, or just at the edge of the textbox, so that you can click in the textbox without opening the date/time picker, or open the date/time picker with the icon, which will then populate the textbox with your choice? Thus you have your choice of manually entering a time without the picker coming up or just using the picker.

The bootstrap date/time picker has this feature, but I need to use jQuery and not bootstrap for this project.

I found this question, which is similar, but launches the picker from both the icon and textbox.

Answer 1

I have updated fiddle for the only icon datepicker show;

http://jsfiddle.net/uDVwx/33/

Jquery Code

$(document).ready(function() {

    $(function() {

        $("#from-datetime").datetimepicker({
            showOn: 'both',
            buttonImage: 'http://testsite.shadownetwest.com/datepicker4/development-bundle/demos/images/calendar.gif',
            buttonImageOnly: true,
            changeMonth: true,
            changeYear: true
        }) .click(function() {
      $("#ui-datepicker-div").hide();
    });

        $(".ui-datepicker-trigger ").click(function(){$("#ui-datepicker-div").show()});

    });

});

HTML code

<fieldset id="fieldset">
    <dl>
        <dt><label for="from-datetime">From: </label></dt>
        <dd><input type="text" value="" id="from-datetime" name="from-datetime"/></dd>
    </dl>

</fieldset>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.js"></script>

<script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>