bootstrap-datetimepicker使用

57 篇文章 0 订阅
18 篇文章 1 订阅

使用的node.js开发,在其中使用了这个bootstrap-datetimepicker日期控件
包的下载方法1:
我是在本地下载了这个项目,然后把它放到静态文件中的,文档地址:
https://www.bootcss.com/p/bootstrap-datetimepicker/#project,直接下载zip的包
然后解压
解压后的文件
包的下载方法2:
也可以直接新建个文件夹,克隆这个项目,然后继续往下走

git clone git://github.com/smalot/bootstrap-datetimepicker.git

随后把我所需用的文件放到我的文件夹中
三个文件
还需要css的样式文件
css文件

分别放js和css文件

可能是我之前下载的控件不一样,需要依赖moment.js,
然后,在使用这个控件前需要下载moment.js

npm install moment.js --save

不过我现在的文件中是没有用到这个js的,所以这个步骤可以省略
随后,就可以在文件中引入了,但是一定要注意引入文件的顺序

<head>
  <meta charset="UTF-8">
  <title>test</title>
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">  
  <link rel="stylesheet" href="./css/bootstrap-datetimepicker.min.css">
  
  <script>let $ = window.$ = window.jQuery = require('jquery');</script>
  <script>
    require('../node_modules/bootstrap/dist/js/bootstrap.min.js');
  </script>
  <!-- <script src="../node_modules/moment/moment.js"></script> -->
  <script src="./js/bootstrap-datetimepicker.min.js"></script>
  <script src="./js/bootstrap-datetimepicker.zh-CN.js"></script>
</head>

这些文件在压缩包中都有,直接拷贝引入即可,最后这个文件zh-CN.js是在C:\bootstrap-datetimepicker-master\bootstrap-datetimepicker-master\js\locales文件夹中
然后写html

<div class="row">
              <div class='col-sm-6 col-md-5'>
                <div class="form-group">
                  <label for="startTime">生效时间</label>
                  <div class='input-group date' id='startTime'>
                    <input type='text' class="form-control" readonly="readonly" />
                    <span class="input-group-addon">
                      <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                  </div>
                </div>
              </div>
            
              <div class='col-sm-6 col-md-5 col-md-offset-1'>
                <div class="form-group">
                  <label for="endTime">失效时间</label>
                  <div class='input-group date' id='endTime'>
                    <input type='text' class="form-control" readonly="readonly" />
                    <span class="input-group-addon">
                      <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                  </div>
                </div>
              </div>
            </div>

js:

$('#startTime').datetimepicker({
    format: 'yyyy-mm-dd hh:ii:ss',
    weekStart: 1,
    language: 'zh-CN',
    minView: 'hour',
    autoclose: true,
    todayHighlight: 1,
    todayBtn: true,
    forceParse:true,
    clearBtn: true,
    pickerPosition:'bottom-left',
}).on("changeDate", function(ev) {
    if (ev.date) {
        $('#endTime').datetimepicker('setStartDate', new Date(ev.date.valueOf()))
      
    } else {
        $('#endTime').datetimepicker('setStartDate', );
    }
});

$('#endTime').datetimepicker({
    format: 'yyyy-mm-dd hh:ii:ss',
    weekStart: 1,
    language: 'zh-CN',
    minView: 'hour',
    autoclose: true,
    todayHighlight: 1,
    forceParse:true,
    pickerPosition:'bottom-left',
    clearBtn: true,
}).on("changeDate", function(ev) {
    if (ev.date) {
        $('#startTime').datetimepicker('setEndDate', new Date(ev.date.valueOf()))
      } else {
        $('#startTime').datetimepicker('setEndDate', new Date());
    }
});

效果:
时间控件
点击失效时间
失效时间
可以选择日期,时间,到秒,然后可以清空clear

位置有点丑,还需要研究下,不过开心的是,他终于可以成功运行了

参考网址:下面的链接中前两个对我作用最大
https://www.bootcss.com/p/bootstrap-datetimepicker/ 官方文档指南
https://blog.csdn.net/farmerxiaoyi/article/details/74295470 之前一直中文实现不了,参考这个文档就出来了
https://blog.csdn.net/qq_33368846/article/details/82223676
https://blog.csdn.net/u011127019/article/details/51725081
https://blog.csdn.net/hurtheart517/article/details/51474324

增加一条,在代码执行完,需要清空控件,可以直接这么写:
https://blog.csdn.net/rendeyishi/article/details/78125796,参考

$('#startTime').find("input").val("");
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
### 回答1: bootstrap-datetimepicker是一个可定制的日期选择器插件,可以帮助我们在网页中添加日期选择功能。它使用Bootstrap风格的样式,并提供了丰富的选项和配置来满足不同的需求。 通过bootstrap-datetimepicker,我们可以轻松地自定义日期样式。首先,我们可以选择不同的主题来改变整体的样式,例如light主题和dark主题。其次,我们可以设置日期选择框的大小和位置,以适应不同的布局。还可以设置日期的格式,包括年月日、时分秒等不同精度。此外,我们还可以设置各个部分的颜色和字体样式,以满足个性化的需求。 除了基本的样式设置外,bootstrap-datetimepicker还提供了其他一些高级功能来增强用户体验。例如,我们可以设置日期范围限制,禁止选择过去的日期或将来的日期。还可以设置起始日期和结束日期,限制用户只能在指定的时间段选择日期。此外,我们可以使用快速选择按钮,让用户可以一键选择最近几天、最近几个月或最近几年的日期。 总之,bootstrap-datetimepicker通过提供丰富的选项和配置,可以帮助我们设计出符合我们需求的日期样式。无论是简单的日期选择功能还是复杂的日期范围限制,bootstrap-datetimepicker都能满足我们的需求,并且具有良好的用户体验。 ### 回答2: bootstrap-datetimepicker是一个基于Bootstrap框架的日期选择器插件。它提供了丰富的日期样式供用户选择。 首先,bootstrap-datetimepicker支持多种日期格式。你可以通过配置选项来指定日期的显示格式,例如:"yyyy-mm-dd"表示日期以年-月-日的形式显示,"dd/mm/yyyy"则表示日期以日/月/年的形式显示。 其次,该插件还支持时间的选择。你可以选择是否显示时间,以及时间的显示格式。比如,你可以使用"hh:ii"来显示小时和分钟,或者使用"hh:ii:ss"来显示小时、分钟和秒。 此外,bootstrap-datetimepicker还具有一些其他的日期样式设置。其中包括: 1. 可以设置日期的起始和结束范围,限定用户只能选择某个范围内的日期。 2. 可以设置日期的禁用状态,禁止用户选择某些特定日期。 3. 可以设置日期的选择模式,包括单个日期选择、多个日期选择以及范围选择等。 最后,bootstrap-datetimepicker还提供了丰富的自定义选项,你可以根据自己的需求来定义日期的样式。比如,你可以修改日期选择器的主题颜色、字体样式、边框样式等。 总的来说,bootstrap-datetimepicker提供了许多灵活的日期样式设置,可以满足不同用户的需求,使日期选择更加方便、美观。 ### 回答3: bootstrap-datetimepicker是一个基于Bootstrap框架的日期选择插件,可以方便地在网页中添加日期选择功能。 在使用bootstrap-datetimepicker时,可以通过设置不同的样式来定制日期选择器的外观。以下是一些常用的日期样式说明: 1. 格式:可以通过设置format属性来定义日期的显示格式。例如,format: 'yyyy-mm-dd'将日期以年-月-日的形式显示。 2. 语言:可以通过设置language属性来指定日期选择器的语言。例如,language: 'zh-CN'将日期选择器的语言设置为简体中文。 3. 星期显示:可以通过设置weekStart属性来定义星期的起始日。例如,weekStart: 1将星期的起始日设置为周一。 4. 默认日期:可以通过设置initialDate属性来指定日期选择器的默认日期。例如,initialDate: '2022-01-01'将默认日期设置为2022年1月1日。 5. 最小日期和最大日期:可以通过设置minDate和maxDate属性来限制可选择的日期范围。例如,minDate: '2022-01-01'和maxDate: '2022-12-31'将日期范围限制在2022年内。 6. 显示周数:可以通过设置calendarWeeks属性来决定是否显示周数。例如,calendarWeeks: true将显示每周的周数。 以上仅为一些常用的日期样式设置,bootstrap-datetimepicker还有许多其他样式设置参数,通过灵活使用这些参数,可以根据需要定制出符合自己网页风格的日期选择器。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值