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. PowerDesigner数据模型(CDM—PDM)

    操作过程 点击:  Tools/Generate Physical Data Model

  2. Win10在右键菜单添加“在此处打开命令窗口”设置项

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Directory\shell\OpenCmdHere] @="在此处打开命令 ...

  3. Vim 指令一览表

    vim 程序编辑器 移动光标的方法 h 或 向左箭头键(←) 光标向左移动一个字符 j 或 向下箭头键(↓) 光标向下移动一个字符 k 或 向上箭头键(↑) 光标向上移动一个字符 l 或 向右箭头键( ...

  4. JQuery 获取父元素方法

    ---恢复内容开始--- <tr class="removerow" style=""> <td> <input type=&qu ...

  5. 【leetcode刷题笔记】Multiply Strings

    Given two numbers represented as strings, return multiplication of the numbers as a string. Note: Th ...

  6. JQuery3 的新变化

    1. for-of 循环 for-in 循环不被推荐遍历数组,forEach 循环不能中断,for-of 循环(ES6)则弥补了前两者的不足,又添加了更多拓展(比如能遍历字符串,DOM 元素等) 因此 ...

  7. [NOI2008]设计路线

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

  8. PHP类的变量与成员，及其继承、访问与重写要注意的问题

    PHP的类及其实例: <?php ?>  后期静态绑定:为了避免子类重写静态属性后,使用继承来的方法仍然方法父类的静态属性,PHP5.3增加了一个新的语法,后期静态绑定,使用static关 ...

  9. HDU 3466 Proud Merchants 排序 背包

    题意:物品有三个属性,价格p,解锁钱数下线q(手中余额>=q才有机会购买该商品),价值v.钱数为m,问购买到物品价值和最大. 思路:首先是个01背包问题,但购买物品受限所以应先排序.考虑相邻两个 ...

  10. linux 安装tomcat7

    wget http://mirror.bit.edu.cn/apache/tomcat/tomcat-7/v7.0.81/bin/apache-tomcat-7.0.81.tar.gz 解压安装包 t ...