https://blog.csdn.net/qq_33368846/article/details/82223676

Bootstrap datetimepicker控件的使用

1.支持日期选择，格式设定

2.支持时间选择

3.支持时间段选择控制

4.支持中文

涉及的样式及js:

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>datetimpicker测试</title>

    <!--图标样式-->

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment-with-locales.js"></script>
   <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

</head>

<body>

<div class="row">

<div class='col-sm-6'>

        <div class="form-group">

            <label>选择日期：</label>

            <!--指定 date标记-->

            <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>

    <div class='col-sm-6'>

        <div class="form-group">

            <label>选择日期+时间：</label>

            <!--指定 date标记-->

            <div class='input-group date' id='datetimepicker2'>

                <input type='text' class="form-control" />

                <span class="input-group-addon">

                    <span class="glyphicon glyphicon-calendar"></span>

                </span>

            </div>

        </div>

    </div>

</div>

<script type="text/javascript">

$(function () {

    $('#datetimepicker1').datetimepicker({

        format: 'YYYY-MM-DD',

        locale: moment.locale('zh-cn')

    });

    $('#datetimepicker2').datetimepicker({

        format: 'YYYY-MM-DD hh:mm',

        locale: moment.locale('zh-cn')

    });

});

</script>

</html>

bootstrap：时间日期日历控件（datetimepicker）的更多相关文章

  1. bootstrap中使用日历控件

    在bootstrap中使用日历控件可以参照以下资料: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 以下是参照此资料自己做的一 ...

  2. asp.net中的时间日期选择控件

    asp.net中的时间日期选择控件 Posted on 2008-07-17 17:37 飛雪飄寒 阅读(22922) 评论(6) 编辑 收藏     在系统中经常需要进行时间日期选择(比如查询时间范 ...

  3. bootstrap-datetimepicker：基于twitter bootstrap的日期/时间选择控件

    bootstrap-datetimepicker是一个基于twitter bootstrap的简单日期/时间选择控件. <!DOCTYPE HTML> <html> <h ...

  4. 日历控件datetimepicker（IE11）

    1.安装 smalot.bootstrap-datetimepicker 2.引用 bootstrap.css bootstrap-datetimepicker.min.css jquery-1.10 ...

  5. Android超炫日期日历控件：TimesSquare

    先看效果图: 使用说明: 在布局文件里: <com.squareup.timessquare.CalendarPickerView android:id="@+id/calendar_ ...

  6. js非常强大的日历控件fullcalendar.js, 日期时间库: moment.js

    日历控件: https://fullcalendar.io/docs/ https://fullcalendar.io/docs/event_data/events_function/ https:/ ...

  7. 简洁JS 日历控件 支持日期和月份选择

    原文出处 以下这个JS日历控件是我的闲暇之余自己编写的,所有的代码全部在IE7/IE8/Firefox下面测试通过, 而且可以解决被iframe层遮盖的问题.现在只提供两种风格(简洁版和古典版)和两种 ...

  8. Flex自定义组件开发之日周月日期选择日历控件

    原文:Flex自定义组件开发之日周月日期选择日历控件         使用过DateField的我们都知道,DateField 控件是用于显示日期的文本字段,字段右侧带有日历图标.当用户在控件边框内的 ...

  9. bootstrap日历控件

    bootstrap的日历控件: <link href="~/bootstrap/css/bootstrap.min.css" rel="stylesheet&quo ...

随机推荐

  1. Notepad++ 编译运行java,c,c++

    1.Java NPP_SAVE cd $(CURRENT_DIRECTORY) D:\tibco\bw6\tibcojre64\1.8.0\bin\javac.exe "$(FILE_NAM ...

  2. learning java AWT 右键菜单

    import java.awt.*; import java.awt.event.*; public class SimpleMenu { private Frame f = new Frame(&q ...

  3. 【EF】Entity Framework使用

    一.EF框架之三种模式 Entity Framework是ORMapping的一种具体实现,那ORMapping又是什么呢? ORM--ObjectRelation Mapping,即对象关系映射框架 ...

  4. （1）前端框架uni-app

    前端框架uni-app 可编译到iOS.Android.H5.小程序等多个平台 一套代码编到7个平台 uni-app在跨端数量.扩展能力.性能体验.周边生态.学习成本.开发成本等6大关键指标上拥有极强 ...

  5. (6)Go函数和函数式编程

    一.Go函数 函数是组织好的.可重复使用的.用于执行指定任务的代码块.本文介绍了Go语言中函数的相关内容. Go语言中支持函数.匿名函数和闭包,并且函数在Go语言中属于"一等公民" ...

  6. content="IE=Edge"是什么意思?

    永远以最新的IE版本模式来显示网页 <meta http-equiv="X-UA-Compatible" content="IE=7">#以上代码告 ...

  7. SpringMVC之请求部分

    1.接收请求之限定请求类型 只接受Post请求 @RequestMapping(value="",method=RequestMethod.POST) 只接受get请求 @Requ ...

  8. select和C标签

    <select name="cpcyModel.rwzj" id="cpcyModel_rwzj"> <option value=" ...

  9. addEventListener与attachEvent区别

    DOM2级事件处理程序 DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作: addEventListener removeEventListener 所有的DOM节点都包含这两个方法, ...

  10. Spring boot POST 提交错误 Request header is too large

    解决方法 application.yml server: # 单位 KB max-http-header-size: 100000 java.lang.IllegalArgumentException ...