仅使用图标打开 datetimepicker

Posted 2023-05-07

【中文标题】仅使用图标打开 datetimepicker

【英文标题】：Open datetimepicker with icon only

【发布时间】：2015-10-06 06:35:56

【问题描述】：

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

我的问题：如何在文本框的“内部”或文本框的边缘添加一个图标，以便您可以在不打开日期的情况下点击文本框时间选择器，或者打开带有图标的日期/时间选择器，然后它将根据您的选择填充文本框？因此，您可以选择手动输入时间而不出现选择器或仅使用选择器。

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

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

【问题讨论】：

我不知道这个答案是否有帮助？ ***.com/questions/1112035/…

【参考方案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>

【讨论】：

有没有简单的方法来改变buttonImage的大小？有没有类似.ui-datepicker-icon 类的东西可以应用css？

@lg22woo 我认为您可以使用 class .ui-datepicker-trigger 来设置图标的高度和宽度

【参考方案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();
    

编辑：在您告诉它初始化之前，日期选择器不会初始化。此代码将停止日期选择器的启动，因为我们正在绑定一个事件（特别是 onclick 事件）来开始创建日期选择器。如果没有人点击按钮，日期选择器根本不会启动

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

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

和 JS

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

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

【讨论】：

用图标打开没问题，但是如何防止在点击文本框时打开呢？

@lg22woo 对不起，我误解了，我编辑了我的答案以获得更多你想要的东西。

感谢您的快速响应——我们越来越近了，但这仍然不是我想要做的；该按钮现在创建选择器，但您仍然需要单击它所绑定的文本框才能打开/关闭它。澄清一下：我只想要打开/关闭选择器的按钮，以及选择输出到文本框的日期/时间。