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. Python的模块与函数以及与自动化的结合

    3 模块与函数 3.1程序结构 python的程序由package,module,function组成,分别是包,模块,函数.模块是函数和类的集合,包,模块,函数之间的关系如下: 3.2模块 pyth ...

  2. PyQt4 UI设计和调用 使用eric6

    使用工具eric6 安装包地址: http://eric-ide.python-projects.org/eric-download.html 1.需要安装python和pyqt为前提,然后安装eri ...

  3. 面试题2：实现Singleton模式(Java实现)

    SIngleton(单例)设计模式 它是最简单的常用的设计模式之一,设计模式在面向对象程序设计中起着举足轻重的作用,Singleton是唯一一个能够用短短几十行代码完整实现的模式. public cl ...

  4. 0607am抽象类&接口&析构方法&tostring&小知识点

    /*class ren{ public static $color;//静态 static function () { ren::$color; self::$color;//self只能写在类里面, ...

  5. [笔记]Go语言在Linux环境下输出彩色字符

    Go语言要打印彩色字符与Linux终端输出彩色字符类似,以黑色背景高亮绿色字体为例: fmt.Printf("\n %c[1;40;32m%s%c[0m\n\n", 0x1B, & ...

  6. node+npm安裝配置

    控制臺輸入node 根據提示安裝   sudo apt-get install -g npm配置淘寶源 npm config set registry https://registry.npm.tao ...

  7. Python学习进程（2）Python环境的搭建

        本节主要介绍在windows和Linux平台上如何搭建Python编程环境.     (1)查看Python版本: windows: C:\Users\JMSun>python 'pyt ...

  8. $《利用Python进行数据分析》学习笔记系列——IPython

    本文主要介绍IPython这样一个交互工具的基本用法. 1. 简介 IPython是<利用Python进行数据分析>一书中主要用到的Python开发环境,简单来说是对原生python交互环 ...

  9. nodejs安装，配置环境，使用express建立一个新项目

    1.下载nodejs安装包 去nodejs官网下载最新版本就行,网址:http://nodejs.cn/download/,点击自己适用的系统,自动下载跟电脑操作系统位数符合的安装包, 下载下来安装包 ...

  10. 对vector，list的操作函数

    向量只能接受同一类型的数据:list可以接受不同的数据. 1.添加元素 vector:> b=c(1,2,3) > b=c(b,"four") #直接在后面添加添加 & ...