jquery做个日期选择适用于手机端
第一步:做个 文本框用于显示年月日的
第二步:点击文本框触发
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">×</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); }