好用的bootstrap中的时间插件-bootstrap-datepicker

bootstrap-datepicker是bootstrap中一款好用的时间插件,支持中文,支持时间段的选择,支持时间格式配置,在线示例中用法提供友好。

点击页面上的配置,右下角的代码同步更新。

1.下载bootstrap-datepicker中放在bootstrap文件夹。

在页面进行css引用

 <link rel="stylesheet" href="bootstrap-datepicker-1.9.0-dist/css/bootstrap-datepicker.min.css">

在页面进行js引用,放在jquery和bootstrap的js后面

  <script src="bootstrap-datepicker-1.9.0-dist/js/bootstrap-datepicker.min.js"></script>
  <script src="bootstrap-datepicker-1.9.0-dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>

2.在页面添加input元素

<div id="sandbox-container">
    <input type="text" class="form-control">
</div>

3.在页面添加js代码

    $('#sandbox-container input').datepicker({
    language: "zh-CN",//配置中文
    autoclose: true,//自动关闭
    format: "yyyy-mm-dd"//日期显示格式
});

最终效果

原文地址:https://www.cnblogs.com/ihappycat/p/11789238.html

时间: 2024-10-11 22:17:01

好用的bootstrap中的时间插件-bootstrap-datepicker的相关文章

Java中bootstrap-datetimepicker时间插件的使用

1.引入时间插件所需要的js和css <script type="text/javascript" src="<%=path %>/static/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script> <script type="text/javascript" src="<%=path %>/s

使用bootstrap中的toolTip插件时 最上方提示会被遮挡问题

Bootstrap 里的 popover 被挡住的解决方案 在Bootstarp 中我们可以使用 popover 插件做一些内容的展示, 代码如下: <a data-toggle="popover" data-placement="top" data-trigger="hover" data-content="详情详情详情"> <span>显示详情</span> </a> 这样子

Bootstrap中的Affix插件

我们为什么要用bootstrap?因为懒!哦....不,是因为方便,呃...意思差不多. 今天来说说Affix这个插件,它可以使导航栏固定,免去了自己手写的麻烦,用着非常方便,废话不多说,下面是用法. Affix用法: 通过 data 属性:如需向元素添加附加导航(Affix)行为,只需要向需要监听的元素添加 data-spy="affix" 即可.请使用偏移来定义何时切换元素的锁定和移动. <div data-spy="affix" data-offset-

yii2框架中引用bootstrap中的日期插件yii2-date-picker

最近在学习yii2 框架,发现框架很强大,而且结合了时下许多新的技术在里面. 简单记录一下yii2-date-picker插件的使用方法: 首先先了解一下github中的相关资源:https://github.com/2amigos/yii2-date-picker-widget 其次:在自己的项目中利用上面链接中的相关方法下载此资源,命令为: php composer.phar require "2amigos/yii2-date-picker-widget" "*&quo

Bootstrap中的datetimepicker插件用法总结(转载)

datetimepicker用法总结   目录 datetimepicker用法总结 目录 简述 官方文档 选项属性 1 format 格式 2 weekStart 一周从哪一天开始 3 startDate 开始时间 4 endDate 结束时间 5 daysOfWeekDisabled 一周的周几不能选 6 autoclose 选完时间后是否自动关闭 7 startView 选完时间首先显示的视图 8 minView 最精确的时间 9 maxView 最高能展示的时间 10 todayBtn

elementui 中 日期时间插件 结束时间大于开始时间

界面代码: <el-col :span="8"> <el-form-item label="开始日期" class="form-row-space"> <el-date-picker :picker-options="pickerOptionsStart" v-model="editDeviceGroup.start_date" type="date" pl

Bootstrap 中 模态框插件(十)(持续更新中。。。)

模态框的弹窗组件需要三层 div 容器元素(一般用于登录和注册) .modal     //  模态声明层 .modal-dialog     //  窗口声明层 .modal-content     //  内容层 .modal-header     //  内容头部层 .modal-body     //  内容主体层 .modal-footer     //  内容注脚层 .modal-title     //  内容标题,去掉边距 .show     //  表示显示,默认是隐藏

daterangepicker 时间插件

在工作中学习到的一种插件 上网查询之后发现 在bootstrap中的时间选择器有两种:dateTimePicker和dateRangePicker HTML <div id="reportrange" class="btn default" style="font-size:12px;">     <i class="fa fa-calendar"></i>      <span>

玩转Bootstrap(基础) -- (8.Bootstrap支持的JavaScript插件)

1.导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中.因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有Java