一：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. Codeforces Round #451 (Div. 2) B. Proper Nutrition【枚举/扩展欧几里得/给你n问有没有两个非负整数x,y满足x·a + y·b = n】
			
    B. Proper Nutrition time limit per test 1 second memory limit per test 256 megabytes input standard  ...
    
			
    2. 
						
  2. 10.1综合强化刷题 Day2 afternoon
			
    最大值(max) Time Limit:1000ms   Memory Limit:128MB 题目描述 LYK有一本书,上面有很多有趣的OI问题.今天LYK看到了这么一道题目: 这里有一个长度为n的 ...
    
			
    3. 
						
  3. jcraft--SFTP demo
			
    import java.awt.Container; import java.awt.GridBagConstraints; import java.awt.GridBagLayout; import ...
    
			
    4. 
						
  4. Css 基础学习
			
    css 基本选择器 css基本选择器有三种方法 第一种: class选择器 .c1{ color: red;} <div class='c1'>hello world</div> ...
    
			
    5. 
						
  5. mariadb设置utf8mb4
			
    1 . mysql真正的utf8是utf8mb4才是有效的utf8 a). mariaDB的设置方法 #vim /etc/my.conf [mysqld] character_set_server=u ...
    
			
    6. 
						
  6. 一款不错的编程字体Source Code Pro
			
    我以前一直是用的MS自家的是Consolas的字体,这个字体基本上具有编程字体所需的所有要素:等宽.支持ClearType.中文字体大小合适,l和1,o和0很容易区分.非要挑刺的话就是字体比较小,9号 ...
    
			
    7. 
						
  7. Android自定义控件-Path之贝赛尔曲线和手势轨迹、水波纹效果
			
    从这篇开始,我将延续androidGraphics系列文章把图片相关的知识给大家讲完,这一篇先稍微进阶一下,给大家把<android Graphics(二):路径及文字>略去的quadTo ...
    
			
    8. 
						
  8. mysql赋给用户权限grant all privileges on
			
    查看mysql用户表的结构,Field项都是各类权限限制 Host限制登录的IP,User限制登录的用户,Delete_priv限制删除权限,Grant_priv限制权限授予,Super_priv为超 ...
    
			
    9. 
						
  9. Graphicmagick编译
			
    为了需求给Graphicmagick加了几个支持,版本分别为mozjpeg2.1,bzip2-1.0.6,libpng-1.6.18,libwebp-0.4.3,mozjpeg-2.1,tiff-4. ...
    
			
    10. 
						
  10. Spark sql读取数据库和ES数据进行处理代码
			
    读取数据库数据和ElasticSearch数据进行连接处理 import java.util.HashMap; import java.util.List; import java.util.Map; ...
    
			
    11.