正文 

当前位置： 首页 > 源码 >

使 eternicode 日期选择器在点击时打开，而不是焦点

     2023-05-07     123

关键词：

【中文标题】使 eternicode 日期选择器在点击时打开，而不是焦点【英文标题】：Make eternicode datepicker open on click, not focus 【发布时间】：2014-01-05 21:13:27 【问题描述】：

eternicode twitter bootstrap datepicker 会在其附加到的<input> 字段获得焦点 时立即弹出，您可以通过点击official demo page 上的日期选择器字段来查看。

相反，我希望它仅在 单击 时打开。理想情况下，日期选择器会在单击日历图标时弹出。

如何防止它在焦点上弹出？

【问题讨论】：

【参考方案1】：

在当前版本的库中，您想要做的事情没有官方支持。文档列表 all the kinds of markup you can instantiate a datepicker on 以及产生的行为是什么。很明显，在 <input> 元素上实例化日期选择器时，

聚焦输入（点击或切换）将显示选择器。

没有可以实例化日期选择器的标记，它可以轻松地为您提供所需的内容。也没有任何configuration options 可以让您选择触发日期选择器出现的事件。

因此，要执行您想要的操作，需要对库进行一些逆向工程。幸运的是，这很容易。

最简单的方法是像往常一样在<input> 上实例化日期选择器，然后我们自己去掉focus 处理程序并用click 处理程序替换它：

$('#my-input').datepicker()
              .off('focus')
              .click(function () 
                  $(this).datepicker('show');
              );

这非常适用于最新版本的库，正如 http://jsfiddle.net/E4K56/1/ 所展示的那样

如果您想拥有触发日期选择器外观的额外元素（如日历按钮），您可以类似地将处理程序附加到它们：

$('#some-button').click(function () 
    $('#my-input').datepicker('show');
);

【讨论】：

【参考方案2】：

我的符号与演示中的相同：

<label for="datepickerFrom" class="control-label input-group">Set the date from:</label>
<div class="form-group">
    <div class='input-group date' id='datepickerFrom'>
        <input type='text' class="form-control" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

然后在输入点击时添加添加事件：

var options = 
    language: 'cs'

$('#datepickerFrom').datetimepicker(options);
$('#datepickerFrom input').off('focus')
    .click(function () 
        $(this).parent().data("DateTimePicker").show();
    )

【讨论】：

如何使日期选择器可见？

】如何使日期选择器可见？【英文标题】：Howcanimakethedatepickerbevisible?【发布时间】：2019-10-1517:03:17【问题描述】：我希望日期选择器在我单击时可见并且可以工作。这是我的代码，我不知道为什么它不起作用<!DOCTYPEhtmlPUBLIC"-//... 查看详情

内联日期选择器在第二次尝试时崩溃

】内联日期选择器在第二次尝试时崩溃【英文标题】：Inlinedatepickercrashedonsecondattempt【发布时间】：2014-04-0811:36:59【问题描述】：我已经为这个问题苦苦挣扎了两个星期。但在***人员的帮助下，我已经成功实现了95%。Hereismyproblem.... 查看详情

HTML5 日期选择器仅在第二次点击时打开

】HTML5日期选择器仅在第二次点击时打开【英文标题】：HTML5Datepickeropensuponlyon2ndclick【发布时间】：2014-10-2609:35:57【问题描述】：我正在为我的日期日历日期框使用HTML5日期选择器(inputtype="date")。但是在Nexus7Chrome36和Motoroll... 查看详情

jquery mobile中的日期选择器在第二页中添加时重复

】jquerymobile中的日期选择器在第二页中添加时重复【英文标题】：Datepickerinjquerymobileisduplicatewhenisaddedinasecondpage【发布时间】：2011-06-2406:16:49【问题描述】：我需要一些关于在移动应用中使用日期选择器的帮助。我在我的应用程... 查看详情

点击图标打开 HTML5 日期选择器

】点击图标打开HTML5日期选择器【英文标题】：OpenHTML5datepickeroniconclick【发布时间】：2013-08-2200:40:16【问题描述】：我有一个HTML5日期选择器。当我单击日期选择器文本框时，它会打开。待办事项：我必须将事件更改为图标，但... 查看详情

Ng2 Bootstrap 的日期选择器在无法读取 getFullYear() 时不断抛出错误

】Ng2Bootstrap的日期选择器在无法读取getFullYear()时不断抛出错误【英文标题】：DatePickerfromNg2BootstrapkeepthrowingerroronunabletoreadgetFullYear()【发布时间】：2022-01-1710:27:13【问题描述】：我在尝试使用来自ng2-bootstrap的日期选择器禁用日期... 查看详情

angular-ui：日期选择器在显示按钮时似乎挂起 angularjs

】angular-ui：日期选择器在显示按钮时似乎挂起angularjs【英文标题】：angular-ui:datepickerseemstohangangularjswhenshowingbutton【发布时间】：2012-07-2115:17:28【问题描述】：我的应用程序中有这段html代码（之前定义了ng-app和ng-controller值）：&l... 查看详情

日期选择器在文本字段 iOS 8 上崩溃

】日期选择器在文本字段iOS8上崩溃【英文标题】：DatepickercrashesontextfieldiOS8【发布时间】：2014-12-2610:59:25【问题描述】：我在UITextField上使用了UIDatePicker。我已经按UITextField第一次使用日期选择器选择日期（应用程序工作正常）... 查看详情

Telerik rad 日期选择器在用户键入未来日期时显示错误消息

】Telerikrad日期选择器在用户键入未来日期时显示错误消息【英文标题】：Telerikraddatepickershowerrormessagewhenuserkeysinfuturedate【发布时间】：2012-06-2907:09:24【问题描述】：我有一个telerik:RadDatePicker，我通过在后面的代码中将MaxDate设置... 查看详情

JQuery UI 日期选择器在 Chrome 中不起作用

】JQueryUI日期选择器在Chrome中不起作用【英文标题】：JQueryUIdatepickernotworkinginChrome【发布时间】：2015-12-3104:47:42【问题描述】：我在我的asp.netMVC应用程序中使用JqueryUI日期选择器。在IE中一切正常，但在Chrome中，默认日期选择器... 查看详情

vs2022窗体设计器在哪

...在编辑区上方点击“工具”菜单项。3、在下拉子菜单中选择“选项”。4、在弹出“选项”窗口左侧，选择“项目和解决方案”栏。5、在右侧面板...vs2022能重置所有设置——1、首先打开VS2022软件，进入编辑主窗口。2、其次在编... 查看详情

windows时间同步时出错该怎么解决

Windows时间同步时出错该在更改日期时间设置里更改。1、打开“运行”对话框（通常按Win+R组合键就可以打开），然后输入“w32tm/register”进入注册。2、接着在对话框中输入“services.msc”进入服务管理界面。3、找到“WindowsTime”... 查看详情

材质 UI 日期选择器日历在页面渲染时立即打开

】材质UI日期选择器日历在页面渲染时立即打开【英文标题】：MaterialUIDatePickerCalendarOpenImmediatelyOnPageRender【发布时间】：2021-06-1002:27:08【问题描述】：我有一个来自MaterialUI的日历，它只有在我点击它时才会打开，所以它会像这... 查看详情

使用 jQuery Datepicker 使日期在加载时无法选择

】使用jQueryDatepicker使日期在加载时无法选择【英文标题】：MakedaysunselectableonloadwithjQueryDatepicker【发布时间】：2020-02-2115:12:17【问题描述】：我有两个日期：最小值和最大值，如链接图片中所示。如何设置以便在页面加载时，在... 查看详情

禁用日期的 HTML5 日期选择器在 Angular 中不起作用

】禁用日期的HTML5日期选择器在Angular中不起作用【英文标题】：HTML5DatepickerwithdisableddatesnotworkinginAngular【发布时间】：2018-08-2200:18:29【问题描述】：我想在日期选择器(HTML5)中禁用过去的日期。当我在没有任何条件的情况下（自... 查看详情

点击日期字段时如何调出日期选择器？

】点击日期字段时如何调出日期选择器？【英文标题】：Howtobringupadatepickerwhenadatefieldistapped?【发布时间】：2015-06-2316:03:21【问题描述】：我有一个带有日期文本字段的视图。我希望当前日期默认为“今天”，但如果用户想要输... 查看详情

选择器在 editMode 处于活动状态时不工作

】选择器在editMode处于活动状态时不工作【英文标题】：PickernotworkingwheneditModeisactive【发布时间】：2020-08-2106:28:18【问题描述】：我有一个视图(Form)，基本上，它有一个选择器和一个可由用户重新排列的项目列表。我希望该列表... 查看详情

如何使用日期选择器在角度材料 5.0.0 中选择日期范围？

】如何使用日期选择器在角度材料5.0.0中选择日期范围？【英文标题】：Howtopickdaterangeinangularmaterial5.0.0withdatepicker?【发布时间】：2018-04-2023:19:18【问题描述】：我在我的Angular5应用程序中使用最新的AngularMaterial5.0.0-rc0。我正在尝... 查看详情