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

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

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

js中获得当前时间是年份和月份，形如：201208
      
 //获取完整的日期
 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()

以下是搜到的有用内容：

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>

PHP页面

<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8" />

	<title>Document</title>

	<script src="jquery-1.11.2.min.js" ></script>

	<script src="bootstrap.min.js" ></script>

	<script src="riqi.js"></script>

	<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />

</head>

<body>

	<input type="text" id="riqi" style="margin-top: 20px; margin-left: 100px;" />

	<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">

                                    <!--

                                    	作者：511108312@qq.com

                                    	时间：2017-01-09

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

                                    -->

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

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 +="<option selected='selected' value='"+i+"'>"+i+"</option>";//默认定位当前年份

		}

		else

		{

			str +="<option value='"+i+"'>"+i+"</option>";

		}

	}

	$("#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 +="<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)//判断什么情况下不等于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 +="<option selected='selected' value='"+i+"'>"+i+"</option>";

		}

		else

		{

			str +="<option value='"+i+"'>"+i+"</option>";

		}

	}

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

}

jquery做个日期选择适用于手机端的更多相关文章

  1. 【jquery】多日期选择插件easyui date

    1.本次介绍一个好用的 多日期选择插件:EasyUI date,适用于:需要一次性选择多个日期,无需手动一个一个进行添加. 2.效果图: 3.下载地址:http://www.jeasyui.com/d ...

  2. js alert重写，适用于手机端，改自于网上的代码

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  3. PHP项目实现手机端和PC端的页面切换

    目前访问页面的要切换成手机端和PC端,原理是通过对设备作出判断,显示不同的功能和页面. 如果手机端和PC端的功能结构不相同,一般会写两套系统,一套适用于PC端,一套适用于手机端. 如果功能相同,则只需 ...

  4. Android自定义View（RollWeekView－炫酷的星期日期选择控件）

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/53420889 本文出自:[openXu的博客] 目录: 1分析 2定义控件布局 3定义Cus ...

  5. js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得，放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式

    js replace 全局替换   js 的replace 默认替换只替换第一个匹配的字符,如果字符串有超过两个以上的对应字符就无法进行替换,这时候就要进行一点操作,进行全部替换. <scrip ...

  6. h5手机端下拉选择城市

    <!doctype html><html>    <head>            <meta http-equiv="Content-Type& ...

  7. 多日期选择jQuery插件 MultiDatesPicker for jQuery UI

    Multiple-Dates-Picker-for-jQuery-UI是一个多日期选择的jquery控件.   GIT源码: https://github.com/dubrox/Multiple-Da ...

  8. 用Jquery做一个时间日期选择器

    今天我们就用Jquery做一个时间日期选择器,当打开网页时,文本框里面显示的是当前的日期,点击文本框可以出现年.月.日的下拉菜单,并且可以选择,会根据年份的选择判断是否是闰年,从而改变二月的天数,闰年 ...

  9. 推荐三款日期选择插件(My97DatePicker+jquery.datepicker+Mobiscroll)

    1.My97DatePicker 纯原生JS,专注于PC端,支持IE6+:页面上只需要引入WdatePicker.js文件,但是My97DatePicker整个目录是一个整体,最好不要破坏里面的目录结 ...

随机推荐

  1. DOM 操作内容 innerText/innerHTML

    DOM 操作内容 innerText/innerHTML innerText属性(firefox不支持,可用 textContent)var div = document.getElementById ...

  2. canonical 标签介绍

    rel=”canonical” 这个标签已经推出很久了,canonical 是 Google.雅虎.微软等搜索引擎一起推出的一个标签,它的主要作用是用来解决由于网址形式不同内容相同而造成的内容重复问题 ...

  3. 从一个标准 url 里取出文件的扩展名

    在php预定义函数中有一个叫做"pathinfo()"的函数,专门用于返回文件路径信息的. 那好,我们就来看一下它能为我们做些什么?       语法:pathinfo($url_ ...

  4. The xor-longest Path

    The xor-longest Path Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 3875   Accepted: 8 ...

  5. servlet和struts2一起使用，实现绝对路径下的图片输出到jsp页面

    如果我们在web.xml中配置的struts2的接收请求的路径为: <filter-mapping> <filter-name>struts2</filter-name& ...

  6. Keil 的调试命令、在线汇编与断点设置

    上一讲中我们学习了如何建立工程.汇编.连接工程,并获得目标代码,但是做到这一 步仅仅代表你的源程序没有语法错误,至于源程序中存在着的其它错误,必须通过调试才能 发现并解决,事实上,除了极简单的程序以外 ...

  7. keil 工程中多文件编译时全局变量怎么引用

    由于代码较多时,为了代码的工整以及易读性,往往将代码拆分成模块,并书写头文件.但keil中定义全局变量往往是一件头疼的事情. (1)xx.h文件中基本书写的是管脚定义和函数声明,全局变量不能定义在头文 ...

  8. Delphi的Owner与Parent可以不一致，而且Owner不是必须存在（一共7个问题） good

    问题1:Owner与Parent不一致:新建一个Form,上面放一个Button1,一个Panel1,然后在Panel1上再放一个Button2,测试结果:procedure TForm1.Butto ...

  9. 14.7.2 Changing the Number or Size of InnoDB Redo Log Files 改变InnoDB Redo Log Files的数量和大小

    14.7.2 Changing the Number or Size of InnoDB Redo Log Files 改变InnoDB Redo Log Files的数量和大小 改变 InnoDB ...

  10. bzoj3166

    首先不难想到穷举次大数然后我们只要找到满足这个数是次大数的最大区间即可显然答案只可能是这两种[LL[i]+1,R[i]-1]和[L[i]+1,RR[i]-1]L[i]表示这个数ai左侧第一个比它大的数 ...