仅使用图标打开日期时间选择器

Question

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

我的问题：如何添加一个图标"inside"文本框，或者只是在文本框的边缘，这样你就可以在文本框中点击不打开 date/time 选择器，或者打开带有图标的 date/time 选择器，然后用您的选择填充文本框？因此，您可以选择在没有选择器出现的情况下手动输入时间或仅使用选择器。

bootstrap date/time 选择器具有此功能，但我需要为该项目使用 jQuery 而不是 bootstrap。

我找到了 this question，它很相似，但是从图标和文本框启动选择器。

Answer 1

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

$(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 事件）以开始创建日期选择器。如果没有人点击按钮，日期选择器将不会启动

EDIT2：抱歉，我对日期选择器工作原理的记忆有点傻。您应该通过在 div 而不是输入框上开始创建来将日期选择器初始化为 INLINE 元素。即

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

和 JS

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

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

Answer 2

我已更新 fiddle 以显示唯一的图标日期选择器；

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>

仅使用图标打开日期时间选择器

Open datetimepicker with icon only

html

javascript

css

jquery

datetimepicker