现在网上基本都是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. charles-mock数据的方法(有空自己写一个)

    https://www.jianshu.com/p/75d24f264ce2 这个也可以参考下 https://www.cnblogs.com/kaibindirver/p/9104996.html ...

  2. Canal——写入到ES中数据错乱

    问题描述 使用canal-adapter写入elasticSearch数据时,数据是写入了elasticSearch了,但出现了mysql表中的数据和elasticSearch中索引中的数据错乱的问题 ...

  3. keytool命令的使用

    ## 打印所有证书指纹.如果是cacerts,则指本机安装的jdk的key store:如果是一个jks文件,则是其他key store keytool -list -keystore <cac ...

  4. FFMPEG 常用命令行

    目录 1. 分离音视频 2. 解复用 3. 视频转码 4. 视频封装 5. 视频剪切 6. 视频录制 7.叠加水印 8.将MP3转换为PCM数据 9. 推送RTP流.接收RTP流并存为ts文件 10. ...

  5. 360安全卫士11.0史上最小版发布，去流氓，最精简，300MB内存轻松运行。完全不拖慢电脑的速度，由王宁诚意发布。

    360安全卫士11.0史上最小版发布,也是史上最快版本.大家可能都不喜欢360,为什么?因为360太流氓,而大家想过如果360去掉了流氓会怎么样?对,那样360就会变成一个性能可以超过知名杀毒软件-s ...

  6. npm run build报错 No PostCSS Config found in

    在项目根目录新建postcss.config.js文件,并对postcss进行配置: module.exports = { plugins: [ require('autoprefixer')//自动 ...

  7. spring中@Conditional注解

    @Conditional是Spring4新提供的注解,它的作用是根据某个条件加载特定的bean. 我们需要创建实现类来实现Condition接口,这是Condition的源码 public inter ...

  8. MongoDB的可视化工具（Studio 3T）的安装

    通过可视化工具,我们可以不用在命令行操作MongoDB了,可以直接使用类似于SQLyog的软件进行相关操作 1.下载地址(二者择其一即可),可使用迅雷来进行下载,否则下载速度极其慢 2018.4.6版 ...

  9. 输出重定向之python2和python3的区别

    python语句支持输出重定向到文件里,与shell类似使用“>>”来重定向输出. python2: logfile = open('mylog.txt', 'a') print > ...

  10. fcntl和flock两个系统调用的区别

    总的来说,flock函数只能锁定整个文件,无法锁定文件的某一区域.而fcntl可以利用struct flock结构体,来实现文件里部分区域锁定的操作. 附:fcntl(文件描述词操作) 相关函数 op ...