一：jquery、bootstrap实现日期下拉选择

点击文本框弹出窗口

弹窗显示日期时间选择下拉

年份取当前年份的前后各5年

天数随年份和月份的变化而变化

点击保存，文本框中显示选中的日期

代码部分的实现

引入bootstrap文件和外部js文件

<script src="../gongju/bootstrap-3.3.7-dist/js/jquery-1.11.2.min.js" type="text/javascript"></script>

    <script src="../gongju/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script>

    <script src="riqi.js" type="text/javascript"></script>

    <link rel="stylesheet" type="text/css" href="../gongju/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>

文本框、引入bootstrap弹窗代码

<body>

    <input type="text" name="riqi" id="riqi"  data-toggle="modal" data-target="#myModal"/>   <!--给文本框定义id-->

    <!--弹窗部分-->

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                <h4 class="modal-title" id="myModalLabel">修改界面</h4>

            </div>

            <div class="modal-body">

                <!--弹窗主题内容-->

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                <button type="button" class="btn btn-primary" id="baocun">保存</button>

            </div>

        </div>

    </div>

</div>

</body>

外部js文件代码部分

$(document).ready(function(){

    var str="<select id='nian'></select><select id='yue'></select><select id='ri'></select>";

    $(".modal-body").html(str);

    fillnian();

    fillyue();

    fillri();

    /*年份变化时,调用月份和日期的方法*/

    $("#nian").change(function(){

        fillyue();

        fillri();

    })

    /*月份变化时,调用天数的方法*/

    $("#yue").change(function(){

        fillri();

    })

    $("#baocun").click(function(){   /*点击保存,取select的value值,并添加到文本框*/

        var nn=$("#nian").val();

        var mm=$("#yue").val();

        var ri=$("#ri").val();

            $("#riqi").val(nn+"-"+mm+"-"+ri);

    })

    /*下面分别是填充年份/月份/日期的方法*/

    function fillnian()

    {

        var n=new Date();

        var nian=parseInt(n.getFullYear());

        var str="";

        for(var i=nian-5;i<nian+6;i++)

        {

            str+="<option value='"+i+"'>"+i+"</option>"

        }

        $("#nian").html(str);

    }

    function fillyue()

    {

        var str="";

        for(var i=1;i<;i++)

        {

            str+="<option value='"+i+"'>"+i+"</option>"

        }

        $("#yue").html(str);

    }

    function fillri()

    {

        var nn=$("#nian").val();

        var mm=$("#yue").val();

        var biao=31;

        if(mm==4 || mm==6 ||mm==9 ||mm==11)

        {

            biao=30;

        }

        if(mm==2)

        {

            if((nn%4==0 && nn%100 != 0) || nn%400==0)

            {

                biao=29;

            }else

            {

                biao=28;

            }

        }

        var str="";

        for(var i=1;i<biao+1;i++)

        {

            str+="<option value='"+i+"'>"+i+"</option>";

        }

        $("#ri").html(str);

    }

})

二：bootstrap jquery UI自带动画的日期选择器

引入bootstrap jquery ui文件，直接引入下面几句话，不用改



<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

	<script src="//code.jquery.com/jquery-1.9.1.js"></script>

	<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

	<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">


 




代码实现部分




<body>

<p>日期：<input type="text" id="datepicker"></p>

</body>

 <script>

  $(function() {

    $( "#datepicker" ).datepicker();

  });

  </script>


												


											
模块：（日期选择）jquery、bootstrap实现日期下拉选择+bootstrap jquery UI自带动画的日期选择器的更多相关文章
	

    
								
  1. Bootstrap系列 -- 15. 下拉选择框select
		
    Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role=&quo ...
    
		
    2. 
						
  2. 基于jquery封装的颜色下拉选择框
		
    应同事要求,花了半个小时,写了一个简单的选择颜色的下拉框控件,可以控制输入框指示结果颜色 也贴出来,说不定哪天有用 if (typeof jQuery === 'undefined') { throw ...
    
		
    3. 
						
  3. JS(JQuery) 省市区三级联动下拉选择
		
    引入 area.js /* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,i ...
    
		
    4. 
						
  4. Bootstrap系列 -- 15. 下拉选择框select【转发】
		
    <form role="form"> <div class="form-group"> <select class="f ...
    
		
    5. 
						
  5. [原] XAF 添加日期筛选下拉选择
		
    1.ListView 添加日期筛选下拉选择,选择指定,可指定日期范围 2.Code using DevExpress.Data.Filtering; using DevExpress.ExpressA ...
    
		
    6. 
						
  6. jquery.chosen.js下拉选择框美化插件项目实例
		
    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
    
		
    7. 
						
  7. 基于bootstrap的下拉选择 ( combox ) 输入 ( input ) 功能
		
    需求: 在编辑数据的时候,既可以让用户输入,也可以从下拉框中选择 思路: 参照下面的效果图,因为是表格里面的数据,所以下拉框触发按钮和输入框分别为1列,输入列可以设置是否输入(方法:<td co ...
    
		
    8. 
						
  8. FancySelect – 更好用的 jQuery 下拉选择框插件
		
    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
    
		
    9. 
						
  9. 基于jQuery美化联动下拉选择框
		
    今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. hexo安装问题解决方法
			
    常见错误 { [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' ...
    
			
    2. 
						
  2. LeetCode OJ-- Maximum Depth of Binary Tree
			
    https://oj.leetcode.com/problems/maximum-depth-of-binary-tree/ 求二叉树的最大深度 深度优先搜索 /** * Definition for ...
    
			
    3. 
						
  3. 点击事件与UICollectionView的代理事件的冲突问题
			
    发现的问题:在UIImageView上添加UICollectionView视图,点击UICollectionViewCell,不执行didSelectItemAtIndexPath的代理方法. 解决方 ...
    
			
    4. 
						
  4. 伪全栈工程师做的有点简陋的ui设计
			
    站酷:http://www.zcool.com.cn/work/ZMjEwMDIxMDA=.html 这个app 叫自我时间管理  是一个 工具  管理自己开会 购物 健身 记账等 的提醒与管理,还可 ...
    
			
    5. 
						
  5. JSP-Servlet-SpringMVC
			
    作者:码思客链接:https://zhuanlan.zhihu.com/p/37612412来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 本篇文章,我们来讲讲技术,系 ...
    
			
    6. 
						
  6. JAVA基础之集合、Iterator迭代器、泛型及增强for循环
			
    个人理解: 对于集合,首先要明确的是最顶层的接口是Collection接口类,其包含一些基本的方法以便子类调用,不过在定义的时候最好定义好数据类型,以免遍历时还得必须进行向上转型:特别注意的是其没有关 ...
    
			
    7. 
						
  7. 解决php中redis client进行subscribe操作出现timeout的问题
			
    出现该问题的原因是poll设置接收超时所致,这个超时默认设置60s 设置Redis::OPT_READ_TIMEOUT配置项: 解决方法如下: <?php $redis = new Redis( ...
    
			
    8. 
						
  8. https://www.cnblogs.com/netoxi/p/7258895.html
			
    https://www.cnblogs.com/netoxi/p/7258895.html 应用服务和数据服务分离 需求/解决问题 随着网站业务的发展,越来越多的用户访问导致性能越来越差,越来越多的数 ...
    
			
    9. 
						
  9. JSON API：用 JSON 构建 API 的标准指南中文版
			
    译文地址:https://github.com/justjavac/json-api-zh_CN 假设你和你的团队以前争论过使用什么方式构建合理 JSON 响应格式, 那么 JSON API 就是你的 ...
    
			
    10. 
						
  10. 关于Web项目的pom文件处理
			
    pom文件的方式需要修改的是 <packaging>war</packaging> <profiles> <profile> <id>com ...
    
			
    11.