一：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 按钮运行按钮后,不弹出选择运行模拟器的对话框
			
    这个问题实际上很简单,奈何碰到的时候做了很多无用功.clean,rebulid... 特此记录,方便后来人. 解决步骤: 1.关闭AndroidStudio,并重启. 2. 把截图中的地方的勾去掉.检 ...
    
			
    2. 
						
  2. UVA 272 TEX Quotes【字符串】
			
    https://vjudge.net/problem/UVA-272 [分析]:标记一下. [代码]: #include <bits/stdc++.h> using namespace s ...
    
			
    3. 
						
  3. [Python Cookbook] Numpy: Multiple Ways to Create an Array
			
    Convert from list Apply np.array() method to convert a list to a numpy array: import numpy as np myl ...
    
			
    4. 
						
  4. Jmeter(五十)_性能测试模拟真实场景下的用户操作
			
    概述 我们在做性能测试的时候,不同的视角看到的结果都不一样. 例如响应时间 用户通过客户端向服务端发出请求的时间为: T1服务端接收到请求,处理该请求的时间为:T2服务端返回数据给客户端时间为: T3 ...
    
			
    5. 
						
  5. luogu P1260 工程规划（luogu wa）don't know way
			
    题目描述 造一幢大楼是一项艰巨的工程,它是由n个子任务构成的,给它们分别编号1,2,…,n(5≤n≤1000).由于对一些任务的起始条件有着严格的限制,所以每个任务的起始时间T1,T2,…,Tn并不是 ...
    
			
    6. 
						
  6. 超实用的Nginx极简教程，覆盖了常用场景
			
    概述 安装与使用 安装 使用 nginx 配置实战 http 反向代理配置 负载均衡配置 网站有多个 webapp 的配置 https 反向代理配置 静态站点配置 搭建文件服务器 跨域解决方案 参考  ...
    
			
    7. 
						
  7. 【div+css】两个div，如何让内层的div在外层div中水平垂直居中
			
    好久没有写样式,很是很生疏 ==================================================================== 方法1: .parent { wi ...
    
			
    8. 
						
  8. Scut游戏服务器引擎6.0.5.0发布-支持C#脚本
			
    1. 增加C#脚本支持2. 增加Pay和Sns中间件对Mysql数据库支持3. 精简布署步骤,取消Redis写入程序,将其移到游戏底层运行4. 修正Mysql对中文可能会出现乱码的BUG 点击下载:S ...
    
			
    9. 
						
  9. freemarker中include与import的区别
			
    在inc1.ftl与inc2.ftl中的内容分别是: <#assign username="刘德华">与<#assign username="张学友&q ...
    
			
    10. 
						
  10. 【DQ冰淇淋】—— Babylon 冰淇淋三维互动营销项目总结
			
    前言:在学习过Babylon.js基础之后,我上手的第一个网页端3D效果制作项目就是‘DQ冰淇淋’.这个小项目应用到了Babylon最基础的知识,既可以选味道,选点心,也可以旋转.倒置冰淇淋,互动起来 ...
    
			
    11.