bootstrap-datepicker

Bootstrap-datepicker 提供了一个拥有Bootstrap样式的弹性Datepicker控件

Requirements/使用要求

这两个版本是经过测试的,其他版本风险自负。

Dependencies/依赖

某些样式需要 bootstrap的dropdown组件 (dropdowns.less), 箭头需要bootstrap的sprites (sprites.less 和相关图片) .

通过lessc编译器运行 build/build_standalone.less文件可以生成一个独立的.css文件(包含必要的dropdown样式和备选的基于文字的箭头样式) //译者注:也就是其他可选的font图标箭头

$ lessc build/build_standalone.less datepicker.css

Usage/用法

通过JS调用:

$('.datepicker').datepicker();

Data API/ 数据API

因为有bootstrap自己的插件存在,所以Datepicker控件可以做到不需要你自己写javascript就可以被实例化. 在真正的bootstrap方式下,对于大部分datepicker来说, 在你想要初始化的元素上简单的设置 data-provide="datepicker" , 他就会懒初始化. 对于行内datepicker来说, 用 data-provide="datepicker-inline";这会使得控件在页面加载的时候就直接被初始化,而不是懒加载。

<input data-provide="datepicker">

在组件中标记:

<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>

你可以使用和其他你想金庸的bootstrap插件一样的方式来禁用datepicker的data-api。

$(document).off('.datepicker.data-api');

Configuration/配置项

在实例化的时候选项可以通过一个键值对的方式直接传递给Datepicker方法:

$('.datepicker').datepicker({
format: 'mm/dd/yyyy',
startDate: '-3d'
});

大部分选项可以使用 data-属性 的方式直接在目标元素上使用

<input class="datepicker" data-date-format="mm/dd/yyyy">
$('.datepicker').datepicker({
startDate: '-3d'
});

所有选项的默认值可以在 $.fn.datepicker.defaults中直接修改值。

$.fn.datepicker.defaults.format = "mm/dd/yyyy";
$('.datepicker').datepicker({
startDate: '-3d'
});

Stylesheets/样式

库中包含了少量的不同样式. 以下是每一个文件用于什么地方的概览:

bootstrap-datepicker.css 对于bootstrap2提供传统支持, bootstrap-datepicker3.css 支持bootstrap3。而 bootstrap-datepicker.standalone.css 可以脱离对于bootstrap库的依赖而独立使用.

No Conflict mode/无冲突模式

$.fn.datepicker.noConflict 提供了避免和其他jQuery datepicker控件冲突的方法:

var datepicker = $.fn.datepicker.noConflict(); // return $.fn.datepicker to previously assigned value
$.fn.bootstrapDP = datepicker; // give $().bootstrapDP the bootstrap-datepicker functional 转载请注明出处:博客园-tincyho http://www.cnblogs.com/tincyho/

Bootstrap-datepicker3官方文档中文翻译---概述(原版翻译 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html)的更多相关文章

  1. Bootstrap-datepicker3官方文档中文翻译---概述(原文链接 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html)

    bootstrap-datepicker Bootstrap-datepicker 提供了一个拥有Bootstrap样式的弹性Datepicker控件 Requirements/使用要求 Bootst ...

  2. Bootstrap-datepicker3官方文档中文翻译---Markup/标记(原文链接 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html)

    Markup/标记 下面是已经支持的标签的例子.这些标签本身不会提供DatePicker控件:你需要在标签上实例化Datepicker. input/输入框 最简单的例子: input获得焦点 (使用 ...

  3. Bootstrap-datepicker3官方文档中文翻译---I18N/国际化(原文链接 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html)

    I18N/国际化 这个插件支持月份和星期名以及weekStart选项的国际化.默认是英语(“en”); 其他有效的译本语言在 js/locales/ 目录中, 只需在插件后包含您想要的地区. 想要添加 ...

  4. Bootstrap-datepicker3官方文档中文翻译---Keyboard support/键盘支持(原文链接 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html)

    本日期控件包含了键盘导航.  “focused date” 在键盘导航期间一直会被保持追踪并且高亮显示(就想鼠标悬停的时候一样),当一个日期被切换(译者注:选中状态的切换)时或者控件隐藏时清除. up ...

  5. Bootstrap-datepicker3官方文档中文翻译---Event/事件(原文链接 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html)

    Events/事件 DatePicker在某些情况下触发一些事件.所有事件都拥有   传递给任何事件处理程序的  事件对象的    附加数据.(译者注:这里英语拗口,汉语也拗口,我用空格给大家断断句) ...

  6. Bootstrap-datepicker3官方文档中文翻译---Methods/方法(原文链接 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html)

    Methods/方法 方法是由 datepicker 函数调用的,第一个参数为字符串,随后是方法所需的任何参数. $('.datepicker').datepicker('method', arg1, ...

  7. Bootstrap-datepicker3官方文档中文翻译---Options/选项(原文链接 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html)

    Options/选项 带“Date”的所有选项都可以处理 Date 对象; 字符串格式化根据 给定的 format 而定; 相对于今天的时间变量, 如 “-1d”, “+6m +1y”等等, 其中有效 ...

  8. Spark官方文档 - 中文翻译

    Spark官方文档 - 中文翻译 Spark版本:1.6.0 转载请注明出处:http://www.cnblogs.com/BYRans/ 1 概述(Overview) 2 引入Spark(Linki ...

  9. Spark SQL 官方文档-中文翻译

    Spark SQL 官方文档-中文翻译 Spark版本:Spark 1.5.2 转载请注明出处:http://www.cnblogs.com/BYRans/ 1 概述(Overview) 2 Data ...

随机推荐

  1. 浅谈Django的生命周期和CBF和FBC

    Django的生命周期和CBF和FBC 对于所有的web框架来说本质就是一个socket服务端,浏览器是socket客户端,客户端和服务端通信,字符串(Http协议):请求头和请求体 响应头+响应体 ...

  2. Linux入门(16)——Ubuntu16.04下配置sublime text 3使用markdown

    sublime text 3安装两个插件: MarkDown Editing OmniMarkupPreviewer 有的人使用 MarkDown Editing markdownpreviewer ...

  3. LINUX 笔记-grep命令

    grep [-acinv] [--color=auto] '查找字符串' filename 它的常用参数如下: -a :将binary文件以text文件的方式查找数据 -c :计算找到'查找字符串'的 ...

  4. Acitiviti笔记(一)

    一.核心组件 ProcessEngine:流程引擎的抽象,对于开发者来说,它是我们使用Activiti的facade,通过它可以获得我们需要的一切服务.类似于一个容器工厂,来保存创建的ProcessE ...

  5. LeetCode 229. Majority Element II (众数之二)

    Given an integer array of size n, find all elements that appear more than ⌊ n/3 ⌋ times. The algorit ...

  6. TensorFlow Object Detection API(Windows下测试)

    "Speed/accuracy trade-offs for modern convolutional object detectors." Huang J, Rathod V, ...

  7. 通过命令行使用cl.exe编译器

    转载http://www.cnblogs.com/mizhongqin/archive/2013/03/11/cmd_cl-exe_vs2010.html 与在IDE中编译相比,命令行模式编译速度更快 ...

  8. 最长公共子序列Lcs(打印路径)

    给出两个字符串A B,求A与B的最长公共子序列(子序列不要求是连续的).   比如两个串为:   abcicba abdkscab   ab是两个串的子序列,abc也是,abca也是,其中abca是这 ...

  9. 解决autocad闪退

    1.进入注册表,regedit 2.找到ROOT\installer\Products ,找到以7D2F开头的键值,这里有两个都得删除 3.删除programdata目录下的AutoDesk目录,及f ...

  10. Celery 源码解析四: 定时任务的实现

    在系列中的第二篇我们已经看过了 Celery 中的执行引擎是如何执行任务的,并且在第三篇中也介绍了任务的对象,但是,目前我们看到的都是被动的任务执行,也就是说目前执行的任务都是第三方调用发送过来的.可 ...