单击同一窗格上的日期选择器元素，而不是日历元素，而是按钮
要实现单击按钮而不是日历元素来选择日期的功能，您可以使用JavaScript来控制日期选择器的行为。以下是一个简单的示例，展示了如何使用HTML、CSS和JavaScript来实现这一功能：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Picker Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="date-picker-container">
<input type="text" id="dateInput" readonly>
<button id="dateButton">Select Date</button>
</div>
<script src="script.js"></script>
</body>
</html>CSS (styles.css)
.date-picker-container {
position: relative;
display: inline-block;
}
#dateInput {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
#dateButton {
padding: 8px 16px;
margin-left: 8px;
border: none;
background-color: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
}
#dateButton:hover {
background-color: #0056b3;
}JavaScript (script.js)
document.addEventListener('DOMContentLoaded', function() {
const dateInput = document.getElementById('dateInput');
const dateButton = document.getElementById('dateButton');
dateButton.addEventListener('click', function() {
// 创建一个日期选择器实例
const datePicker = new Datepicker(dateInput, {
format: 'yyyy-mm-dd',
autohide: true,
clearButton: true,
toggleSelected: false
});
// 手动触发日期选择器的显示
datePicker.show();
});
});解释
- HTML: 创建一个输入框和一个按钮。输入框用于显示选择的日期，按钮用于触发日期选择器。
- CSS: 样式化输入框和按钮，使其看起来更美观。
- JavaScript: 使用
Datepicker库（或其他日期选择器库）来创建日期选择器实例，并在按钮点击时显示日期选择器。
注意事项
- 确保你已经包含了所需的日期选择器库（例如
Datepicker库）。你可以通过CDN引入它： <script src="https://cdn.jsdelivr.net/npm/datepicker@1.0.10/datepicker.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/datepicker@1.0.10/datepicker.min.css">
通过这种方式，用户可以点击按钮来选择日期，而不是直接点击输入框。这样可以提供更好的用户体验，特别是当输入框被禁用或只读时。
相关·内容
3回答
我正在尝试点击第一个"Today“按钮，它会填写日期，参见代码：<button typewidget-content“，如下所示：
我可以使用以下命令打开它：但是尝试点击它是行不通的。
浏览 2提问于2016-09-02得票数 1
回答已采纳
3回答
我刚刚创建了一个简单的textbox，在其中我绑定了.click事件以显示Datepicker，无论如何，似乎一开始单击Datepicker无法显示，但是如果我单击控件外的位置，然后再次单击textbox看看我这里的代码：{
$('#calendar
浏览 2提问于2016-07-31得票数 0
回答已采纳
Im希望在datepicker对象中设置特定日期的样式，但我似乎无法从日历中访问DOM元素。我尝试使用视图子元素，但这只允许我访问选择器元素，而不是在单击选择器时创建的日历。我也尝试过在日期选择器中添加一个面板类，并尝试对其进行选择，但它似乎也不起作用。
理想情况下，我希望每天都应用一个符合特定标准的类。例如，
浏览 0提问于2018-04-10得票数 1
回答已采纳
1回答
日期选择器类已经添加到日期字段类型输入-文本中。此元素显示在类似于标准表的行中，但使用div包装。在每一行上都有一个add按钮，该按钮使用jquery克隆方法(带有事件)创建动态元素，并附加在div包装器中作为最后一个元素集。('.div-item-wrapper').clone(true, true);
$('.div-items-wrapper').append(div_i
浏览 3提问于2022-10-04得票数 0
1回答
我为我的Drupal页面中的一个表单元素使用了datepicker。
我遇到的问题是，在IE6 (在IE7和火狐中测试，它看起来很好)中，日历下面有一个框，里面有false这个词。单击第一个日期选择器时，框的大小与日历的大小相同。当在同一页上单击另一个日期选择器时，false框的大小为原来<e
浏览 2提问于2011-06-08得票数 0
回答已采纳
1回答
我在我的代码中使用了一个本机html5输入日期选择器，到目前为止它对我很好(我只关心铬和边缘)。但是我面临一个问题:我想要一种统一的方式来访问日期选择器，但是我注意到在我的日期选择器中有一个日期选择按钮(伪元素)是不能通过键盘访问的，我试图通过使它的显示为“无”来移除它，但是随后我失去了通过鼠标打开弹出日历的功
浏览 3提问于2021-11-03得票数 2
回答已采纳
我正在开发一个应用程序，在更大的设备上使用双窗格布局，类似于详细的。布局摘要；一个窗格包含选项列表，而另一个窗格将显示从另一个窗格中选择的选项的详细信息。现在，当选择一个选项时，在选择其他元素(按钮、复选框等)时会出现连锁反应，但是在动画完成后，元素会返回到以前的颜色。在动画
浏览 3提问于2014-12-05得票数 5
1回答
我在SwiftUI中有一个SwiftUI，其中左窗格和右窗格显示一个名称列表。左窗格是可选择的，每个选择在右侧窗格中都有自己的列表。左窗格和右窗格都是从类DataProvider的相同类型获取数据。这样做是为了简单，而不是因为这是一个要求。
UI中有一个按钮，为左侧窗
浏览 7提问于2022-06-09得票数 0
回答已采纳
我想知道如何重用我必须在同一个工作表上创建多个日历日期选择器的VBA代码，这些代码将输入不同的单元格。如果您知道如何隐藏可单击图像的代码，直到选定日期的单元格，则奖励点数。代码： frmCalendar.Show因此，基本上，我有一个日历卸载到C18。但是，我希望我的<
浏览 3提问于2015-12-16得票数 1
我使用2 jQueryUI DatePickers来选择开始日期和结束日期。我的要求是必须分别指定开始日期和结束日期，而不是在单个日历上选择日期范围。) { }禁用minDate和maxDate之前的日期比实际
浏览 2提问于2019-01-08得票数 0
回答已采纳
我正在Visual 2015中进行开发，并创建了一个针对WinForm框架4.5.2的.NET应用程序。当我在调试器中运行应用程序并按下日期选择器中的“今天”按钮时，它将填写今天的日期，但不会触发ValueChanged事件。如果单击弹出日历并选择
浏览 8提问于2017-04-26得票数 1
回答已采纳
在开发服务器(使用Eclipse中的Run或Debug按钮)上重新启动很多次之前，我的本地网页似乎不会更新。console)Refresh 更改为.java文件.保存文件运行应用程序(开发服务器加载日志显示在浏览器中的web页面中)
P.S:我唯一能让它工作的方法就是改变服务器端口.如果我这样做，以前所有的服务器仍然显示在它们各自的端口上。
浏览 1提问于2012-02-05得票数 4
回答已采纳
默认情况下，每当选择日期时，HTML日期选择器都会重置日历jQuery。我希望能够更改/添加日历的元素(添加图像，背景等)，并有他们留在一个日期被点击后。例如，此脚本作为内联日期选择器启动，背景为24号蓝色。当您单击另一个日期(例如15日)时，HTML将重置，蓝色背景将消失。我希望它在日期被点击后保持蓝色。ui-state-default:contain
浏览 2提问于2012-05-18得票数 0
回答已采纳
我正在使用FullCalendar作为一个大型的日期选择器，增加了一些功能，并且需要在一年中禁用所有周日和各种其他日期。Jquery UI日期选择器允许您创建禁用日期的方法。
浏览 0提问于2010-03-20得票数 0
我正在使用UI自动化框架，并尝试使用TreeWalker解析我的UI。(我也尝试了建议的解决方案，但没有太大帮助。)
我有一个单一的窗格，其中包含一个子窗格和几个子按钮。他们都在同一层次上，所以我想我们可以称他们为兄弟姐妹。当我使用TreeWalker来解析元素时，我只能“看到”面板--而不是按钮--这是我真正想要的。让我头疼<
浏览 1提问于2013-03-26得票数 2
1回答
我正在尝试重新创建日历应用程序在创建新事件时使用的可折叠日期选择器。我在上举了一个例子来说明我想做什么
简而言之，我创建了一个静态表，添加了三个单元格。第一个单元格用于日期，并包含一个按钮以切换第二个单元格。第二个单元格是日期选择器。第三个单元格是任意的。在代码中，我试图将表格单元格的高度(如果需要的话还有<e
浏览 1提问于2016-10-23得票数 0
回答已采纳
li a").click(function(){ });但这并不是$(this).filter(":even").css("color", "orange");});
我认为在这个上下文中使用$( this )将引用jquery对象，其中包含我的原始<em
浏览 3提问于2013-10-25得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
