一：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. Jquery操作层级选择器
			
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
			
    2. 
						
  2. Codeforces Round #451 (Div. 2) A. Rounding【分类讨论/易错】
			
    A. Rounding time limit per test 1 second memory limit per test 256 megabytes input standard input ou ...
    
			
    3. 
						
  3. Mac下ll、l、la、等简写命令不能使用
			
    Mac默认用的也是Unix系统,Unix系统本身是没有这些简写命令的,可以通过给命令设置别名来使得可以使用这些简写命令 查看本机所有已经设置的命令别名:alias 设置命令别名:alias ll='l ...
    
			
    4. 
						
  4. iOS 5的文件存储策略应对
			
    苹果在iOS 5系统时,对app的文件存储提出了新的要求.从它的guildline来看,是推荐开发者尽量把app生成的文件放在Caches目录下的.原文如下: Only user-generated  ...
    
			
    5. 
						
  5. 在Android上编译OSG[3.0.2 ] (转)
			
    在Android上编译OSG[3.0.2 ] 分类:Android   This file contents can be applied for version OpenSceneGraph(OSG ...
    
			
    6. 
						
  6. Maven项目如何将自定义文件添加到META-INF目录下
			
    Maven项目如何将自定义文件添加到META-INF目录下 学习了:https://blog.csdn.net/yangjiegreat/article/details/78698655 <bu ...
    
			
    7. 
						
  7. C#中用鼠标移动页面功能的实现（代码控制滚动条）
			
    项目中需要实现以下功能: 打印预览控件中,可以用鼠标拖动页面,以查看超出显示范围之外的部分内容. 该功能本来可以通过拉动水平和垂直滚动条来实现,但实际使用中,用户更趋向于直接用鼠标拖动页面来实现,很多 ...
    
			
    8. 
						
  8. android ANR产生原因和解决的方法
			
    ANR (Application Not Responding) ANR定义:在Android上,假设你的应用程序有一段时间响应不够灵敏,系统会向用户显示一个对话框.这个对话框称作应用程序无响应(AN ...
    
			
    9. 
						
  9. 内网ip打洞-----p2p实现原理
			
    网上找了非常多.代码大堆,原理讲清楚透彻的不多. 本人找几篇讲得好的来整理一下. 一片技术文章,最基本的讲清楚原理.假设再有完整的能执行的源码也可,关键是要把核心部分代码分析清楚. (1)问题的由来: ...
    
			
    10. 
						
  10. Libimseti推荐系统
			
    技术:easyUI.jQuery.Spring.Struts.Hibernate.Mahout.MySQL 本Libimseti推荐系统使用数据.代码參考<Mahout in action> ...
    
			
    11.