javascript做按钮日期选择

最新推荐文章于 2023-01-31 15:32:26 发布
最新推荐文章于 2023-01-31 15:32:26 发布
阅读量580 收藏 1
点赞数
分类专栏： web前端 文章标签： javascript input border calendar button html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiadi934/article/details/7931678
版权

以下是jsp代码，其中Calendar.js可以去我的资源下载。效果图如下

日期效果


<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   
    
    <title>门票销售统计</title>
    <script type="text/javascript" src="../resources/Calendar.js"></script>
    <script type="text/javascript">
        var cdr = new Calendar("cdr");
        document.write(cdr);
        cdr.showMoreDay = true;
    </script>
  </head>
 
  <body>
    <table border="0" cellspacing="0" width="100%">
           
            <tr style="height: 50px;">
                <td>
                    设定每页行数：
                    <input type="text" size="3" id="pagesize" name="pagesize" value="" />
                    销售时间：
                    <input type="text" size="18" id="dexecbefore" name="dexecbefore" value="" />
                    
                    <input type="button"
                        style="width: 60px; height: 18px; font-size: 12px; margin: 1px; border: 1px solid #A4B3C8; background-color: #DFE7EF;"
                        value="日期选择" οnclick="cdr.show(this,getObjById('dexecbefore'))" />
                    
                    -
                    <input type="text" size="18" id="dexecafter" name="dexecafter" value="" />
                    
                    <input type="button"
                        style="width: 60px; height: 18px; font-size: 12px; margin: 1px; border: 1px solid #A4B3C8; background-color: #DFE7EF;"
                        value="日期选择" οnclick="cdr.show(this,getObjById('dexecafter'))" />
                </td>
            </tr>                   
    </table>
  </body>
</html>


亡羊补牢丶
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript日期选择功能示例
10-20
在JavaScript中，日期选择功能是常见的用户交互元素，尤其在网页表单或事件预订等场景中。本示例主要展示了如何使用JavaScript创建一个简单的日期选择器，让用户能够选择日期。以下是对这个示例的详细解释： 首先，...
自己整理的一款日历插件Calendar.js
热门推荐
wudinaniya的博客
09-21 1万+
将整理好的Calendar.js放在WebContent或者是webapp下（最好单独建一个文件夹,用来存放js文件）       然后写一个测试页面calendar.html 在Calendar.html页面中引入Calendar.js文件 然后写一个css。即页面中的 table标签选择器。   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt...
日期选择JS脚本
卧龙居
05-14 641
// 日期选择 // By Ziyue(http://www.web-v.com/) var months = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"); var daysInMonth = new Array(31, 28, 31, 30, 31, 3
原生js实现日期选择器插件 简单风格日期选择插件
qq_45830796的博客
05-17 3487
原生js实现日期选择插件 xs-DatePicker ** 效果图 ** ** 简介 通过原生HTML/CSS/JavaScript完成一个日期选择器。 代码如下： ** <!-- 时间：2022-5-17 作者：小宋同学的云 标题：原生js实现日期选择器插件 简单风格日期选择插件 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="
JS日期和时间选择控件
未来软件
04-24 3072
鉴于网上找到的几个日期选择程序有些问题，遂着手重写一个程序，大部分还是借鉴前人的代码，添加了时间选择功能，隐藏会遮挡控件的标签select，object。 开始本想使用window.createPopup()来弹出日历的选择，这样就可以跨过任何标签。 不过做到中途发现用createPopup窗口实现理论上是行不通的： 一是因为不在窗体里单击任何地方都会关闭窗口，而当用下拉框选择年份时，很有可能会单
JS弹出日历控件，选择年、月、日
HappyNale的专栏
08-07 2698
第一步:在HTML页面代码http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" >    日期控件                    //选择日期，传入参数为需要存放日期的控件        function showDate(objName)        { 
input 日期选择功能的javascript代码
10-29
- **关闭按钮或失去焦点自动关闭**：确保用户在选择日期后能够关闭弹出层，可以通过点击关闭按钮或者当输入框失去焦点时自动关闭。 - **日期验证**：确保用户选择的日期有效，例如不能选择超出范围的日期（如未来某...
JavaScript给按钮绑定点击事件（onclick）的方法
10-24
在JavaScript中，为按钮元素绑定点击事件是实现交互式网页的关键步骤。点击事件通常与一个函数关联，当用户点击该按钮时，这个函数会被执行。本文将深入探讨如何使用`onclick`属性以及JavaScript中的事件处理程序来...
jquery编写日期选择器
10-20
在JavaScript代码中，我们可以使用`$("#queding").click()`事件来处理“确定”按钮的点击，然后获取选中的年、月、日，格式化成日期字符串，并将其设置到文本框的值。最后，使用Bootstrap的`modal('hide')`方法关闭...
原生js实现日期选择插件
10-15
【原生JS实现日期选择插件】是一种使用纯JavaScript编写的日期选择功能，不依赖任何外部库，如jQuery。此插件适用于需要在网页中添加日期输入的场景，提供了简单的日期选择界面，允许用户选择一个特定日期，并可以...
周月切换日历，支持农历，节假日显示，上下左右滑动
11-17
公司项目需要用到周月切换日历，然后就根据网上前辈的源码进行了深入定制，可以支持周月切换，上下滑动切换周月，左右滑动切换，支持显示节假日，以及农历显示，日期标记，源码加了大量注释，通俗易懂
JS日期选择控件(超级漂亮的)
05-26
超级漂亮超级专业的JS日期控件，里面是个例子，简单易用
js下拉框选择年月日代码
09-26
js下拉框选择年月日代码
纯js日历,可切换日期
07-25
纯js日历,js代码不到80行,简单,易懂,可以切换时间显示.
js 实现 全面的日期选择功能
03-30
js 实现 全面的日期选择功能! 值得下载看看!资源免费,大家分享!!
【JS】用JS实现系统常见日周月时间按钮切换效果
wan小小冰的博客
09-05 8583
这里的页面样式基于bootstrap.css样式文件，时间控件引用的是datetimepicker.js,如果想详细了解时间控件的操作，可以参考网址http://www.bootcss.com/p/bootstrap-datetimepicker/,本篇文章只简单介绍按钮控件的简单切换，先上效果图： 1.HTML div class="btnDataType pull-lef
用JavaScript 实现日期切换，每次可以向左或者向右切换一周，并且算出切换后的每周的日期...
weixin_42592399的博客
01-31 225
以下是 JavaScript 实现日期切换的代码： function switchDate(date, direction) { const day = 1000 * 60 * 60 * 24; const targetDate = new Date(date.getTime() + (direction === 'left' ? -7 : 7) * day); const weekS...
js时间控件控制可选日期_怎样设计一个更好用的日期选择器？
weixin_39972768的博客
12-24 797
♝点击上方“交互设计学堂”关注我们,送电子书日期选择控件(选择器)是让用户在应用中选择(填入)日期或时间的一类控件，尤其是在B端产品中非常常见。这个控件看似简单，但它的易用性也容易被忽略。碰到需要这个功能时，很多开发者(当然也包括设计师)立即会说，“网上有那么多酷炫的选择器，而且都是开源的，我们找一个合适的就行了，我们没有必要为这个浪费时间……”但是，一切并没有那么简单。大多开源的选择器...
javascript/js点击事件显示日期的效果
月影WEB的博客
04-17 1956
我们先看看JS代码和效果图 代码如下： 按F12预览效果图如下： 点击“显示日期”按钮之后出现的效果图如下： 下面我们来讲解下这个JS： JS部分 <script> function displayDate()//申明一个JS叫做displayDate()的方法 { document.getElementById("yue").innerHTML=Date(); //这段表示从整个文档获取元素里面id样式名字为yue的标签，然后把JS内置时间函数Date
点击按钮的时候显示日期选择器
最新发布
04-04
对于网页上的日期选择器，可以使用HTML5的<input type="date">标签来实现。当用户点击该输入框时，浏览器会自动显示日期选择器。下面是一个示例代码： ``` <!DOCTYPE html> <html> <head> <title>日期选择器示例</title> </head> <body> <label for="date">选择日期：</label> <input type="date" id="date"> </body> </html> ``` 如果需要在按钮点击时弹出日期选择器，则可以将输入框隐藏起来，再将一个按钮与输入框关联。当用户点击按钮时，就可以通过JavaScript代码触发输入框的点击事件，从而弹出日期选择器。下面是一个示例代码： ``` <!DOCTYPE html> <html> <head> <title>按钮触发日期选择器示例</title> <style type="text/css"> #date { display: none; } </style> </head> <body> <button id="btn">选择日期</button> <input type="date" id="date"> <script type="text/javascript"> document.getElementById("btn").addEventListener("click", function() { document.getElementById("date").click(); }); </script> </body> </html> ``` 在这段代码中，我们将输入框隐藏起来，然后在按钮的点击事件中触发输入框的点击事件。这样就可以实现在按钮点击时显示日期选择器的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值