仅使用图标打开datetimepicker

Question

我目前在一个项目中使用Trent Richardson的datetimepicker 。 它链接到文本框，因此当您单击文本框时，弹出选择器，您可以选择时间或手动输入内容。

我的问题：如何在文本框内或文本框的边缘添加图标，以便您可以在不打开日期/时间选择器的情况下单击文本框，或使用图标打开日期/时间选择器，然后将使用您选择的内容填充文本框？ 因此，您可以选择手动输入时间而不会出现选择器或仅使用选择器。

引导日期/时间选择器具有此功能，但是对于该项目，我需要使用jQuery而不是引导。

我发现这个问题 ，这是类似的，但无论从图标和文本框启动选择器。

Answer 1

我已经更新了唯一的图标日期选择器显示的小提琴；

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

jQuery代码

$(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代码

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

Answer 2

您应该能够将按钮上的onclick事件绑定到datepicker实体的创建。 例如，

$(document).ready(function() {
    $("#myButton").click = initiate;
});

function initiate() {
    $("#datepickerarea").datepicker();
}

设置带有id="myButton"的按钮（或任何您喜欢的按钮），并单击它会生成一个新的日期选择器。 如果希望该按钮为切换按钮，则必须跟踪datepicker状态，然后将其删除（如果已存在）。

function initiatie() {
    if($("#filter_date").datepicker( "widget" ).is(":visible")) {
        $("#datepickerarea").datepicker("destroy");
    } else {
        $("#datepickerarea").datepicker();
    }
}

编辑：日期选择器不会初始化，除非您告诉它要初始化。 该代码将阻止datepicker的启动，因为我们绑定了一个事件（特别是onclick事件）以开始创建datepicker。 如果没有人单击按钮，日期选择器将根本无法启动

EDIT2：抱歉，我对datepicker的工作方式的记忆有点傻。 您应该通过在div而非输入框上开始创建，将datepicker初始化为INLINE元素。 即

<div id="datepickerarea"></div>
<input type="text" id="myinputbox" />

和JS

$("#datepickerarea").datepicker({ altField: "myinputbox"});

这将日期选择器作为一个更永久的元素显示出来，并将用户选择的内容放入输入字段中。