jquery做个日期选择适用于手机端

最新推荐文章于 2022-09-05 16:14:00 发布

weixin_30268921

最新推荐文章于 2022-09-05 16:14:00 发布

阅读量149

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/shenzikun1314/p/6548446.html

版权

第一步：做个文本框用于显示年月日的

第二步：点击文本框触发
var month=date.getMonth()+1;
month =(month<10 ? "0"+month:month);
var mydate = (year.toString()+month.toString());

注意，year.toString()+month.toString()不能写成year+month。不然如果月份大于等于10，则月份为数字，会和年份相加，如201210，则会变为2022，需要加.toString()

以下是搜到的有用内容：

var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间

<SCRIPT LANGUAGE="JavaScript">
function monthnow(){
var now = new Date();
var monthn = now.getMonth();
var yearn = now.getYear();
window.location.href="winnNamelist.jsp?getMonth="+monthn+"&getYear="+yearn;
}
</script>

<!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/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>

<!-- 模态框（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-primary" id="qd">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<input type="text" id="rq" />

</body>
</html>

// JavaScript Document
$(document).ready(function(e) {
    //在文本框里面显示当前日期
    var date = new Date();
    var nian = date.getFullYear();
    var yue = date.getMonth()+1;
    var tian = date.getDate();
    
    $("#rq").val(nian+"-"+yue+"-"+tian);
    
    //给文本框加点击事件
    $("#rq").click(function(){
            $('#myModal').modal('show');
            //加载年
            LoadNian();
            //加载月
            LoadYue();
            //加载天
            LoadTian();
        })
        
    //当年份选中变化的时候，重新加载天
    $("#nian").change(function(){
            LoadTian();
        })
    //当月份选中变化的时候，重新加载天
    $("#yue").change(function(){
            LoadTian();
        })
    //给确定按钮加点击事件
    $("#qd").click(function(){
            var nian = $("#nian").val();
            var yue = $("#yue").val();
            var tian = $("#tian").val();
            
            $("#rq").val(nian+"-"+yue+"-"+tian);
            $('#myModal').modal('hide');
        })
    
});

//加载年的方法
function LoadNian()
{
    var date = new Date();
    var nian = date.getFullYear();
    
    var str = "";
    for(var i=nian-5;i<nian+6;i++)
    {
        if(i==nian)
        {
            str = str +"<option selected='selected' value='"+i+"'>"+i+"</option>";
        }
        else
        {
            str = 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 = str+"<option selected='selected' value='"+i+"'>"+i+"</option>";
        }
        else
        {
            str = str+"<option value='"+i+"'>"+i+"</option>";
        }
    }
    $("#yue").html(str);
}

//加载天
function LoadTian()
{
    var date = new Date();
    var tian = date.getDate();
    var yue = $("#yue").val();
    var nian = $("#nian").val();
    
    var zs = 31;
    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 = str +"<option selected='selected' value='"+i+"'>"+i+"</option>";
        }
        else
        {
            str = str +"<option value='"+i+"'>"+i+"</option>";
        }
    }
    
    $("#tian").html(str);
    
}

转载于:https://www.cnblogs.com/shenzikun1314/p/6548446.html

weixin_30268921

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery做个日期选择适用于手机端

jquery做个日期选择适用于手机端第一步：做个文本框用于显示年月日的第二步：点击文本框触发var month=date.getMonth()+1;month =(month<10 ? "0"+month:month);var mydate = (year.toString()+month.toString(...
复制链接

扫一扫