脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → datepicker日期选择器插件

Bootstrap datepicker日期选择器插件使用详解

 更新时间：2017年07月26日 10:13:59   作者：GIS晴天  
这篇文章主要为大家详细介绍了Bootstrap datepicker日期选择器插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

bootstrap是与jquery.js文件一起结合起来一起用的，缺少任何一个文件都不可以。

datepicker插件一般用于在文本框中选择日期，通过在表中选择日期，从而将日期显示在文本框中。因为datepicker.js默认是英文的，如果需要显示中文日期，则需要引入该插件的中文包。

例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>日期选择器插件</title>
<!-- bootstrap是基于jquery开发的，所以通过bootstrap开发时需要引入jquery -->
<!-- 引入bootstrap样式 -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" rel="external nofollow" /> 
</head>
<body>
<h1>Hello, world!</h1>
<input type="text" id="date1" style="width:200px;height:27px;margin: 20px" placeholder='输入时间'>
<!-- 引入jquery.js文件 -->
<script type="text/javascript" src="plugins/jquery-2.2.3.min.js"></script>
<!-- 引入bootstrap.js文件 -->
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<!-- 引入bootstrap日期选择器插件文件 -->
<script type="text/javascript" src="bootstrap/js/bootstrap-datepicker.js"></script>
<!-- 引入bootstrap日期选择器插件中文包 -->
<script type="text/javascript" src="bootstrap/js/bootstrap-datepicker.zh-CN.js"></script>

<script type="text/javascript">
$("#date1").datepicker({autoclose:true});//当在日期表中选择完时间后日期表就会自动关闭
</script>
</body>
</html>

最后的效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 基于javascript实现根据身份证号码识别性别和年龄

    基于javascript实现根据身份证号码识别性别和年龄

    这篇文章主要介绍了基于javascript实现根据身份证号码识别性别和年龄的相关资料,需要的朋友可以参考下
    2016-01-01
  • JavaScript创建对象方法实例小结

    JavaScript创建对象方法实例小结

    这篇文章主要介绍了JavaScript创建对象方法,结合实例形式总结了javascript创建对象的基本原理及使用工厂模式、构造函数模式与原型模式创建对象的相关实现技巧,需要的朋友可以参考下
    2018-09-09
  • javaScript中的空值和假值

    javaScript中的空值和假值

    JavaScript 是世界上最流行的编程语言。javaScript中有五种空值和假值，分别为false，null，undefined，“”，0。从广义上来说，这五个值都是对应数据类型的无效值或空值
    2017-12-12
  • JavaScript基础之AJAX简单的小demo

    JavaScript基础之AJAX简单的小demo

    这篇文章主要介绍了JavaScript基础之AJAX简单的小demo ，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
    2017-01-01
  • JavaScript+Canvas实现酷炫的粒子和流星效果

    JavaScript+Canvas实现酷炫的粒子和流星效果

    这篇文章主要为大家详细介绍了如何利用JavaScript和Canvas实现酷炫的粒子和流星动画效果，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
    2023-01-01
  • js blob类型url的视频下载问题的解决

    js blob类型url的视频下载问题的解决

    这篇文章主要介绍了js blob类型url的视频下载问题的解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • 深入理解JavaScript系列（26）：设计模式之构造函数模式详解

    深入理解JavaScript系列（26）：设计模式之构造函数模式详解

    这篇文章主要介绍了深入理解JavaScript系列（26）：设计模式之构造函数模式详解,本文讲解了基本用法、构造函数与原型、只能用new吗？、强制使用new、原始包装函数等内容,需要的朋友可以参考下
    2015-03-03
  • Javascript String 字符串操作包

    Javascript String 字符串操作包

    提供一个 JS String 包，包含了一些常用的对字符串操作的函数，详细的请看源码及演示
    2010-10-10
  • JavaScript递归操作实例浅析

    JavaScript递归操作实例浅析

    这篇文章主要介绍了JavaScript递归操作,由一个阶乘问题开始分析了递归操作的原理、实现方法与相关注意事项,需要的朋友可以参考下
    2016-10-10
  • JS中使用cavas截图网页并解决跨域及模糊问题

    JS中使用cavas截图网页并解决跨域及模糊问题

    这篇文章主要介绍了JS中使用cavas截取网页并解决跨域以及模糊问题 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-11-11

最新评论