jquery-datetimepicker打开日历仅带有图标

编程问答 2022-06-06

问题描述

我正在使用[jquery-datetimepicker] [1]并试图进行设置，以便用户可以在输入字段中自由输入日期而不弹出日历，但是他们想选择日期/时间在视觉上，他们可以选择单击输入字段旁边的图标以弹出选择器。一切正常，除了当输入字段获得焦点时（无论是单击还是跳到日历上）我无法禁止日历弹出。单击日历图标可以正确显示日历，我希望这是弹出日历的唯一方法。其他datetimepickers似乎有一个选项可以从输入字段中禁用日历弹出窗口，但是我无法为此datetimepicker找到此选项-我可能缺少了一些东西。如果没有选择，那么有人会建议一些JavaScript来防止在触摸输入字段时弹出日历吗？

HTML：

<input type="text" name="planned_date" class="dateinput datetimepicker form-control" tabindex="5" autocomplete="off" data-check-month="1" data-min-date="0" data-max-date="45" data-input="" id="id_planned_date">

JS 

$.each($('.dateinput,.datetimeinput'),function () {
if ($(this).hasClass("datetimepicker")) {
            
            $(this).wrap("<div class='input-group'></div>");
            $('<a class="input-button" title="toggle" data-toggle><i class="fa fa-calendar"></i></a>').insertAfter(this);
            $(this).datetimepicker({
                format: 'm/d/Y',});
            $(this).next("a").click(function () {
                $(this).prev().datetimepicker('toggle');
            });
        }   
    });

我正在使用JS添加输入组所需的元素，因为该表单是从我的Django Crispy Forms代码自动生成的。我知道也可以使用Django Widget来完成此操作，但尝试使其易于启动-只需要知道是否有内置的方法可以禁用输入字段中日历的弹出窗口或某些具有同样的效果。这个datetimepicker也可以与我正在使用的Bootstrap 4一起很好地工作。感谢您的任何答复。 [1]：https://xdsoft.net/jqplugins/datetimepicker/

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootstrap-4datepickerdatepickerjavascriptjqueryjquerydatetimepicker