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. checked 和 unchecked 基元类型操作

    对基元类型执行的许多算术运算都可能造成溢出: Byte b = ; b = (Byte) (b + ); // b 现在包含 44(或者十六进制值 2C) 重要提示:执行上述算术运算时,第一步要求所有 ...

  2. 剑指offer 面试45题

    面试45题: 题:把数组排成最小的数 题目:输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小 ...

  3. mysql只能连接localhost解决

    grant all privileges on *.* to 'root'@'%' identified by 'root';flush privileges;

  4. 教你在树莓派使用上RTC实时时钟，不用再担心断电后时间归零的问题，开机后自动同步RTC时钟！！！

    准备工作:1.系统建议使用官方最新的镜像文件 2.RTC时钟模块板(I2C接口)建议使用DS1307时钟模块,或者RTC时钟模块RTC时钟模块: 大家知道arduino的电平是5V,树莓派是3.3V, ...

  5. python中完善decorator

    @decorator可以动态实现函数功能的增加,但是,经过@decorator“改造”后的函数,和原函数相比,除了功能多一点外,有没有其它不同的地方? 在没有decorator的情况下,打印函数名: ...

  6. 函数进阶之结合tornado

    一.本篇博文内容 .协程函数 .面向过程编程 .递归和二分法 二.协程函数 协程函数:就是使用了yield表达式形式的生成器 首先函数的传参有几种? 三种: 1.实参形参传参 2.闭包的形式传参 3. ...

  7. CentOS 6.5 下vim 配置

    1. 登录并进入你常用的用户名下,查看其主目录 命令: # su xxx $ cd xxx $ ls -a 2.查看并建立目录和文件 首先看你的主目录~/ 下是否有.vimrc文件,没有就输入指令 $ ...

  8. gcc编译c、c++入门

    一.c语言 1.在当前目录下新建c文件 $:vim hello.c 2.按i进入编辑模式.按esc退出编辑模式,输入源代码 #include <stdio.h> int main(void ...

  9. 搭建配置cacti，采集信息监控

    安装cactilamp环境[iyunv@Cacti ~]#service iptables stop //关闭防火墙服务[iyunv@Cacti ~]#chkconfig iptables off / ...

  10. linux环境下的python安装过程(含setuptools)

    这里我不想采用诸如ubuntu下的apt-get install方式进行python的安装,而是在linux下采用源码包的方式进行python的安装. 一.下载python源码包 打开ubuntu下的 ...