取消时重置daterangepicker.js日期值
基础概念
daterangepicker.js 是一个用于在网页上显示日期选择范围的 JavaScript 库。它允许用户选择一个日期范围，并提供了丰富的配置选项来定制日期选择器的样式和行为。
相关优势
- 灵活性：支持多种日期格式和语言。
- 自定义：可以通过配置选项高度自定义日期选择器的外观和行为。
- 集成性：易于与其他 JavaScript 库和框架集成。
- 响应式：自动适应不同的屏幕尺寸。
类型
daterangepicker.js 主要支持以下几种类型的日期选择：
- 单日选择
- 日期范围选择
- 多日期选择
应用场景
- 日历应用
- 项目管理工具
- 数据分析平台
- 任何需要日期选择的网页应用
取消时重置日期值
当用户取消日期选择时，通常希望将日期选择器的值重置为初始状态。以下是如何实现这一功能的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Daterangepicker Example</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
</head>
<body>
<input type="text" id="daterangepicker" />
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
$(document).ready(function() {
var initialDate = new Date();
$('#daterangepicker').daterangepicker({
startDate: initialDate,
endDate: initialDate,
autoApply: false,
locale: {
cancelLabel: 'Reset'
}
});
$('#daterangepicker').on('cancel.daterangepicker', function(ev, picker) {
picker.startDate = initialDate;
picker.endDate = initialDate;
picker.update();
});
});
</script>
</body>
</html>解释
- 初始化日期选择器：使用
$('#daterangepicker').daterangepicker()初始化日期选择器，并设置初始日期。 - 监听取消事件：使用
$('#daterangepicker').on('cancel.daterangepicker', function(ev, picker) {...})监听取消事件。 - 重置日期值：在取消事件的处理函数中，将
picker.startDate和picker.endDate设置为初始日期，并调用picker.update()更新日期选择器的显示。
参考链接
通过上述方法，当用户取消日期选择时，日期选择器的值将被重置为初始状态。
相关·内容
我正在使用 Dangrossman 的日期范围选择器，我基本上需要做的是在单击取消按钮时清除日期。根据我所读到的内容，在脚本中无法调用此操作，但我已经读到，我基本上可以销毁并重新创建日期范围选择器，但是我在实现代码时遇到了困难。 这是我到目前为止所拥有的。任何帮助都将不胜感激。
浏览 90提问于2018-12-02得票数 2
回答已采纳
单击后，即可设置这些值。现在如何将窗体重置为初始状态。是否有像$(".daterangepicker").reset()这样的单行代码来重置整个日历。在网站上没有找到任何与此相关的例子。
浏览 65提问于2017-02-02得票数 4
我使用了Eonasdan/bootstrap-datetimepicker版本: 4.17.47，现在解释一下当我从文本框中打开引导-日期选择器时，我有一个清晰的按钮单击，我有一个明确的值，但是当我要回去打开日期选择器时，它以前选择的日期显示，就像突出显示的一样。所以问题是日期选择器没有重置，我想重置那个日期时间选择器，在取消点击外部JavaScript调用。
我在下面有用，但它们都不起作
浏览 3提问于2017-05-04得票数 2
我需要一个特定的节点类型来在发布后3个月自动取消发布，但是，即使用户取消发布和重新发布节点，取消发布的日期也必须保持不变，除非日期被传递，在这种情况下，它应该重新启动。每当计时器重置时，应将通知发送给管理员，并且计划取消发布的日期应由管理员编辑。不用说，对于任何当前模块来说，这都太复杂了，当我想到编写一个模块时，我不知道如何使用drupal来调度cron，也不知道如何创建管理设置接口来处理未发布日期
浏览 0提问于2012-10-18得票数 2
回答已采纳
当我打印原始df_crypto时，它在数据帧中显示了正确的值，但是一旦我将它连接到df_stocks上，它就会以Nan作为值。当连接两个数据帧时，我尝试使用.reset_index(drop=True)作为两个数据帧，这确实允许我查看数据(而不仅仅是Nan)。但是，重置索引可以消除日期，并且取消了仅在密码和股票都打开时(而不是周末)显示数据的“内部”联接方法。当我没有重置指数时，内部联接只显示了这两种资产交易的日子的
浏览 8提问于2022-05-04得票数 0
1回答
我在表单字段中使用moment.js计算了30天的限制，其中我使用daterangepicker.js来选择日期。我已经禁用了从当前日期开始的所有以前的日期，以及从当前日期开始计算的30天之后的所有日期。在“一年”国家遭到袭击之前，一切都很顺利。我的日期计算使用moment.js进行得很好，但随着年份的变化，一切都中断了。每当我将2020年改为2021年时，每一个日期都会成为残疾。就像我今天想发布一些东西(22/12
浏览 7提问于2020-12-22得票数 0
回答已采纳
我需要在TDateTimePicker.OnChangeEvent对日期变更做出反应。显示对话框，如“未保存的更改将丢失”与按钮OK，取消。如果用户按下“取消”按钮，我要重置原日期。不幸的是，我不能改变那个事件的日期。改变被忽视了。更详细的描述：
我显示MessageDialog，如果用户按下“取消”
浏览 1提问于2013-03-14得票数 0
我正在使用日期范围选择器 <input class="form-control input-daterange-datepicker" type="text" name="daterange" value="01/01/2015 - 31/01/2015" /> 当我发布表单时，我得到了这个范围的1个值。有没有可能得到两个值- from和values (当我发布的时候)？ <
浏览 8提问于2019-05-20得票数 1
回答已采纳
筛选选择需要警告用户他们将要更改select，如果他们取消，则将值重置为前一个。
i连接到正确的事件吗？ OnBlur事件重新触发更改事件。如果小部件在我重置值时仍然集中，并且您单击小部件之外的任何位置，它将再次触发onchange事件。我想防止这种情况发生。是否有一种方法来设置值，但在模糊输入时防止onChange触发？TLDR:将filteringSelect重置为旧值，并使用确认对话框取消小部件的焦点。
浏览 1提问于2012-03-15得票数 0
回答已采纳
1回答
我的网页上有以下表格：我使用以下代码获取字段的值：我的问题是，输入字段的值一直未定义，直到输入字段的每个部分都填写完毕，包括小时、分钟、秒和AM/PM。我希望能够从表单中得到一个值，只要选择的年份就足够了。
我该怎么做呢？我很乐意将未
浏览 2提问于2014-10-28得票数 12
回答已采纳
5回答
我正在使用Formik，并在下面的设置中，当用户按下“取消”按钮时，我希望能够重置表单。在返回到表单时，所有表单值都应该重置为initialValues，这些值都是空值。setMenu("Home") />
在将一些文本输入表单字段并按下“取消”按钮(该按钮将我引导回主页)之后，我返回到表单
浏览 3提问于2021-06-26得票数 2
3回答
重置日期范围约束
、、
我有一组4个日期选择器，它们都是相互依赖的。例如，在Datepicker A中选择日期会导致Datepicker B a.s.o.的有效日期范围发生变化。但真正的问题来了:用户从输入栏中手动删除日期后，我没有“重置”logik的钩子。取消以前应用于日期选择器B的限制。onSelect不会被触发，但据我所知，其他任何东西也不会被触发。重置逻辑的唯一方法是在datepicker输入字段上放置一个模糊侦听器，该字段每次都会检查该值是否为空？
浏览 3提问于2011-03-17得票数 2
回答已采纳
当用户单击“取消”按钮时，我想重置复选框的值。有没有一种方法可以将ngFor和NgModel结合起来，以便将值重置？我正在尝试将*ngFor使用的对象设置为早期版本。button" (click)="cancel()">Cancel</button>cancel(){}
值确实重置
浏览 0提问于2018-07-03得票数 1
回答已采纳
我需要对授权值进行年度重置，但重置点对于每个人来说是不同的日期。一个人在开始日期后6个月获得授权，因此+6个月日期是他们应该重置的日期。我是否可以衡量一下，如果我们超过了+6个月日期(DD/MM(年份无关紧要，我只需要每年相同的时间))，那么它将从+6个月日期中取消他们的权利，并且不会从+6个月重置之前的任何天数中恢复？例如，如果+6个月是2015年3月1日，目前它花费了
浏览 9提问于2020-02-12得票数 0
1回答
我有一个单一的页面反应应用程序与一个简单的登录形式与两个按钮，LOGIN和BACK。如果我单击BACK LastPass仍然提供保存输入的用户名/密码，即使我没有登录。HTML看起来如下所示：<button type="submit">LOGIN</button>
<button>BACK</but
浏览 0提问于2018-06-14得票数 0
回答已采纳
3回答
我正在我的窗体加载事件中尝试此操作cmdCancel.Attributes.Add("onClick", "document.forms[0].reset();return false;")但这并不能清除我的表格。我的表单是一个"ContentPage"，是母版页的一部分。
浏览 11提问于2008-11-04得票数 1
回答已采纳
有没有办法在react-admin窗体中有一个按钮，这样当我单击该按钮时，这些值就会被重置为编辑记录的初始值？ 我指的不是取消按钮(这将关闭表单并重定向)。我指的是一个重置为初始值的按钮，它将放弃上次保存后所做的任何更改。
浏览 20提问于2019-10-16得票数 1
回答已采纳
但是，当我将数字重置为它们的原始值时，我希望滑块句柄重置到它们原来的位置。这将意味着滑块的外观将与重置后的顶部图片相同。但是，它们并不是，这是我的滑块在我试图重置时的样子。
当单击按钮时，我重置我的值，。此按钮的onClick分配一个操作，将min和max值(文本中的值)设置为其默认值。这是我的滑块onChange调用的同一个分配器。我还调用了一个disp
浏览 3提问于2020-11-26得票数 2
1回答
我正在工作的引导日期选择器，我有一个重置和提交按钮的日期选择器。我想对datepicker.When上的一个按钮实现重置按钮功能。用户从日历中选择新的日期范围，然后单击重置按钮，以前(最初)选择的值应该突出显示，新选择的值应该清除。请找到代码演示
最初，当在选择日期字段中单击时，会打开一个日历，其中日期04/23/2017作为开始日期，日期06
浏览 3提问于2017-06-08得票数 1
如果在对话框中选中了复选框，则属性值将设置为1，并显示选项卡。取消选择时，该值将重置为0，并且选项卡处于隐藏状态。cancel按钮在我的自定义对话框中触发"dialogcancel“mxevent，但当我选中一个复选框，然后单击cancel按钮时，该值不会重置为0，并且会显示应该隐藏的选项卡。default="true" id="showtabs_2" label="Cancel"
浏览 20提问于2020-06-04得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
