学习网站：http://www.bootcss.com/
1：日期插件（bootstrap-datepicker）
1）：导入js及css
下载：http://aymkdn.github.io/Datepicker-for-Bootstrap/
2）：创建mod及应用控件
$(document).ready(function() {
$('#day').datepicker({
"format":'yyyy-mm-dd'
});
});
<input name="day" id="day" type="text" />
2：别一个可以同时处理日期时间的例子
1）：下载控件
url:http://www.bootcss.com/p/bootstrap-datetimepicker/
2 )：修改其sample in bootstrap v3下的index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<form action="" class="form-horizontal" role="form">
<fieldset>
<legend>Test</legend>
<div class="form-group">
<label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
<div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<input type="hidden" id="dtp_input1" value="" /><br/>
</div>
<div class="form-group">
<label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>
<div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<input type="hidden" id="dtp_input2" value="" /><br/>
</div>
<div class="form-group">
<label for="dtp_input3" class="col-md-2 control-label">Time Picking</label>
<div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
</div>
<input type="hidden" id="dtp_input3" value="" /><br/>
</div>
</fieldset>
</form>
</div>
<script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script> //国际化文件，须要设置编码
<script type="text/javascript">
Date.prototype.format = function (format) { //日期格式化
/*
* eg:format="YYYY-MM-dd hh:mm:ss";
*/
var o = {
"M+" : this .getMonth() + 1, // month
"d+" : this .getDate(), // day
"h+" : this .getHours(), // hour
"m+" : this .getMinutes(), // minute
"s+" : this .getSeconds(), // second
"q+" :Math.floor(( this .getMonth() + 3) / 3), // quarter
"S" : this .getMilliseconds()
// millisecond
}
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this .getFullYear() + "" )
.substr(4 - RegExp.$1.length));
}
for ( var k in o) {
if ( new RegExp( "(" + k + ")" ).test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k]
: ("00" + o[k]).substr(( "" + o[k]).length));
}
}
return format;
}
</script>
<script type="text/javascript">
$('.form_datetime').datetimepicker({
language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
});
$('.form_date').datetimepicker({
format: 'yyyy-mm-dd',
language: 'fr', //国际化（语言）
weekStart: 1, //一周从哪一天开始。0（星期日）到6（星期六）
todayBtn: 1, //是否显示当前日期按钮
autoclose: 1, //当选择一个日期之后是否立即关闭此日期时间选择器。
todayHighlight: 1, //如果为true, 高亮当前日期
startView: 2,
minView: 2,
forceParse: 0 //当选择器关闭的时候，是否强制解析输入框中的值
});
var date1 = new Date().format("yyyy-MM-dd");
alert(date1)
$('.form_date').datetimepicker('setEndDate',date1);//限制其结束时间
$('.form_time').datetimepicker({
language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 1,
minView: 0,
maxView: 1,
forceParse: 0
});
</script>
</body>
</html>
3)修改国际化文件：js\locales\bootstrap-datetimepicker.fr.js
/**
* French translation for bootstrap-datetimepicker
* Nico Mollet <nico.mollet@gmail.com>
*/
;(function($){
$.fn.datetimepicker.dates['fr'] = {
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
daysShort: ["日", "一", "二", "三", "四", "五", "六", "日"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
today: "今天",
suffix: [],
meridiem: ["上午", "下午"],
weekStart: 1,
format: "yyyy-mm-dd"
};
}(jQuery));
相关推荐
这个里面 包含整个bootstrap源程序 你所需要的都在了、里面.Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 本教程将向您...
Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源，它为开发者提供了大量美观、一致的SVG图标，可以方便地集成到Bootstrap5项目中，为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...
Bootstrap，由Twitter开发，是一款广泛应用于前端开发的开源框架，以其简洁、直观和强大的特性而闻名。Bootstrap 3.3.7是该框架的一个稳定版本，提供了丰富的组件、响应式设计以及易于定制的样式，旨在帮助开发者...
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件和设计工具，使得构建响应式、移动优先的网站变得简单高效。在这个“Bootstrap后台登录界面模板”中，我们可以找到一个预设计好的登录页面...
开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min...
bootstrap中文文档，实际上是将bootstrap整个站扒下来了，使用浏览器打开index.htm即可，注意编码格式为UTF-8，如果出现乱码考虑修改浏览器编码。 主要便于离线环境下前端开发使用。 Bootstrap 是最受欢迎的 HTML...
Bootstrap是世界上最流行的前端开发框架，由Twitter的开发者创建，它为快速构建响应式、移动优先的网站提供了强大的工具。这个“bootstrap源码.rar”压缩包包含的正是Bootstrap框架的源代码，这对于理解其工作原理、...
Bootstrap Icons：Bootstrap 有史以来第一次拥有自己的图标库，并且是专门为 Bootstrap 的组件和文档定制开发的。 Bootstrap Icons 的设计初衷是与 Bootstrap 组件配合使用，从表单到导航组件等。Bootstrap Icons ...
在"bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js"的标题中，我们可以看到两个关键文件：`bootstrap.min.css`和`bootstrap.bundle.min.js`。`bootstrap.min.css`是Bootstrap的核心CSS文件，经过压缩...
Bootstrap是世界上最受欢迎的前端开发框架之一，用于构建响应式、移动优先的网页项目。这个框架提供了丰富的组件、样式和JavaScript插件，极大地简化了网页设计和开发过程。在标题和描述中提到的"bootstrap.min.js...
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件和设计工具，使得构建响应式、移动优先的网站变得简单高效。"Bootstrap布局设计器"是一个专门用于创建和编辑Bootstrap布局的工具，它可以...
Bootstrap栅格系统是一种基于12列的响应式布局框架，旨在帮助开发者构建适应不同设备屏幕大小的网页。这种系统能够确保网页在PC、平板、手机等不同设备上呈现出优雅的自适应效果，优化用户体验。Bootstrap栅格系统的...
Bootstrap是世界上最受欢迎的前端开发框架之一，用于构建响应式布局和移动设备优先的Web项目。这个框架由Twitter的开发者创建，极大地简化了网页设计和开发流程。本压缩包包含两个版本的Bootstrap——3.4.1和4.6.1，...
Bootstrap评论列表模板是一种基于Bootstrap前端框架设计的网页组件，它为网站提供了一种标准化的、美观的、响应式的用户评论展示方式。Bootstrap是由Twitter开发并开源的，它是一套强大的前端开发工具集，包含了丰富...
Bootstrap实现的自适应页面简单应用示例 在本文中，我们将详细介绍Bootstrap实现的自适应页面简单应用示例，结合具体实例形式分析了基于Bootstrap的列表布局结构页面实现与使用技巧。 首先，让我们了解什么是...
Bootstrap是一个流行的前端开发框架，用于快速构建响应式和移动优先的网站。在本文中，我们将探讨如何使用Bootstrap来创建一个带有验证码和验证功能的登录表单。 首先，要创建这样一个表单，我们需要引入Bootstrap...
Bootstrap 是一个广泛使用的前端开发框架，用于创建响应式网站和应用程序。它最初由 Twitter 的开发人员马克·奥托（Mark Otto）和雅各布·桑特森（Jacob Thornton）开发，并已成为世界上使用最广泛的开源前端框架之...
Bootstrap 期末项目设计报告模板知识点总结 一、Bootstrap 介绍 Bootstrap 是一个流行的前端框架，用于构建响应式、mobile-first 的 Web 应用程序。它提供了一些常用的 HTML、CSS 和 JavaScript 组件，可以快速...
Bootstrap是世界上最受欢迎的前端开发框架，它为创建响应式、移动优先的网站提供了一套强大的工具。Bootstrap3.3.5是该框架的一个稳定版本，它优化了对各种设备的适应性，使得开发者能够轻松地构建一致且美观的界面...
Bootstrap 详细学习课件文档 Bootstrap 是由美国 Twitter 公司开发的，目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的前端框架，简单灵活，可以大大提高 web 开发效率。 Bootstrap 概述 ...