一：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. Android Studio查看其它APP的布局结构
			
    概述 日常使用别家的APP过程中,会遇到一些比较好看的布局,这时候我们就想学习一下别人的布局结构,以便参考. (1)手机连接电脑.设置手机为USB调试模式 (2)运行Android Studio,打开 ...
    
			
    2. 
						
  2. 可靠UDP设计
			
    最近加入了一个用帧同步的项目,帧同步方案对网络有着极大的影响,于是采用了RUDP(可靠UDP),那么为什么要摒弃TCP,而费尽心思去采用UDP呢?要搞明白这个问题,首先要了解TCP和UDP的区别 ,  ...
    
			
    3. 
						
  3. Java IO设计模式
			
    JAVA IO 设计模式彻底分析 2011-01-06 14:20:09|  分类: java|字号 订阅 http://blog.csdn.net/tianyue168/archive/2010/0 ...
    
			
    4. 
						
  4. SecureCRT同时向多个终端发送命令
			
    1.[View]->[Command Window] 2.[Send Command to]->[All Sessions] 参考: http://www.netingcn.com/sec ...
    
			
    5. 
						
  5. ios修改hosts文件后访问网址114导航域名无法解析问题
			
    当前的问题是打开hosts文件转换成utf8格式浏览发现前面有@之类的非法字符,手动修改后可以访问.
    
			
    6. 
						
  6. [ios]objective-c 协议和委托 (重点基础知识）
			
    objective-c protocol delegateprotocol-协议,就是使用了这个协议后就要按照这个协议来办事,协议要求实现的方法就一定要实现. delegate-委托,顾名思义就是委托 ...
    
			
    7. 
						
  7. 【jsp】jsp访问到之后报错如下：Uncaught SyntaxError: Unexpected token <
			
    jsp访问到之后报错如下: Uncaught SyntaxError: Unexpected token < 问题出在哪里: 发现把这个注销掉,就不会出现这个问题了,那script引用js文件哪 ...
    
			
    8. 
						
  8. 快速乘法，幂计算 hdu5666
			
    在实际应用中为了防止数据爆出,在计算a*b%m和x^n%m时,可以采用此方法.在数论中有以下结论: a*b%m=((a%m)*(b*m))%m ; (a+b)%m=(a%m+b%m)%m ; _int ...
    
			
    9. 
						
  9. 修改Linux基本配置
			
    1.修改主机名 vi /etc/sysconfig/network NETWORKING=yes HOSTNAME=server1.cn 2.修改ip地址 vi /etc/sysconfig/netw ...
    
			
    10. 
						
  10. Linux学习之十三-vi和vim编辑器及其快捷键
			
    vi和vim编辑器及其快捷键 1.vi与vim区别 它们都是多模式编辑器,不同的是vim 是vi的升级版本,它不仅兼容vi的所有指令,而且还有一些新的特性在里面. vim的这些优势主要体现在以下几个方 ...
    
			
    11.