编程 Javascript

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

Posted in Javascript onJanuary 10, 2017

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

第二步：点击文本框触发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>

js页面

<!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做个日期选择适用于手机端示例

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

黄力军

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript中的常见排序算法

Mar 27 Javascript

JS模块与命名空间的介绍

Mar 22 Javascript

iframe窗口高度自适应的实现方法

Jan 08 Javascript

jquery text()方法取标签中的文本

Jul 25 Javascript

js实现文字跟随鼠标移动而移动的方法

Feb 28 Javascript

详解AngularJS的通信机制

Jun 18 Javascript

JS验证逗号隔开可以是中文字母数字

Apr 22 Javascript

精彩的Bootstrap案例分享重点在注释!(选项卡、栅格布局)

Jul 01 Javascript

Node.js Mongodb 密码特殊字符 @的解决方法

Apr 11 Javascript

vue中的event bus非父子组件通信解析

Oct 27 Javascript

如何在项目中使用log4.js的方法步骤

Jul 16 Javascript

Vue看了就会的8个小技巧

Jan 21 Vue.js

javascript删除html标签函数cIsHTML

Jan 09 #Javascript

jQuery.parseHTML() 函数详解

Jan 09 #Javascript

微信小程序用户数据解密详细介绍

Jan 09 #Javascript

微信小程序摇一摇抽奖简单实例实现代码

Jan 09 #Javascript

jQuery实现弹出窗口弹出div层的实例代码

Jan 09 #Javascript

Bootstrap实现渐变顶部固定自适应导航栏

Aug 27 #Javascript

微信小程序实战程序简易新闻的制作

Jan 09 #Javascript