正文 

当前位置： 首页 > 问答 >

如何使用 jQuery 日期选择器优化引导输入标签

     2023-05-08     196

关键词：

【中文标题】如何使用 jQuery 日期选择器优化引导输入标签【英文标题】：How to optimize Bootstrap Input Tags With a jQuery Date picker 【发布时间】：2019-03-14 22:07:34 【问题描述】：

我已经实现了一个日期选择器。这样当我从日期选择器中选择一年时，选定的年份需要在给定的输入字段中显示为标签

代码

<div class="panel-body">
    <form id="sbYearRevForm" class="form-horizontal" method="post">
        <div class="form-group">
            <label class="col-sm-2 control-label">Year(s)<span style="color: red"> *</span></label>
            <div class="col-sm-10">
                <!-- <input type="tel" pattern='\d9'  id="msisdn" name="msisdn" placeholder="Subscriber No.(77xxxxxxx)" class="form-control input-sm" required> -->
                <input type="text" id="yearPicker" name="years" class="form-control input-sm" data-role="tagsinput" required>   
            </div>
        </div>

相关的jQuery函数如下。 

$('#yearPicker').tagsinput(
    typeaheadjs: 
       minViewMode: 2,
       format: 'yyyy',
       multidate: true,
       endDate: '+0y',
       startDate: '2016'
    
);
$('.bootstrap-tagsinput input[type="text"]').datepicker(
    minViewMode: 2,
    format: 'yyyy',
    multidate: true,
    endDate: '+0y',
    startDate: '2016',
    onSelect: function(dateText) 
        $('#yearPicker').tagsinput('add', dateText);
  
);

当我实现这两个问题时发现。

    通常在标签的右上角有一个小 x 按钮可以将其删除。根据我错过的代码。 根据要求标签需要出现在输入文本区域内。但它已经走到了外面。

请看下面的截图。谁能建议我克服这个问题？谢谢。

【问题讨论】：

【参考方案1】：

我找到了答案。我所要做的就是只添加 

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css

进入我的代码。

【讨论】：

引导输入类型=“日期”不加载日期选择器

...【发布时间】：2015-07-2508:18:21【问题描述】：我正在尝试使用引导输入类型“日期”来创建带有日期选择器的输入字段，但是虽然输入字段的格式似乎是由引导的样式设置的，但日期选择器似乎没有正在该领域实施。单击该字段... 查看详情

如何使用引导日期选择器

】如何使用引导日期选择器【英文标题】：Howtousebootstrapdatepicker【发布时间】：2013-09-0209:45:12【问题描述】：好的，所以我是使用框架和js库的新手，我希望我们引导和引导日期选择器作为表单，我不知道我的文件顺序是否正确... 查看详情

如何使用引导模式更新引导日期时间选择器中的默认日期

】如何使用引导模式更新引导日期时间选择器中的默认日期【英文标题】：HowtoupdatedefaultDateinthebootstrapdatetimepickerusingBootstrapmodal【发布时间】：2020-12-3023:41:30【问题描述】：如何在使用引导程序datetimepicker的引导程序模式中使用d... 查看详情

如何禁用和启用引导日期选择器

】如何禁用和启用引导日期选择器【英文标题】：Howtodisableandenablethebootstrapdatepicker【发布时间】：2020-07-3102:19:16【问题描述】：我正在尝试禁用和启用引导日期选择器。HowtodisableBootstrapDatePicker中描述的方法对我不起作用，可能... 查看详情

如何使用角度引导日期选择器显示正确的日期格式？

】如何使用角度引导日期选择器显示正确的日期格式？【英文标题】：HowcanIdisplaytherightdateformatwithangularbootstrapdatepicker?【发布时间】：2015-12-0710:47:06【问题描述】：我正在使用引导日期选择器进行Angular，但在显示正确的日期格... 查看详情

JQuery 日期选择器如何知道用户以 DD/MM/YYYY 格式输入数据

】JQuery日期选择器如何知道用户以DD/MM/YYYY格式输入数据【英文标题】：JQuerydatepickerhowtoknowuserentersthedatainDD/MM/YYYYformat【发布时间】：2013-05-2320:33:20【问题描述】：我在我的项目中使用了一个JQuery日期选择器。我想知道用户在日... 查看详情

Angularjs验证 - 无法识别引导日期选择器输入

...了交互并且没有手动填写日期，则会出现消息。问题是当使用datepicker填充日期时，Angularjs无法识别输入并且仍然认为$ 查看详情

JQuery 如何正确显示日期选择器？

】JQuery如何正确显示日期选择器？【英文标题】：JQueryHowcandisplaydatepickerproperly?【发布时间】：2022-01-0600:38:45【问题描述】：大家，你知道这个datepick有什么问题吗？我希望看到的是日历，而不是时间选择器。我使用来自youtube教... 查看详情

引导日期选择器和引导验证器

...idator【发布时间】：2014-10-2114:52:03【问题描述】：我正在使用来自here的引导日期选择器和来自here的引导验证器。我也在使用引导程序v3.1.1。从日期选择器中选择日期后，验证器没有反应。它只在我使用键盘输入日期时起作用。... 查看详情

如何在同一页面上使用引导程序和 jquery 下拉菜单

】如何在同一页面上使用引导程序和jquery下拉菜单【英文标题】：Howtousebootstrapandjquerydropdownonsamepage【发布时间】：2012-10-1710:03:52【问题描述】：我想使用引导日期和时间选择器，我已经使用文件“jquery.dropdown.js”在我的页面中... 查看详情

如果在日历外单击，则引导日期选择器删除输入值

...ethecalendar【发布时间】：2016-05-2402:59:22【问题描述】：我使用引导日期选择器并用一个值对其进行初始化。现在，如果我在日历外部单击，则当日历打开时，日历淡出并且输入字段变为空。我在这里创建了案例sample我的JS：$(\'div... 查看详情

如何在引导日期选择器中突出显示特定日期？

】如何在引导日期选择器中突出显示特定日期？【英文标题】：Howtohighlightspecificdatesinbootstrapdatepicker?【发布时间】：2015-05-0104:54:56【问题描述】：我正在使用引导日期选择器。我需要突出显示一些随机日期。例如：我需要突出... 查看详情

无法使用引导日期选择器

】无法使用引导日期选择器【英文标题】：Unabletousebootstrapdatepicker【发布时间】：2014-04-0519:43:52【问题描述】：我试图在输入区域添加Bootstrapdatepicker，但我无法对其进行配置：我使用他们的demopage生成代码并尝试了它，但似乎我... 查看详情

引导模式 + 日期选择器 + 表单值

...【问题描述】：我在引导程序模式中有一个表单，该表单使用引导程序日期选择器进行输入。我将此模式用作“更新”表单来更新已保存的数据库记录。这些值会正确传递给表单。但是，如果我单击datepicker输入，则会出现日期... 查看详情

如何修复引导日期选择器

】如何修复引导日期选择器【英文标题】：HowtoFixBootstrapDatepicker【发布时间】：2019-03-2316:44:47【问题描述】：如何为Datepicker设置今天和明天的日期？JSFilehere网站中的图片【问题讨论】：在您的问题中发布所有相关代码。【参考... 查看详情

如何在 vue3 中使用引导日期选择器

】如何在vue3中使用引导日期选择器【英文标题】：HowdoIusethebootstrapdatepickerinvue3【发布时间】：2022-01-1221:01:23【问题描述】：我正在使用vue3和bootstrap5。我想在我的应用程序中添加一个日期选择器。datepicker在bootstrap4中，但在我看... 查看详情

Angular 引导日期选择器如何显示“MM/dd/yyyy”和“MM/dd/yy”？

】Angular引导日期选择器如何显示“MM/dd/yyyy”和“MM/dd/yy”？【英文标题】：HowcanAngularbootstrapdatepickerdisplay"MM/dd/yyyy"and"MM/dd/yy"?【发布时间】：2021-07-1412:53:40【问题描述】：我在使用Angular引导程序日期选择器时遇到... 查看详情

如何使用 Angular 8 bootstrap datetimepicker 仅针对非活动标签隐藏日期时间选择器中的时间

】如何使用Angular8bootstrapdatetimepicker仅针对非活动标签隐藏日期时间选择器中的时间【英文标题】：HowtohidetimefromthedatetimepickeronlyforInactivelabelusingAngular8bootstarpdatetimepicker【发布时间】：2021-12-2220:26:00【问题描述】：在这个我使用... 查看详情