1.主页面 引入JS Jquery bootstrap 包

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="jquery-1.11.2.min.js"></script>

<script src="../../bootstrap/dist/js/bootstrap.min.js"></script>

<script src="riqi.js"></script>

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

</head>

<body>

<input type="text" id="riqi" />

<!-- 模态框（Modal） -->

<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">

                <select id="nian">

                </select>

                <select id="yue">

                </select>

                <select id="tian">

                </select>

            </div>

            <div class="modal-footer">

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

                <button type="button" class="btn btn-primary" id="sure">确定</button>

            </div>

        </div><!-- /.modal-content -->

    </div><!-- /.modal -->

</div>

</body>

<script type="text/javascript">

$("#riqi").click(function(){

        $('#myModal').modal('show');

        LoadNian();

        LoadYue();

        LoadTian();

    })

$("#sure").click(function(){

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

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

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

        var str = nian+"-"+yue+"-"+tian;

        $("#riqi").val(str);

        $('#myModal').modal('hide')

    })

</script>

</html>

2.JS包

// JavaScript Document

$(document).ready(function(e) {

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

            LoadTian();

        })

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

            LoadTian();

        })

});

//加载年份

function LoadNian()

{

    var date=new Date;

     var year=date.getFullYear(); 

    var str = "";

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

    {

        if(i==year)

        {

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

        }

        else

        {

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

        }

    }

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

}

//加载月份

function LoadYue()

{

    var date=new Date;

     var yue=date.getMonth()+1;

    var str = "";

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

    {

        if(i==yue)

        {

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

        }

        else

        {

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

        }

    }

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

}

//加载天

function LoadTian()

{

    var date=new Date;

    var tian = date.getDate();

    var zs = 31; //总天数

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

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

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

    {

        zs = 30;

    }

    else if(yue==2)

    {

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

        {

            zs = 29;

        }

        else

        {

            zs = 28;

        }

    }

    var str = "";

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

    {

        if(i==tian)

        {

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

        }

        else

        {

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

        }

    }

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

}

Ajax做日期选择的更多相关文章

  1. AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动；

    js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...

  2. jquery做个日期选择适用于手机端

    第一步:做个 文本框用于显示年月日的 第二步:点击文本框触发bootstrap模态框并显示 第三步:我是建一个外部js页面写的 js中获得当前时间是年份和月份,形如:201208       //获取 ...

  3. 多日期选择jQuery插件 MultiDatesPicker for jQuery UI

    Multiple-Dates-Picker-for-jQuery-UI是一个多日期选择的jquery控件.   GIT源码: https://github.com/dubrox/Multiple-Da ...

  4. 纯原生js移动端日期选择插件

    最近在项目上需要使用日期选择插件,由于是移动端的项目,对请求资源还是蛮节约的,可是百度上一搜,诶~全是基于jquery.zepto的,本来类库就很大,特别像mobiscroll这种样式文件一大堆又丑又 ...

  5. Swift - 日期选择控件（UIDatePicker）的用法

    1,使用storyboard创建日期选择控件 首先我们将一个UIDatePicker控件和一个按钮直接添加到Main.Storyboard上.该按钮是为了点击时弹出提示框显示当前选择的日期和时间. 同 ...

  6. 推荐三款日期选择插件(My97DatePicker+jquery.datepicker+Mobiscroll)

    1.My97DatePicker 纯原生JS,专注于PC端,支持IE6+:页面上只需要引入WdatePicker.js文件,但是My97DatePicker整个目录是一个整体,最好不要破坏里面的目录结 ...

  7. angularjs之ui-bootstrap的Datepicker Popup实现双日期选择控件

    最开始使用ui-bootstrap的Datepicker Popup日期选择插件实现双日期选择时间范围时,在网上搜了一些通过JS去实现的方法,不过后来发现可以不必通过JS去处理,只需要使用其自身的属性 ...

  8. Android自定义View（RollWeekView－炫酷的星期日期选择控件）

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/53420889 本文出自:[openXu的博客] 目录: 1分析 2定义控件布局 3定义Cus ...

  9. 【jquery】多日期选择插件easyui date

    1.本次介绍一个好用的 多日期选择插件:EasyUI date,适用于:需要一次性选择多个日期,无需手动一个一个进行添加. 2.效果图: 3.下载地址:http://www.jeasyui.com/d ...

随机推荐

  1. Spring IOC/DI和AOP原理(转发：https://www.cnblogs.com/techroad4ca/p/5770073.html)

    一 IOC/DI 1. 概念及原理 IOC: Inversion of Control(控制反转)是一种设计思想,就是容器控制应用程序所需要外部资源的创建和管理,然后将其反转给应用程序.对象及其依赖对 ...

  2. python基础28 -----python中sockserver模块

    一.Python中的sockserver模块 1.该模块与sock模块不同之处是该模块自动帮我们分装好了一些功能,让我们在编程的时候直接调用这些功能就可以了,节省了编程步骤. 2.如图所示 注释:上图 ...

  3. pyhton3 sys模块

    Python常用模块之sys sys模块提供了一系列有关Python运行环境的变量和函数. 1 ). sys.stdin 标准输入流.2 ).sys.stdout 标准输出流.3 ). sys.std ...

  4. sublime text - vintage

    使用sublime text的vim模式的同学注意了: { "color_scheme": "Packages/Color Scheme - Default/Mac Cl ...

  5. 【转载】openwrt框架分析

    文章出处:http://blog.csdn.net/kingvenll/article/details/27545221 这次讲讲openwrt的结构. 1. 代码上来看有几个重要目录package, ...

  6. [NOI2008]设计路线

    题目 洛谷 BZOJ 做法 神仙题 显然这是棵树 个节点相东仅连接一个结点 不同于剖分,还能存在\("V"\)字型,一个节点最多与另外节点连两条边 \(dp[i][j][k]\)表 ...

  7. java-jpa-criteriaBuilder使用入门

    项目中使用jpa ,第一次见查询起来一脸蒙,这就去查下jpa查询的方式,和概念. jpa 元模型 criteria 查询 CriteriaBuilder 安全查询创建工厂 CriteriaQuery ...

  8. poj 2762 Going from u to v or from v to u?【强连通分量缩点+拓扑排序】

    Going from u to v or from v to u? Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 15812 ...

  9. 基于主主复制的mysql双机热备+keepalived实现高可用性

  10. maven环境变量配置不成功的原因

    在配置java开发环境时,MAVEN_HOME配置后,再将%MAVEN_HOME%\bin加入path后,mvn -v 不成功,显示mvn不是内部命令 网上寻觅各种办法无果 于是弃用MAVEN_HOM ...