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

第二步：点击文本框触发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. 配置处理结果result

    Action处理完用户请求后返回一个字符串,整个字符串就是一个逻辑视图名. 除此之外,struts2还支持多种结果映射,struts2将结果转为实际资源时,不仅可以是JSP视图资源,也可以是FreeM ...

  2. javascript 获取 class 样式 重新赋值class样式 为div等系列标签内更改内容

    name = document.getElementById(project_not_through_id).className;                     // 获取目标id的 cla ...

  3. Mac系统安装Lua(转)

    下载最新版的lua请点击,然后解压 运行“终端”进入到该文件夹下 ,主要是cd [文件夹名] 在“终端”输入 make macosx (回车) 在“终端”输入 make test (回车) 然后再输入 ...

  4. 从零开始学习MySQL2---MySQL的安装与配置（只有Windows）

    因为我电脑只装了Windows系统,故而,只整理了在Windows系统下的安装方式 截图比较麻烦,故而多引用百度经验. Windows平台下安装与配置MySQL 5.6 下载,网址:http://de ...

  5. 采用Json字符串，往服务器回传大量富文本数据时，需要注意的地方，最近开发时遇到的问题。

    json字符串中存在常规的用户输入的字符串,和很多的富文本样式标签(用户不能直接看到,点击富文本编辑器中的html源码按钮能看到),例如下面的: <p><strong>富文本& ...

  6. jQuery分页插件jBootstrapPage，一个Bootstrap风格的分页插件

    一个Bootstrap风格的分页控件,对于喜欢Bootstrap简洁美观和扁平化的同学可以关注jBootstrapPage, 目前jBootstrapPage最新版为V0.1,后续还有更多功能需要完善 ...

  7. Angular1.0

    公司会议室组织分享,两个小时困死我了,一点凌乱笔记: $http.get和promise一样有then方法,成功,失败 jquery each遍历对象i,n ng-app ng-controller ...

  8. 解决VS2005 VS2008 vs2010断点无效-源代码与原始版本不同

    网上说的方法:(额~但是我就是不能用.但是也贴出来) 方法1.直接把整个文件格式化了一次,断点就可以用了Ctrl + A全选菜单:编辑-〉高级-〉设置选定内容的格式 (Ctrl+K, Ctrl+F)通 ...

  9. 字符串模式匹配算法——BM、Horspool、Sunday、KMP、KR、AC算法一网打尽

    字符串模式匹配算法——BM.Horspool.Sunday.KMP.KR.AC算法一网打尽 本文内容框架: §1 Boyer-Moore算法 §2 Horspool算法 §3 Sunday算法 §4 ...

  10. UML-图的意义

    在UML类图中,常见的有以下几种关系: 泛化(Generalization),  实现(Realization),关联(Association),聚合(Aggregation),组合(Composit ...