打开日期时间选择器只有图标

Open datetimepicker with icon only

本文关键字：图标 选择器 时间 日期      更新时间：2023-09-26

我目前在一个项目中使用Trent Richardson的日期时间选择器。它链接到一个文本框，所以当你点击文本框，选择器弹出，你可以选择一个时间或手动输入一些东西。

我的问题:我如何添加一个图标"里面"的文本框，或只是在文本框的边缘，这样你就可以点击文本框而不打开日期/时间选择器，或打开日期/时间选择器与图标，这将然后填充文本框与您的选择?因此，您可以选择手动输入时间而不出现选择器或仅使用选择器。

bootstrap日期/时间选择器有这个功能，但我需要使用jQuery而不是这个项目的bootstrap。

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

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

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()});
    });
});


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

您应该能够将按钮上的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事件)来启动数据拾取器的创建。如果没有人点击按钮，日期选择器就不会启动

对不起，我对日期选择器工作原理的记忆有点傻。您应该将datepicker初始化为内联元素，方法是在div而不是输入框上开始创建。例如
<div id="datepickerarea"></div>
<input type="text" id="myinputbox" />

和JS

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

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

相关文章：