2017-04-01 17:59:26 qq_37634366 阅读数 193

bootstrap日期插件默认星期显示为周日到周六,如图
这里写图片描述
不符合国人的习惯,星期显示格式为周一到周日,日期汉化可以实现此效果
汉化代码如下:

<script>$(document).ready(function() {
$('#reservation').daterangepicker(null, function(start, end, label) 
{ console.log(start.toISOString(), end.toISOString(), label); } 
);
$('#reservation').daterangepicker({
format: 'YYYY-MM-DD HH:mm:ss', //控件中from和to 显示的日期格式
locale: 
{ applyLabel: '确定', cancelLabel: '取消', fromLabel: '起始时间', toLabel: '结束时间', customRangeLabel: '自定义', daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'], monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], firstDay: 1 } 
});
});</script> 

汉化后如图
这里写图片描述

项目中遇到问题,以备查看

2017-09-04 14:29:48 dunegao 阅读数 1777
bootstrap日历插件的使用
1、插件引用
    <!-- bootstrap时间插件css -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-datetimepicker.min.css">
    <!-- bootstrap时间插件 -->
    <script type="text/javascript" src="../bootstrap/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
2、html代码
  <label>开始日期:</label><input id="startDate" class="form-control" size="16" type="text" placeholder="请输入开始日期" readonly class="form_datetime">
  <label>结束日期:</label><input id="endDate"  class="form-control" size="16" type="text" placeholder="请输入结束日期" readonly class="form_datetime"> 
3、js代码
    /**
     * 初始化日期插件
     */
    datePicker:function(){
        // 初始开始时间
        $('#startDate').datetimepicker({
            language : 'zh-CN',
            //startDate: new Date(),能被选择的开始时间
            endDate: new Date(),
            autoclose: true,     //选择完成后自动关闭
            todayBtn: true,        //显示今天按钮
            //weekStart: 1,        //周的开始时间默认0周日
            minView :2,      //时间选择视图【0:小时,1:天,2:月,3:年,4:十年】
            format : 'yyyy-mm-dd'
        });
        
        // 初始化结束时间
        $('#endDate').datetimepicker({
            language : 'zh-CN',
            endDate: new Date(),
            //startDate: new Date(),  
            autoclose: true,
            todayBtn: true,
            //weekStart: 1,
            minView :2,
            format : 'yyyy-mm-dd'
        });
        
        $('#startDate').unbind("change");
        $('#startDate').change(function() {
            $('#endDate').datetimepicker('setStartDate', $("#startDate").val());
        });
        $('#endDate').unbind("change");
        $('#endDate').change(function() {
            $('#startDate').datetimepicker('setEndDate', $("#endDate").val());
        });
    },


2019-04-09 12:55:46 qq_32550077 阅读数 1998


问题:在下图中可以看到左右箭头图标不显示
左右箭头不显示
查看bootstrap-datetimepicker.js源码可以看到图标的显示有这样定义

	this.language = options.language || this.element.data('date-language') || 'en';
    this.language = this.language in dates ? this.language : this.language.split('-')[0]; // fr-CA fallback to fr
    this.language = this.language in dates ? this.language : 'en';
    this.isRTL = dates[this.language].rtl || false;
    this.formatType = options.formatType || this.element.data('format-type') || 'standard';
    this.format = DPGlobal.parseFormat(options.format || this.element.data('date-format') || dates[this.language].format || DPGlobal.getDefaultFormat(this.formatType, 'input'), this.formatType);
    this.isInline = false;
    this.isVisible = false;
    this.isInput = this.element.is('input');
    this.fontAwesome = options.fontAwesome || this.element.data('font-awesome') || false;
    this.bootcssVer = options.bootcssVer || (this.isInput ? (this.element.is('.form-control') ? 3 : 2) : ( this.bootcssVer = this.element.is('.input-group') ? 3 : 2 ));
	this.icons = {
      leftArrow: this.fontAwesome ? 'fa-arrow-left' : (this.bootcssVer === 3 ? 'glyphicon-arrow-left' : 'icon-arrow-left'),
      rightArrow: this.fontAwesome ? 'fa-arrow-right' : (this.bootcssVer === 3 ? 'glyphicon-arrow-right' : 'icon-arrow-right')
    }

其中有这样一个属性定义

this.fontAwesome = options.fontAwesome || this.element.data('font-awesome') || false;

那么解决方法就有啦,既然插件只支持bootstrap3,2,那么我们直接使用fontAwesome 因为使用的是bootstrap4,我们直接引入Font Awesome,在option中这样添加就ok啦

$('.form_date').datetimepicker({
            fontAwesome:'font-awesome',//指定
            language:  'zh-CN',//语言
            format: 'yyyy-mm-dd'//日期格式化
        });

效果

在这里插入图片描述

2013-05-04 15:41:46 lengyue1084 阅读数 3805

下载地址:https://github.com/Aymkdn/Datepicker-for-Bootstrap 

script type="text/javascript" src="static/js/bootstrap-datepicker.js"></script>

 <div class="submenu" >
<form class="padding" method="POST" action="<?=BASE?>store/timesearch/">
<input   type="text" name="pname" list="" placeholder="类型如:上衣、裤子" value="" autocomplete="off" />
&nbsp;
日期  <input type="date" name="date1" class="datepicker" class="input-medium" placeholder="请输入搜索时间" value=""/>
-
<input type="date" name="date2" class="datepicker" class="input-medium" placeholder="请输入搜索时间"value="" /> <input type="submit" value="搜索" class="btn btn-primary"/>  
&nbsp;
 </form>
</div>

script>
    $(document).ready(function(){
       $('.datepicker').datepicker();
});
</script>


注:

You can also call datepicker() with "destroy" to remove the Datepicker from an element

$('#id-element').datepicker("destroy"); // --> no more calendar when clicking on the element




 
2017-07-04 10:38:33 FarmerXiaoYi 阅读数 10540

     bootstrap日期控件构建非常丰富,可根据调用dateTimepicker()方法的参数设置可选语言,可选日期时间范围,起始时间,结束时间,视图显示格式等等。那么具体怎么用呢?

下面我来介绍下:

1、首先引入所需要的依赖,直接上代码:

<head>
   <meta charset="UTF-8">
   <title>Bootstrap.dataTimepicker</title>
   <link rel="stylesheet" href="../res/bootstrap.min.css">
   <link rel="stylesheet" href="../res/bootstrap-datetimepicker.min.css">
   <script src="../res/jquery-3.2.1.js"></script>
   <script src="../res/bootstrap.js"></script>
   <script src="../res/bootstrap-datetimepicker.js"></script>
   <script src="../res/bootstrap-datetimepicker.zh-CN.js"></script>
</head>

当然了,要引入相应的依赖,还得去下载所依赖bootstrap的文件,下载这里就不介绍了。bootstrap-datetimepicker.zh-CN.js 这个文件是为了要显示中文,默认是英文的,你也可以选择其它国家的语言。在这个文件夹下的文件是各个国家的语文包,bootstrap实现了国际化。



2.HTML代码,HTML代码可根据需要,有多种选择,可使用带有重置按钮(用于清空输入框)的组件模版式:

<body>
   <div class="input-append date" id="datetimepicker">
      <input class="span2" size="16" type="text" value="12-02-2012">
      <span class="add-on"><i class="icon-remove"></i></span>
      <span class="add-on"><i class="icon-th"></i></span>
   </div>                                                                           <body>
或者只要个input输入框也行,这样更简洁

<body>
  <input id="date">
</body>

接下来就是启用控件了,直接调用API接口:

<script>
    $("#date").datetimepicker();
</script>

就是这样,这样就可以在网页中点击 input 弹出选择面板了.同时这个方法还可以设置许多参数,就是用来控制显示语言,日期时间范围等等的。

<script>
    $("#date").datetimepicker({
       format: "yyyy-mm-dd",
       autoclose: true,
       todayBtn: true,
       todayHighlight: true,
       showMeridian: true,
       pickerPosition: "bottom-left",
       language: 'zh-CN',//中文,需要引用zh-CN.js        startView: 2,//月视图
        minView: 2//日期时间选择器所能够提供的最精确的时间选择视图
    });
</script>

比如设置语言,就是language这个参数,值默认en,英文,zh-CN就是中文,需要其它语言就引入相应的语言包,同时设置language参数的值即可。

还比如startView,设置弹出框的初始显示视图,就是当你点击输入框,一弹出日期选择器时显示的界面,是显示分钟,还是小时,还是月日年,值有5个,分别是0、1、2、3、4,对应分、时、日、月、年

还比如minView,这个是非常实用的一个需求,控制日期可选择到什么范围,是选到月份,还是选到日,还是选到时、或分,值也是5个,0~4 分别对应分、时、日、月、年。

简单的使用就介绍到这..........






没有更多推荐了,返回首页