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. Mysql 为什么不建议在 MySQL 中使用 UTF-8？

    最近我遇到了一个bug,我试着通过Rails在以“utf8”编码的MariaDB中保存一个UTF-8字符串,然后出现了一个离奇的错误: Incorrect string value: ‘😃 &l ...

  2. learning java 访问文件和目录

    import java.io.File; import java.io.IOException; public class FileTest { public static void main(Str ...

  3. ELK实践

    一.ElasticSearch+FileBeat+Kibana搭建平台 在C# 里面运行程序,输出日志(xxx.log 文本文件)到FileBeat配置的路径下面. 平台搭建,参考之前的随笔. Fil ...

  4. C# 分割字符串 分隔符是字符串的情况

    string[] arr = System.Text.RegularExpressions.Regex.Split(str, "\r\n");

  5. GSS1 A - Can you answer these queries I

    //题意:询问一段区间的最大子序列的值. //做法:维护四个值:包含当前区间左端点的最大子区间LM,包含当前区间右端点的最大子区间RM.当前区间的最大子区间M, 当前区间的区间和S //tree[ro ...

  6. javascript 是实际上最容易被误解的语言

    不是立 Flag,而是摘录的 JSON 创始人的深切感受.如果你不同意,说明还理解的不够深入(kidding~)   “JavaScript is the world’s most misunders ...

  7. SpringCloud：Zipkin链路追踪，并将数据写入mysql

    1.zipkin server 1.1.新建Springboot项目,zinkin 1.2.添加依赖 <dependency> <groupId>io.zipkin.java& ...

  8. springboot项目获取resource下的文件

    package com.expr.exceldemo; import org.springframework.core.io.ClassPathResource; public class Test ...

  9. IIS错误代码500.21 ，Nhibernate更新报错，委托的使用。action传参数

    快速阅读 IIS错误代码500.21 ,Nhibernate更新报错,委托的使用.action传参数 IIS错误代码500.21 HTTP 错误 500.21 - Internal Server Er ...

  10. mitmproxy进行拦截

    import requests from selenium import webdriver from lxml import etree import time class DiffSpider: ...