下拉列表显示时间

最新推荐文章于 2018-11-22 15:12:58 发布
最新推荐文章于 2018-11-22 15:12:58 发布
阅读量1.1k 收藏
点赞数
分类专栏： JAVAWEB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gghwcf/article/details/77877874
版权

整合了下网上资料，弄了个自己的方法，可以参考下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>  
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

</head>

<body  οnlοad="window.show()">

  <select class="easyui-combobox" id="years" name="select" panelHeight="auto" style="    width:80px; padding-top:5px; margin-top:10px;">

  </select>年
  <select class="easyui-combobox" id="months" name="select" panelHeight="auto" style="    width:80px; padding-top:5px; margin-top:10px;">
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
<option value="6">6</option> 
<option value="7">7</option>
<option value="8">8</option> 
<option value="9">9</option>
<option value="10">10</option> 
<option value="11">11</option> 
<option value="12">12</option>   
  </select>月

</body>

<script type="text/javascript">
function show(){
	var currentMonth = new Date().getMonth();
	var currentYear = new Date().getFullYear();
	 document.getElementById("months").value =currentMonth+1;
	 var year = document.getElementById("years");
	 
	 for (var i = 0; i <= 5; i++) {

	    	var theOption1 = document.createElement("option");
	        
	        
	        theOption1.innerHTML = currentYear-i;

	        theOption1.value = currentYear-i;
	        year.appendChild(theOption1);
	       

	    }
}

</script>

</html>


下面的是网上的例子： 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>  
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

</head>

<body  οnlοad="show()">

  <select class="easyui-combobox" id="years" name="select" panelHeight="auto" style="    width:80px; padding-top:5px; margin-top:10px;">

  </select>年
  <select class="easyui-combobox" id="months" name="select" panelHeight="auto" style="    width:80px; padding-top:5px; margin-top:10px;">
<option value=7>7</option>
  </select>月

</body>

<script type="text/javascript">
function show(){

    var currentYear = new Date().getFullYear();
    var currentMonth = new Date().getMonth();

    var year = document.getElementById("years");
    var month = document.getElementById("months");
    var theOption1 = document.createElement("option");
    var theOption2 = document.createElement("option");
    
    for (var i = 0; i <= 11; i++) {

    	var theOption1 = document.createElement("option");
        var theOption2 = document.createElement("option");
        
        
        theOption1.innerHTML = currentYear-i;

        theOption1.value = currentYear+5-i;
        year.appendChild(theOption1);
        theOption2.innerHTML = currentMonth+4-i;

        theOption2.value = currentMonth+4-i;

        
        month.appendChild(theOption2);

    }
}

</script>

</html>



gghwcf
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
下拉选择时间
01-12
使用的时间选择干货 可直接使用亦可修改使用
下拉框时间显示
weixin_33670786的博客
09-20 73
脚本说明: 把如下代码加入<body>区域中 <FORM> <SELECT NAME="dates" SIZE=1> <SCRIPT LANGUAGE="JavaScript"> //-------------------------------------------- //By mattias.sjoberg@sw...
简洁下拉菜单导航及特效当前时间显示
习惯有你&的博客
12-30 686
不需要任何插件的一个纯jQuery的js下拉菜单导航及滚动的当前时间显示 demo可以直接复制使用： 简洁下拉菜单导航及特效当前时间显示 #jsddm{margin: 0;padding: 0} #jsddm li{float: left;list-style: none;font: 12px Tahoma, Arial} #jsddm li a{
一个简单的时间日期下拉框
简学
10-22 2773
  编辑器为记事本，如下代码 ``` &lt;html&gt; &lt;script&gt; &lt;/script&gt; &lt;body&gt; 年： &lt;select &gt; &lt;script&gt; var a=new Date().getFullYear() for(i=1900;i&lt;a+1;i++)  document.write("&lt;opti
下拉菜单及时间段的获取
weixin_30894583的博客
07-17 160
<!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 runat=...
javascript下拉列表 显示时间
12-02
本文将深入探讨如何使用JavaScript实现一个下拉列表，点击后能以“2011-12-2 星期五”这样的格式显示日期。 首先，我们需要在HTML中创建一个基础的下拉列表。下面是一个简单的示例： ```html ...
下拉列表完全模糊匹配
12-07
在一些交互性强的场景下，为了提高用户体验，常常需要实现下拉列表的模糊匹配功能，即用户在输入框中输入部分文字后，下拉列表会动态显示所有与输入关键字完全匹配的选项。这种功能可以显著减少用户查找所需选项的...
易语言动画框下拉列表
07-23
在这个"易语言动画框下拉列表"的主题中，我们将深入探讨如何在易语言中实现动画框与下拉列表的结合，以及在实际应用中如何构建一个账户列表并将其加入到项目中。 首先，我们来理解"动画框"和"下拉列表"这两个概念。...
jQuery下拉列表框日期选择代码
06-10
在"jQuery下拉列表框日期选择代码"这个场景中，jQuery将用于响应用户的交互，如点击input框，以及控制日期时间选择器的显示和隐藏。 接下来，我们需要创建一个HTML结构，通常包含一个input元素，作为用户触发日期...
邮件下拉列表（自动显示）
06-04
在IT行业中，邮件下拉列表（自动显示）是一种常见的用户界面功能，特别是在Web应用程序和电子邮件客户端中。这种功能能够提供方便快捷的用户体验，允许用户在输入邮件地址时自动完成建议的邮箱域名，节省了手动键入...
日期下拉菜单select
01-31
年月日三级联动下拉菜单 可设置默认值
时间选择的下拉框
06-26
时间选择的下拉框，可以直接使用的，不懂里面有说明，基本都能看懂
下拉列表日期
12-21
jQuery.jSelectDate 0.1 - 下拉列表日期控件 http://www.wathon.com http://www.cnblogs.com/huacn/archive/2008/01/16/jquery_plugin_jSelectDate.html 更新记录： Version 0.2 - 2008-1-24 1.加入了闰年、大小月和二月天数的处理 2.新增一个Span标签的外框，以便于设置样式 3.新增可设置是否在下拉列表后面加入“年、月、日”几个字 Version 0.1 - 2008-1-14 1.基本的功能实现
jquery日期控件（有下拉菜单选择年份）
04-24
这是我修改过的jquery的date_input日期选择控件，可以使用下拉菜单的方式选择年份，除去了原有控件选择年份采用点击方式所带来的烦恼。压缩包内含有代码以及压缩过的js。
js下拉框时间拼接
qq_36521848的博客
03-05 307
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="js/jquery.min.js" type="text/javascript" charset=&q
日期时间下拉框实现的一种方式
Harry_123_的博客
11-03 2578
参考写的时间是类似于2018-11-03 18:40:54的一个字段，前台需要分离开属于哪年哪个季度哪月的下拉选择。 部分主要代码如下，前台是jsp &amp;lt;th&amp;gt; &amp;lt;i title=&quot;筛选&quot; onclick=&quot;query_by_year('year','年份','no')&quot;&amp;gt;&amp;lt;/i&amp;gt; &amp;l
下拉菜单选时间段
Revered_Mars的博客
11-22 3214
客户的奇葩要求: 需要按日期条件查询,日历控件选择开始时间结束时间还嫌麻烦 所以,做了个比较low的下拉框选择几个已经规定好的时间段 效果如下: 结束日期不会超过当前日期,超过当前月份的选项不可选(例如:当前是11月22日,就不可点击十二月,点击11月或者下半年,结束日期都会等于2018-11-22) &lt;html&gt; &lt;body&gt; &lt;select on...
下拉列表，日期选择器，时间选择器，单项选择，多项选择
qq_29481375的博客
04-28 9094
1.下拉列表Spinner 1.1.activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_par
前端代码下拉选择框显示年月日
热门推荐
abcnull 的博客
01-31 2万+
&lt;body&gt; &lt;form name="date"&gt; &lt;select name="year" onchange="selectYear(this.value)"&gt; &lt;option value=""&gt;选择 年&lt;/option&gt; &lt;/select&gt;
vue页面添加选择查询数据月份的下拉列表,支持当前时间往前推一年
最新发布
08-16
在Vue页面中添加选择查询数据月份的下拉列表，支持当前时间往前推一年，可以按照以下步骤进行实现。 首先，在Vue组件的data中定义一个月份列表的数组变量，比如叫做months。接着，在Vue的created生命周期钩子函数中，通过循环遍历，获取当前时间往前推一年的所有月份，并将每个月份的值和显示名称构成一个对象，然后将这个对象添加到months数组中。具体代码如下： ```javascript data() { return { months: [] } }, created() { let currentDate = new Date(); // 获取当前时间 for(let i = 0; i < 12; i++) { // 循环12个月 let month = currentDate.getMonth() - i; // 获取月份 let year = currentDate.getFullYear(); // 获取年份 if(month < 0) { // 如果月份小于0，表示跨年了 month = 12 + month; // 校正月份 year = year - 1; // 年份减一 } let monthValue = year + '-' + (month + 1); // 构造月份值，比如：2022-1 let monthName = year + '年' + (month + 1) + '月'; // 构造月份显示名称，比如：2022年1月 this.months.push({value: monthValue, name: monthName}); // 将月份对象添加到数组中 } }, ``` 接着，在Vue的template中，使用`v-for`指令将months数组进行渲染，生成下拉列表的选项。代码如下： ```html <select> <option value="">请选择查询月份</option> <option v-for="month in months" :value="month.value">{{ month.name }}</option> </select> ``` 最后，你可以根据需要为这个下拉列表添加相应的样式和事件处理逻辑即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值