一个jQuery UI插件,允许用户选择日期范围。
Jquery / Daterangepicker 问题,仅允许通过“应用按钮”更改日期
我使用Jquery daterangepicker, 如果用户没有单击“应用”按钮,我想取消设置日期的选项。 现在,当用户单击 daterangepicker 框外时,日期...
@ngui/自动完成和 ng2-daterangepicker 与 Angular 16 不兼容
我已将我的 Angular 项目从 v11 更新到 v16。我在我的项目中使用 @ngui/auto-complete 和 ng2-daterangepicker 。我在导入 NguiAutoCompleteModule 和 Daterangepicker modu 时遇到错误...
如何使用 rsuite 中的 DateRangePicker 将数据存储到变量中?
我正在尝试使用 rsuite 中的 DateRangePicker 将日期范围存储到数组中。现在我的应用程序按预期工作,但我在 Typescript 中仍然遇到一些错误。我该如何做这件事...
如何使用 Typescript 将数据存储到 rsuite 中的 DateRangePicker 变量中?
我正在尝试使用 rsuite 中的 DateRangePicker 将日期范围存储到数组中。现在我的应用程序按预期工作,但我仍然在 Typescript 中遇到一些错误。我该怎么做这个正确...
如何使用日期范围选择器设置我的图表?我使用 Laravel 框架
我会将数据值设置到图表中。但我不知道怎么办。我想根据指定的日期将从/load-pendapatan获取的值输入到图表中。 p...时的默认值
我在我的应用程序中使用了以下代码作为日期选择器。 使用了 daterangepicker 插件。 https://jsfiddle.net/jkenluv/z9tgdh7k/ 超文本标记语言 我在我的应用程序中使用了以下代码作为日期选择器。 使用了 daterangepicker 插件。 https://jsfiddle.net/jkenluv/z9tgdh7k/ HTML <input class="form-control input-lg" id="tripOne" name="tripOne" /> JS: var nowDate = new Date(); var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0); var maxLimitDate = new Date(nowDate.getFullYear() + 1, nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0); $('input[name="tripOne"]').daterangepicker({ "autoApply": true, "autoUpdateInput": false, "singleDatePicker": true, "minDate": today, "maxDate": maxLimitDate, "opens": "left", "locale": { format: 'DD MMM YYYY' } }, function (start, end) { $("#tripOne").val(start.format('DD MMM YYYY')); $('#tripOne').parent().parent().removeClass('has-error'); }); $(function() { $('.calendar.right').show(); }); 但是,我无法选择“今天的日期”或“已选择的日期”。这对于我们的要求是强制性的。请告诉我如何解决这个问题? 谢谢 谢谢 不是最漂亮的解决方案,但您可以更改 daterangepicker.js 并删除“隐藏”方法中的以下行: if (!this.startDate.isSame(this.oldStartDate) || !this.endDate.isSame(this.oldEndDate)) 它可以工作,但你永远无法更新 daterangepicker.js。最好重写 hide 方法。 请阅读文档 如果您使用日期范围作为过滤器,您可能需要附加一个 选择器到输入,但默认将其留空。这个例子显示 如何使用 autoUpdateInput 设置来实现这一点,以及 apply 和 cancel 事件。 因此,您可以删除 autoUpdateInput 线,也可以将其设置为 true。 "autoUpdateInput": false, 或 "autoUpdateInput": true, var nowDate = new Date(); var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0); var maxLimitDate = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate()+360, 0, 0, 0, 0); $('input[name="tripOne"]').daterangepicker({ "autoApply": true, "autoUpdateInput": false, "singleDatePicker": true, "minDate": today, "maxDate": maxLimitDate, "locale": { format: 'DD MMM YYYY' } },function(start) { $("#tripOne").val(start.format('DD MMM YYYY')); $('#tripOne').parent().parent().removeClass('has-error'); setTimeout(function(){ $('.daterangepicker').addClass('returnTripEndDatePicker'); $('.departure--date').hide(); $(".returnTripEndDatePicker").prepend("<div class='departure--date'>Select Return Date</div>"); $( "#tripTwo" ).focus(); },120); var returnTripStartDate = new Date(Date.parse(start)); $(function() { $('.calendar.right').show(); }); }); $('input[name="tripTwo"]').daterangepicker({ "autoApply": true, "autoUpdateInput": false, "singleDatePicker": true, "minDate": today, "maxDate": maxLimitDate, "locale": { format: 'DD MMM YYYY' } },function(end) { $("#tripTwo").val(end.format('DD MMM YYYY')); $('#tripTwo').parent().parent().removeClass('has-error'); }); $('input[name="tripOne"]').on('apply.daterangepicker', function(ev, picker) { $(this).val(picker.startDate.format('DD MMM YYYY')); }); $('input[name="tripTwo"]').on('apply.daterangepicker', function(ev, picker) { $(this).val(picker.startDate.format('DD MMM YYYY')); }); 做 $("element1").datetimepicker({ maxDate: moment.endOf( 'day' ) }) $("element2").datetimepicker({ maxDate: moment.endOf( 'day' ) }) 如果您使用 minDate 则执行相反的操作 $("element1").datetimepicker({ minDate: moment.startOf( 'day' ) }) $("element2").datetimepicker({ minDate: moment.startOf( 'day' ) }) 在 daterangepicker 初始化后添加以下函数: $('input[name="tripOne"]').on('apply.daterangepicker', function (ev, picker) { $(this).val(picker.startDate.format('DD MMM YYYY')); }); 以下代码可用于修复问题并保持原始脚本可更新,或从 CDN 加载它: drpDecorator($('input[class="date-input"]').daterangepicker({ singleDatePicker: true, minYear: 1950, maxYear: parseInt(moment().format('YYYY'), 10), autoApply: true, autoUpdateInput: false, "showDropdowns": false, locale: { firstDay: 1, cancelLabel: 'Reset', format: 'MM/DD/YY' } }, function (chosen_date) { $(this)[0].element.val(chosen_date.format('MM/DD/YY')); }) ) function drpDecorator($dateInput) { if ($dateInput.length === 0) { return } const drp = $dateInput.data("daterangepicker"); drp.hide = function (e) { if (!this.isShowing) return; //incomplete date selection, revert to last values if (!this.endDate) { this.startDate = this.oldStartDate.clone(); this.endDate = this.oldEndDate.clone(); } this.callback(this.startDate.clone(), this.endDate.clone(), this.chosenLabel); //if picker is attached to a text input, update it this.updateElement(); $(document).off('.daterangepicker'); $(window).off('.daterangepicker'); this.container.hide(); this.element.trigger('hide.daterangepicker', this); this.isShowing = false; } } https://jsfiddle.net/pwd5sLvf/ 我也有同样的问题。您需要编辑 daterangepicker.js 源代码。最好的解决方案是定义取消和应用之间的区别。为此,我从 hide 方法中删除了以下代码并将其粘贴到 clickApply 方法中。为了正确操作 autoApply 并单击当前日期,我添加了对空控制值的检查。 //incomplete date selection, revert to last values if (!this.endDate) { this.startDate = this.oldStartDate.clone(); this.endDate = this.oldEndDate.clone(); } //if a new date range was selected, invoke the user callback function if (!this.startDate.isSame(this.oldStartDate) || ($(this.element).is(':text') && $(this.element).val() === '' || !this.endDate.isSame(this.oldEndDate)) this.callback(this.startDate.clone(), this.endDate.clone(), this.chosenLabel); //if picker is attached to a text input, update it this.updateElement();
如何禁用日期范围选择器默认值?我使用 daterangepicker 创建基于日期范围的房产可用性过滤器功能。在这里,我创建了这样的代码,但问题是......
在使用 mat-date-range-picker-actions 之前获取选定的日期值
我有一个日期范围选择器。如何在关闭日历之前获取选定的日期。我尝试了 dateInput、dateChanges,但是如果我的代码中有 mat-date-range-picker-actions,我只能得到值...
我正在使用 https://easepick.com 日期范围选择器。 我正在寻找这样的事件,其中事件可以在打开日期范围选择器时触发,并且在关闭范围选择器时也可以触发。 如果我能找到...
我构建了一个包含月份范围的表单。我正在使用 daterangepicker bootstrap 来做到这一点。例如从一月到四月,但我无法仅使用 viewMode: 'months' 显示月视图,或者可能是那里......
如何安装和使用 locale 到 vanilla js 日期范围选择器?
我正在使用 vanilla js 日期选择器。我想将其显示的月份名称设置为不同的语言。 我有一个带有名称的对象,但我不知道如何使其工作。 具有名称的对象...
我在我的应用程序中使用 daterangepicker 库。一旦使用离开 daterangepicker 容器区域,我想触发 daterangepicker 的内部方法 .hide() 。我的代码看起来像这样。 我在我的应用程序中使用 daterangepicker 库。一旦使用离开 daterangepicker 容器区域,我想触发 daterangepicker 的内部方法 .hide() 。我的代码看起来像这样。 <body class="visual-sandbox"> <div class="visual-rangepicker"> <div id="reportrange" class="report-range"> <div class="calendar-icon"> <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> </div> <span></span> <b class="caret caret-dropdown"></b> </div> </div> </body> $("#reportrange").daterangepicker( { startDate: start, endDate: end, opens: 'left', ranges: { // new Date(2017, 11, 1) Today: [moment(new Date()), moment(new Date())], Yesterday: [ moment(new Date()).subtract(1, "days"), moment(new Date()).subtract(1, "days") ], "Last 7 Days": [moment(new Date()).subtract(6, "days"), moment(new Date())], "Last 30 Days": [moment(new Date()).subtract(29, "days"), moment(new Date())], "This Month": [moment(new Date()).startOf("month"), moment(new Date()).endOf("month")], "Last Month": [ moment(new Date()) .subtract(1, "month") .startOf("month"), moment(new Date()) .subtract(1, "month") .endOf("month") ], "Last Year": [ moment(new Date()) .subtract(1, "year") .startOf("year"), moment(new Date()) .subtract(1, "year") .endOf("year"), ] } }, cb ).on; cb(start, end); 现在假设 #reportrange 包含区域是 body 标签。我想应用类似这个函数的东西并关闭当前打开的日期范围选择器。 $('body').on('mouseleave', function(){ $('#reportrange').trigger('hide.daterangepicker'); //it doesn't work. }); 一个简单的解决方案,例如。 $('body').on('mouseleave', function(){ $('#reportrange').hide(); }); 可以工作并隐藏该特定区域,但用户必须单击两次才能再次打开该日期范围选择器。由于第一次单击再次关闭选择器(切换),第二次单击打开它。 要正确理解它,如果你去这个 JSFiddle https://jsfiddle.net/rg7fh1a8/ 现在,如果用户将鼠标悬停在其区域之外,我想关闭此日期范围选择器。 我知道已经有一个被接受的答案,但我认为这也可能很有用,因为它使用 daterangepicker 的本机隐藏功能而不是模拟单击取消按钮: $(function(){ $('.daterangepicker').mouseleave(function(){ $('#reportrange').data('daterangepicker').hide(); }); }); 此解决方案在日期范围选择器中找到取消按钮并以编程方式单击它。它假设 daterangepicker 库正在使用当前版本分配给其控件的默认类。这些类名是通过使用 chrome 开发工具检查渲染的 HTML 中 daterangepicker 的元素找到的。 避免将 onmouseleave 放在主体本身上(除非您将 on 与选择器一起使用)。我已将其附加到本示例中的类中。 $(function() { $('#reportrange').daterangepicker(); }); function init() { $('.daterangepicker').on("mouseleave", function() { $(this).find('.cancelBtn').click() }); } $(init); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" /> <div class="visual-rangepicker"> <input id="reportrange" value="01/01/2015 - 01/31/2015"> </div> $('--DIV ID--').data('daterangepicker').hide(); $('#reportrange').data('daterangepicker').hide(); // 更改为隐藏状态 $('#reportrange').daterangepicker(); // 更改为隐藏状态并重置选项 在日期范围选择器可用 hide.daterangepicker 事件中。前往 http://www.daterangepicker.com/#events,勾选隐藏事件。
我正在使用jquery的daterangepicker组件。当我将日期传递为“Jan 2011”时,jquery 的 Date.parse() 函数会给出一些奇怪的输出。以下是不同用例的示例输出:...
我正在使用 daterangepicker 来选择日期范围。虽然一切正常,但呈现以选择日期的日历 ui 不会以正确的顺序显示日期。 这是...的图像
jquery daterangepicker:绑定到 ajax 成功元素
如何将 daterangepicker 重新绑定到 ajax 成功调用产生的 HTML 元素?我尝试了很多方法,但都没有用。本质上,我正在调用一个 ajax 调用来加载一个 html cont...
Android Studio - 在 TextView 上显示来自 dateRangePicker 的选定日期
有谁知道如何在 TextView 上显示来自 dateRangePicker 的选定日期?一旦用户从对话框中选择了日期,此函数应该显示选定的日期范围。 这是我的鳕鱼...
从星期一而不是星期日开始 antd RangePicker(日期选择器)周
我正在使用 antd RangePicker 来获取日期的开始和结束值。我的日历从星期天开始,但我想从星期一开始 在此处输入图像描述 我已经尝试过这个解决方案但没有...
如何在 Ant design 中更改 RangePicker 中的文本颜色?
我目前正在使用 antd 包中的 Range Picker,它有一个 style 属性可以帮助我修改样式,但是我无法更改文本颜色,有没有办法呢? 从'mome导入时刻......
如何在打开时选择空输入字段和当前日期和时间来实现单个日期范围选择器?
$('input[name="f_date"]').daterangepicker({ 语言环境:{ 格式:'YYYY-MM-DD HH:mm:ss' }, singleDatePicker: 是的, showDropdowns:真,
我得到这个“Uncaught TypeError: $(...).daterangepicker is not a function”
我在我的 VUEJS 应用程序中尝试使用 daterangepicker 时遇到问题,我已经使用 NPM 安装了 momnet、jquery、jquery-ui 和 daterangepicker 库,但我仍然收到错误。 这个我...