现在网上基本都是v3的时间选择插件,花了点时间改了找了个v4能用的 bootstrap-datepicker

<!DOCTYPE html>

<html>

<head>

    <title>datepicker</title>

    <link href="css/bootstrap.min.css" rel="stylesheet" />

    <script src="js/jquery-3.4.1.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

    <!--datepicker样式-->

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

    <script src="js/bootstrap-datepicker.min.js"></script>

    <!--中文语言包扩展-->

    <script src="js/bootstrap-datepicker.zh-CN.js"></script>

</head>

<body>

    <div class="container">

        <div class="row" style="padding-top: 100px">

            <div class="col">

                <input data-date-format="yyyy/mm/dd" id="datepicker">

            </div>

        </div>

    </div>

    <script>

        $('#datepicker').datepicker({

            weekStart: 1,

            daysOfWeekHighlighted: "6,0",

            autoclose: true,

            todayHighlight: true,

            language: "zh-CN"

        });

        $('#datepicker').datepicker("setDate", new Date());

    </script>

</body>

</html>

默认是语言是en,就直接看看原始js是$.fn.datetimepicker.dates控制的显示,自己添加了一个bootstrap-datepicker.zh-CN.js

bootstrap-datepicker的默认设置是$.fn.datepicker.defaults

bootstrap-datepicker文件下载

bootsctrap4 datepicker时间选择插件的更多相关文章

  1. AngularJS进阶(二十二)实现时间选择插件

    JS实现时间选择插件 引导语 在项目开发过程中,需要实现根据以日期为筛选条件之一,故需要实现时间选择插件.对于未接触的新事物,自己总是感觉不明觉厉.其实,有些实现可以使用很简单的方法即可.以此为例,偶 ...

  2. 使用datepicker日期插件

    使用datepicker日期插件 在引入<jquery.js> <bootstrap.js><datepicker.js>之后 引用<bootstrap.cs ...

  3. [转]jQueryUI中Datepicker(日历)插件的介绍和使用

    http://jqueryui.com/datepicker/ 本文转自:http://blog.csdn.net/redarmy_chen/article/details/7400571 jQuer ...

  4. ios风格的时间选择插件

    1.起因 在上个项目中,客户希望时间选择插件可以是ios风格的那种,但是找了很久,发现并没有用vue的ios风格时间插件,于是自己便自己造了一个轮子. 2.插件效果 3.插件依赖以及安装使用 插件依赖 ...

  5. 手机时间选择插件 Jquery

    // 时间选择 var currYear = (new Date()).getFullYear() var opt_data = { preset: 'date', //日期 theme: 'andr ...

  6. Jquery datepicker 时间插件使用 js 时间相加,相减

    $(document).ready(function(){ //输入框事件 $('#probation').bind('input propertychange', function() { var ...

  7. 常见问题：bootstrap datepicker日期插件汉化

    引入简体中文js(bootstrap-datepicker.zh-CN.js),并在datepicker属性配置language为‘zh-CN’即可,示例如下: $(".form_datet ...

  8. jQueryUI中Datepicker(日历)插件使用

    atepicker插件的属性: 属性 数据类型 默认值 说明 altField string "" 使用备用的输出字段,即将选择的日期 以另一种格式,输出到另一个控件中, 值为选择 ...

  9. jqueryUI之datepicker日历插件的介绍和使用

    jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件.我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.

随机推荐

  1. 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_15.RabbitMQ研究-与springboot整合-声明交换机和队列

    复制topic的代码 把常量都设置成public方便其他的类引用 ExchangeBuilder里面有4个方法分别对应四个交换机. 声明Email和短信的队列 队列绑定交换机 所以需要把Bean注入到 ...

  2. uni-app 时间格式问题 new Date(str) IOS系统跟Android系统不兼容

    今天做了一个需求,要在列表中把后台返回来的时间给显示出来,使用 new Date(str)  在微信开发者工具上显示是没有问题的,然后在IOS系统上显示是NAN. 原因是 IOS系统只识别 " ...

  3. .net断点续传

    IE的自带下载功能中没有断点续传功能,要实现断点续传功能,需要用到HTTP协议中鲜为人知的几个响应头和请求头. 一. 两个必要响应头Accept-Ranges.ETag 客户端每次提交下载请求时,服务 ...

  4. json转换成dart类 JSON to Dart

    json_to_dart的使用 如果我们得到一个特别复杂的JSON,有时候会无从下手开始写Model,这时候就可以使用一些辅助工具.我认为json_to_dart是比较好用的一个.它可以直接把json ...

  5. MongoDB可视化工具Studio 3T的使用

    原文地址:https://blog.csdn.net/weixin_39999535/article/details/81383196 studio3T 永久使用方法 新建文件studio3t.bat ...

  6. 【计算机视觉】深度相机（五）--Kinect v2.0

    原文:http://blog.csdn.NET/qq1175421841/article/details/50412994 ----微软Build2012大会:Kinect for Windows P ...

  7. python初学第一节课

    ### python的基础 推荐学习python的一些资料, 首先就是书籍<Python从入门到实践>, 这本书评分很高, 主要是对Python讲解的比较清楚, 后面还有具体的实战项目 推 ...

  8. find the mincost route【无向图最小环】

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1599 Problem Description 杭州有N个景区,景区之间有一些双向的路来连接,现在860 ...

  9. [bzoj3060][Poi2012]Tour de Byteotia_并查集

    [Poi2012]Tour de Byteotia 题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=3060 题解: 这类题有一个套路,就是 ...

  10. POJ 1177 矩形周长并　模板

    Picture 题目链接 http://poj.org/problem?id=1177 Description A number of rectangular posters, photographs ...