Ajax做日期选择

最新推荐文章于 2021-08-05 18:34:13 发布

weixin_30843605

最新推荐文章于 2021-08-05 18:34:13 发布

阅读量101

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/chaochao00o/p/6277013.html

版权

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);
    
}

转载于:https://www.cnblogs.com/chaochao00o/p/6277013.html

weixin_30843605

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax做日期选择

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...
复制链接

扫一扫