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

jQuery 2019-01-06

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

第二步：点击文本框触发bootstrap模态框并显示

第三步：我是建一个外部js页面写的

js中获得当前时间是年份和月份，形如：201208

rush:js;"> //获取完整的日期 var date=new Date; var year=date.getFullYear(); 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()

以下是搜到的有用内容：

rush:js;"> 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( ); //获取日期与时间
rush:js;">

js页面

rush:xhtml;">

<html lang="en">

Document

<script src="riqi.js">

<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-<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>miss="modal" aria-hidden="true"&gt;×</button>

<h4 class="modal-title" id="myModalLabel"&gt;日期选择</h4>

<div class="modal-body">

     <!--

      作者：511108312@qq.com

      时间：2017-01-09

      描述：里面放内容，点击确定显示

     -->

<select id="nian"&gt;<!--年-->

</select>

<select id="yue"&gt;<!--月-->

</select>

<select id="tian"&gt;<!--天-->

</select>

<div class="modal-footer">

<button type="button" class="btn btn-default" data-<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>miss="modal"&gt;<a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a></button>

<button type="button" class="btn btn-primary" id="sure"&gt;确定</button><!--把我要选的内容扔到文本框里-->

<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')//选完直接关闭模态框

})

js页面下面

rush: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++)//从当前年份减5，当前年份加6、取前5年后5年//i就等于年份

{

if(i==year)//默认定位当前年份

{

str +="";//默认定位当前年份

}

else

{

str +="";

}

}

$("#nian").html(str);//找到ID等于nian的下拉把option扔里面，option等于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 +="";

}

else

{

str +="";

}

}

$("#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)//判断什么情况下不等于31，有2个条件一个是年一个是月||或者当月份等于4，6，9，11等于30天

{

zs = 30;

}

else if(yue==2)//如果是2月

{

if((nian%4==0 && nian%100 !=0) || nian%400==0)//普通年条件能被4整除并且不能被100整除。或者能被400整除就是润年

{

zs = 29;

}

else

{

zs = 28;

}

}

var str = "";

for(var i=1;i<zs+1;i++)

{

if(i==tian)

{

str +="";

}

else

{

str +="";

}

}

$("#tian").html(str);

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

jqueryjquery日期时间选择器jquery日期选择器日期选择

相关文章

jquery页面搜索关键词突出显示
页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间
jQuery实时显示日期、时间 html: &lt;span id=&quot...
jQuery 添加水印
jQuery 添加水印 &lt;script src=&quot;../../../.....
Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息
中文：Sys.WebForms.PageRequestManagerParserErrorExceptio...
Asp.net 后台调用js方法
1. 用Response.Write方法 代码如下： Response.Write(&q...
Jquery实现按钮点击遮罩加载，处理完后恢复
Jquery实现按钮点击遮罩加载，处理完后恢复 思路： 1.点击按...