bootstrap-datepicker实现年、月、日控件重置资源-CSDN文库

共119个文件

js：88个

css：13个

map：8个

5星 · 超过95%的资源需积分: 50 143 浏览量 2017-08-23 01:24:03 上传评论 3 收藏 556KB ZIP 举报

Bootstrap Datepicker是一款流行的JavaScript插件，它为网页应用提供了优雅的日期选择功能，支持多种配置选项，如年、月、日的选择，以及日期范围选择等。在实际开发中，我们经常需要实现用户能够通过点击按钮来清空或重置已选择的日期，以满足不同场景下的需求。本篇文章将详细介绍如何在Bootstrap Datepicker中实现年、月、日控件的重置功能，并动态切换年、月、日。我们需要在HTML中引入Bootstrap和Bootstrap Datepicker的相关库文件。这通常包括Bootstrap的CSS和JS文件，以及Bootstrap Datepicker的JS和CSS文件。确保这些资源已经被正确地链接到你的HTML文档中，以便插件能够正常工作。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Datepicker重置示例</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script> </head> <body>  <input type="text" id="datePicker"> <button id="resetButton">重置日期</button> <script src="app.js"></script> </body> </html> ``` 接下来，我们需要在JavaScript（这里以jQuery为例）中初始化Datepicker，并添加一个事件监听器来处理“重置”按钮的点击事件。当用户点击这个按钮时，我们将调用`datepicker('clearDates')`方法来清除选定的日期。 ```javascript // app.js $(document).ready(function() { // 初始化Datepicker var datePicker = $('#datePicker').datepicker({ format: 'yyyy-mm-dd', // 设置日期格式 autoclose: true, // 选择日期后自动关闭 todayHighlight: true // 高亮今日日期 }); // 添加重置按钮的点击事件 $('#resetButton').click(function() { // 重置日期选择器，清除选定日期 datePicker.datepicker('clearDates'); }); }); ``` 在这个示例中，我们首先通过`$('#datePicker').datepicker(options)`初始化了一个日期选择器，并设置了日期格式、自动关闭和今日高亮等功能。然后，我们给ID为`resetButton`的按钮添加了一个点击事件处理器，当用户点击这个按钮时，会调用`datepicker('clearDates')`方法，清除之前选择的日期，达到重置的效果。至于动态切换年、月、日，Bootstrap Datepicker本身提供了年、月的切换功能，用户可以直接在日期选择器中选择不同的年份和月份。如果需要自定义年份范围或实现特定的切换逻辑，可以通过监听`changeYear`和`changeMonth`事件，并在事件处理器中进行相应的操作。例如，如果你想限制日期选择范围，可以在初始化时设置`startDate`和`endDate`： ```javascript var startDate = new Date().setFullYear(new Date().getFullYear() - 5); var endDate = new Date().setDate(new Date().getDate()); // 初始化Datepicker，设置日期范围 var datePicker = $('#datePicker').datepicker({ format: 'yyyy-mm-dd', autoclose: true, todayHighlight: true, startDate: startDate, endDate: endDate }); ``` 以上就是关于“bootstrap-datepicker实现年、月、日控件重置”的详细讲解。通过理解并实践这些代码，你可以创建一个允许用户重置日期选择并动态切换年、月、日的交互式日期选择组件。这将使你的Web应用程序更加友好和易用。

资源推荐

资源详情

资源评论

收起资源包目录

bootstrap-datepicker实现年、月、日控件重置（119个子文件）

bootstrap.css 143KB

bootstrap.min.css 120KB

bootstrap-theme.css 26KB

bootstrap-datepicker3.standalone.css 23KB

bootstrap-theme.min.css 23KB

bootstrap-datepicker3.css 22KB

bootstrap-datepicker3.standalone.min.css 21KB

bootstrap-datepicker3.min.css 21KB

bootstrap-datepicker.standalone.css 18KB

bootstrap-datepicker.css 17KB

bootstrap-datepicker.standalone.min.css 16KB

bootstrap-datepicker.min.css 15KB

test.css 1KB

.DS_Store 8KB

.DS_Store 6KB

glyphicons-halflings-regular.eot 20KB

test.html 1KB

jquery.min.js 144KB

bootstrap.js 68KB

bootstrap-datepicker.js 56KB

bootstrap.min.js 36KB

bootstrap-datepicker.min.js 33KB

test.js 8KB

bootstrap-datepicker.bn.min.js 1KB

bootstrap-datepicker.kh.min.js 1KB

bootstrap-datepicker.si.min.js 988B

bootstrap-datepicker.ka.min.js 970B

bootstrap-datepicker.km.min.js 945B

bootstrap-datepicker.hi.min.js 944B

bootstrap-datepicker.ta.min.js 934B

bootstrap-datepicker.th.min.js 833B

bootstrap-datepicker.rs.min.js 817B

bootstrap-datepicker.el.min.js 764B

bootstrap-datepicker.hy.min.js 757B

bootstrap-datepicker.ru.min.js 731B

bootstrap-datepicker.uk.min.js 722B

bootstrap-datepicker.ar.min.js 714B

bootstrap-datepicker.ar-tn.min.js 704B

bootstrap-datepicker.uz-cyrl.min.js 703B

bootstrap-datepicker.tg.min.js 700B

bootstrap-datepicker.fa.min.js 670B

bootstrap-datepicker.rs-latin.min.js 662B

bootstrap-datepicker.mk.min.js 657B

bootstrap-datepicker.sr.min.js 651B

bootstrap-datepicker.kk.min.js 649B

bootstrap-datepicker.mn.min.js 638B

bootstrap-datepicker.bg.min.js 615B

bootstrap-datepicker.zh-CN.min.js 593B

bootstrap-datepicker.kr.min.js 575B

bootstrap-datepicker.zh-TW.min.js 566B

bootstrap-datepicker.lt.min.js 565B

bootstrap-datepicker.he.min.js 563B

bootstrap-datepicker.pl.min.js 552B

bootstrap-datepicker.vi.min.js 551B

bootstrap-datepicker.hu.min.js 541B

bootstrap-datepicker.et.min.js 537B

bootstrap-datepicker.fr.min.js 536B

bootstrap-datepicker.cs.min.js 535B

bootstrap-datepicker.ko.min.js 532B

bootstrap-datepicker.fi.min.js 528B

bootstrap-datepicker.eu.min.js 528B

bootstrap-datepicker.it.min.js 525B

bootstrap-datepicker.nl-BE.min.js 522B

bootstrap-datepicker.en-GB.min.js 518B

bootstrap-datepicker.en-IE.min.js 518B

bootstrap-datepicker-en-CA.min.js 518B

bootstrap-datepicker.en-NZ.min.js 517B

bootstrap-datepicker.en-AU.min.js 517B

bootstrap-datepicker.en-ZA.min.js 517B

bootstrap-datepicker.de.min.js 517B

bootstrap-datepicker.uz-latn.min.js 516B

bootstrap-datepicker.eo.min.js 515B

bootstrap-datepicker.oc.min.js 515B

bootstrap-datepicker.nl.min.js 513B

bootstrap-datepicker.ca.min.js 513B

bootstrap-datepicker.es.min.js 513B

bootstrap-datepicker.fr-CH.min.js 512B

bootstrap-datepicker.br.min.js 510B

bootstrap-datepicker.it-CH.min.js 506B

bootstrap-datepicker.ro.min.js 505B

bootstrap-datepicker.pt-BR.min.js 504B

bootstrap-datepicker.lv.min.js 503B

bootstrap-datepicker.ja.min.js 502B

bootstrap-datepicker.pt.min.js 498B

bootstrap-datepicker.sk.min.js 497B

bootstrap-datepicker.is.min.js 496B

bootstrap-datepicker.tr.min.js 495B

bootstrap-datepicker.me.min.js 493B

bootstrap-datepicker.az.min.js 493B

bootstrap-datepicker.no.min.js 492B

bootstrap-datepicker.sv.min.js 492B

bootstrap-datepicker.da.min.js 491B

bootstrap-datepicker.gl.min.js 489B

bootstrap-datepicker.fo.min.js 488B

npm.js 484B

bootstrap-datepicker.sr-latin.min.js 478B

bootstrap-datepicker.bs.min.js 475B

bootstrap-datepicker.nb.min.js 462B

共 119 条

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>日期切换</title> <link href="./bootstrap/css/bootstrap.css" rel="stylesheet"> <link href="./css/test.css" rel="stylesheet" /> <script src="./js/jquery.min.js"></script> <script src="./bootstrap/js/bootstrap.js"></script> <link href="./datapicker/css/bootstrap-datepicker3.css" rel="stylesheet"> <script src="./datapicker/js/bootstrap-datepicker.js"></script> <script src="./datapicker/locales/bootstrap-datepicker.zh-CN.min.js"></script> <script src="./js/test.js"></script> </head> <body> <span class="dayTest">按天</span> <span class="monthTest">按月</span> <span class="yearTest">按年</span> <div class="form-group"> <label class="form-group-title">日期范围</label> <div class="input-group date"> <input name="startDate" class="form-control date-picker form-control-left"> <span class="input-group-addon"></span> <input name="endDate" class="form-control date-picker form-control-right"> </div> </div> </body> </html>

评论收藏

内容反馈