Bootstrap DatetimePicker 选择器问题

2024-01-10

我在用eonasdan 的 bootstrap 3 日期时间选择器 http://eonasdan.github.io/bootstrap-datetimepicker/。我只是想知道是否可以使用输入字段以及日历字形打开选择器。

我知道如何使用输入字段或字形图标打开它,但不能同时使用两者。

HTML 如下:

<div class='input-group date'>
      <input type='text' class="form-control" id='datetimepicker1'>
      <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar"></span>
      </span>
</div>

<script type="text/javascript">
    $('#datetimepicker1').datetimepicker({
      format: 'ddd D MMMM, YYYY'
    });
</script>     

有一个功能allowInputToggle单击图标和输入即可打开日期选择器,您可以找到它here http://eonasdan.github.io/bootstrap-datetimepicker/Functions/#allowinputtoggle

$(document).ready(function(){
    $('#datetimepicker1').datetimepicker({
        format: 'ddd D MMMM, YYYY',
        allowInputToggle: true
    });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<br><br><br>
<div class='col-sm-6'>
	<div class="form-group">
		<div class='input-group date' id='datetimepicker1'>
			<input type='text' class="form-control" />
			<span class="input-group-addon">
				<span class="glyphicon glyphicon-calendar"></span>
			</span>
		</div>
	</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Bootstrap DatetimePicker 选择器问题 的相关文章

  • 如何将 twitter bootstrap 与 Spring MVC 一起使用

    我不明白为什么我的 Spring MVC 页面没有隐藏引导样式 我的你好 jsp
  • 调整 Twitter-Bootstrap 中按钮的大小

    我正在开发一个适合移动设备的网络应用程序 我希望它有一个非常简单的用户界面 包括大到连巨人安德烈都可以轻松点击的按钮 问题是 我没有看到通过将引导按钮的宽度或高度设置为百分比 像素数或简单地让它们填充其容器来显式调整引导按钮大小的简单方法
  • 切换到 twitter bootstrap 的优点/缺点 [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • JQuery 使用 Bootstrap 4 验证表单输入并突出显示标签[重复]

    这个问题在这里已经有答案了 我已读过 我已读过带有 jQ uery 验证插件的 Bootstrap https stackoverflow com questions 18754020 bootstrap with jquery valid
  • 如何使用 jQuery AJAX 和 JSON 通过 Bootbox 确认表单提交

    我正在使用一个网络应用程序工作Spring MVC 我试图在提交表单之前显示一个确认对话框Bootbox 但我收到 500 内部服务器错误 这是我的表格
  • 设置发送到控制器的 Kendo DateTimePicker 日期的格式

    我在我的应用程序中使用 Kendo DateTimePicker 我在应用程序中从中获得的价值是 Wed Aug 13 2014 00 00 00 GMT 0200 Romance Daylight Time 我无法将其解析为日期时间 我收
  • Morris.js 图表在引导选项卡内无法工作

    我遇到一种情况 我尝试在两个不同的内部使用 MorrisJS 图表引导选项卡 http getbootstrap com javascript tabs 图表在第一个 默认 选项卡中加载良好 但当我单击第二个选项卡时 图表根本无法正确加载
  • 如何更改 bootstrap 版本 4 按钮颜色

    我可以通过更改 bootstrap v4 中的主题颜色来更改主按钮颜色 但它也会影响所有其他组件 如何设置主按钮颜色而不影响主题颜色 我不想设置品牌为主并实现它 还有其他选择吗 Bootstrap 4 1 2019 年更新 现在 Boots
  • 当子项位置固定时从 Bootstrap 容器继承宽度

    我试图让 header div 从其父级继承其宽度 标题 div 是position fixed 父级包含在引导容器内 但是 正如您在我创建的代码中看到的 它没有正确继承其父级的宽度 它从某处添加了一些额外的宽度 这一切都非常烦人 知道如何
  • 使用 jQuery 实时更新文本

    我最近一直在用 jQuery 做一个项目 但遇到了一个问题 基本思想是创建一些 JS 代码 以便当您在选项卡上的文本框中输入内容时 div 内的文本会随着您的键入而更改 并且当您移动到新选项卡时 它会更改为文本框中的文本那里 这很难解释 所
  • Flexbox 中的 Bootstrap 列无法在较小的屏幕上换行

    我的网站有一个部分 我在 2 个 div 上使用下面的 CSS 其中一个a标签以使内容在中心垂直对齐 问题是 使用 Flex 样式属性时 理想情况下 当窗口 col md 4会一个一个地堆叠起来 这并没有发生 相反 列变得非常瘦并且仍然并排
  • 如何使用 Bootstrap 选项卡?

    我试图了解如何做到这一点 http getbootstrap com javascript tabs http getbootstrap com javascript tabs 我认为文档不够详细 因为我无法理解它是如何工作的 div cl
  • 我应该如何使用 Bootstrap 设计 Django 验证错误的样式?

    当 Django 中的表单出现验证错误时 错误会在包含类的列表中给出errorlist 可以通过设置使用 Bootstrap 为元素指定错误样式class alert alert error 结合这些并使用 Bootstrap 的错误样式来
  • VB.NET DatetimePicker - 错误的周数

    我的 vb net 扩展日期时间选择器有问题 当元素传递到新年 2016 时 左侧显示的周数是错误的 我有一个 datetimepicker 它不是默认组件 它是在此处下载的 http www codeproject com Article
  • Bootstrap - 表单内联元素之间的间距

    在 Bootstrap 3 中 内联表单 http getbootstrap com css forms inline http getbootstrap com css forms inline 我似乎找不到间距的原因 form grou
  • Bootstrap 手风琴菜单不起作用

    我设计了一个如图所示的手风琴菜单 如果单击菜单 打开的菜单将关闭 这就是手风琴的功能 但在这个设计中 我逐个单击菜单 但前一个没有关闭 如何解决这个问题 提前致谢 jQuery document ready function var acc
  • 使用 bootstrap 将搜索图标放入文本框中

    我默认使用引导程序 文本框占据列的全宽 我想将搜索图标放在文本框的末尾 我的代码是这样的 div class container div class row div class form group col lg 4 div div div
  • Twitter Bootstrap 中下拉链接的模态

    我正在尝试从下拉菜单中的链接进行模式启动 该模式似乎已启动 网站变为灰色 但看不到 来自不在下拉列表中的常规链接的模态工作得很好 我对 jquery 进行了愚弄 但由于我是 jquery 的新手 所以没有任何结果 这是我的网站代码
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 仅当显式选择行时才关闭 ui-bootstrap typeahead

    我创建了这个jsBin http jsbin com livuqafe 2 edit来证明我遇到的问题 如果您转到此处 请尝试输入 五 并继续 你的自然反应是输入 五 然后按 Tab 如果你想要 五百 你可以向下箭头一次 但是 在这种情况下

随机推荐