打开只带图标的日期选择器

Question

我目前正在一个项目中使用特伦特理查森( Trent Richardson)日期选择器。它被链接到一个文本框，这样当您在文本框中单击时，选择器就会弹出，您可以选择一个时间，或者手动键入一些内容。

我的问题:如何在文本框内或文本框的边缘添加一个图标，以便您可以在文本框中单击而不打开日期/时间选择器，或者使用图标打开日期/时间选择器，然后该图标将使用您的选择填充文本框？因此，您可以选择手动输入时间，而不需要选择器，或者只是使用选择器。

引导日期/时间选择器具有此特性，但对于此项目，我需要使用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"，当它点击，它会产生一个新的数据报警器。如果您想要按钮是一个切换，您将必须保持跟踪的数据交换状态，然后删除它，如果它已经存在。

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

编辑:数据报警器将不会初始化，直到您告诉它初始化。这段代码将阻止数据报警器的启动，因为我们正在绑定一个事件(特别是onclick事件)来启动数据报童器的创建。如果没有人单击该按钮，则datepicker就不会启动。

EDIT2:抱歉，我对datepicker的记忆有点傻。您应该将datepicker初始化为内联元素，方法是在div而不是输入框上开始创建。即

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

和JS

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

这会将datepicker作为一个更永久的元素，并将用户选择的任何内容放入输入字段。