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. PhoneGap 兼容IOS上移20px(包括启动页，拍照)

    引自:http://stackoverflow.com/questions/19209781/ios-7-status-bar-with-phonegap 情景:在ios7下PhoneGap app会 ...

  2. 剑指offer 面试20题

    面试20题: 题目:表示数值的字符串 题:请实现一个函数用来判断字符串是否表示数值(包括整数和小数).例如,字符串"+100","5e2","-123 ...

  3. OSI参考模型与排错

    OSI参考模型中底层为其上层服务,因此排除网络故障应该也从底层到高层依次排查. 首先检查网络连接是否正常(物理层检查).例如网卡没有接好网线,将会看到带红叉的本地连接,属于物理层故障. 连接好网卡后, ...

  4. Linux：文件

    Linux:文件 文件属性 用户分为三种:文件拥有者.群组以及其它人,对不同的用户有不同的文件权限. 使用 ls 查看一个文件时,会显示一个文件的信息,例如 drwxr-xr-x. 3 root ro ...

  5. 系统非正常关机启动后出现：an error occurred during the file system

    现象描述: 1.系统ssh登录报Too many open files in system,系统登录不进去,就直接强制关机了,开机后出现(2)的错误: 由于文件描述符用完了,需要把fs.file-ma ...

  6. MySQL修改管理员账户密码

    报错提示:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)MySQL代理报错提示: ...

  7. Sourse Insight使用教程及常见的问题解决办法

    1.下载安装 2.创建项目new project(注意不是file-->new ),而是project-->new project,输入项目名称和密码. 3.添加文件,其实就是将你的整个项 ...

  8. Java系列之EJB 理解

    EJB = Enterprise Java Bean,它和JavaBean有本质的区别,最好不要将他们混淆起来,就像不要将Java和 Javascript混淆起来一样.EJB有3中类型:Session ...

  9. 主攻ASP.NET.4.5.1 MVC5.0之重生:系统角色与权限(一)

    数据结构 权限分配 1.在项目中新建文件夹Helpers 2.在HR.Helpers文件夹下添加EnumMoudle.Cs namespace HR.Helpers { public enum Enu ...

  10. CSS3 3D发光切换按钮

    在线演示 本地下载