datepicker 相关问题

datepicker是许多框架中的用户界面元素,允许用户通常通过可视日历选择日期,在某些情况下还可以选择时间。

检查两个 MUI 日期选择器的值并显示/隐藏另一个组件

我有两个带有开始日期和结束日期的日期选择器 我有两个带有开始日期和结束日期的日期选择器 <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}> <DatePicker sx={{ flex: 1, minWidth: "150px" }} label="Start day" onAccept={handleStartDateChanged} /> <DatePicker sx={{ flex: 1, minWidth: "150px" }} label="End day" onAccept={handleEndDateChanged} /> </Box> {periodSet ? ( <Capacity timelineStart={startDate} timelineEnd={endDate} /> ) : null} const [startDate, setStartDate] = useState(null); const [endDate, setEndDate] = useState(null); const [periodSet, setPeriodSet] = useState(false); const handleStartDateChanged = (e) => { setStartDate(e); setPeriodSet(startDate && endDate); console.log(periodSet); }; const handleEndDateChanged = (e) => { setEndDate(e); setPeriodSet(startDate && endDate); console.log(periodSet); }; 当为两者选择一个日期时,我想显示一个在该特定时间段获取数据的组件。 我已经在努力解决这个组件的显示和隐藏问题。选择两个日期后,该组件不会显示。您需要第三个选择来显示该组件。 我认为这是由于在设置 startDate 之前对 endDate 和 periodSet 的异步设置不完整造成的。状态更改完成时是否有某种回调?或者是否有一些更优雅的方式,例如绑定或类似的方式?或者更好地使用像 useEffect 这样的钩子或其他什么?抱歉,如果这个问题有点愚蠢。我对 React 很陌生 我尝试了不同的事情,比如尝试回调,但行为并不符合预期 setStartDate((e) => { setPeriodSet(startDate && endDate); }); 您不需要为此声明。只是常规变量 const periodSet = Boolean(startData && endDate)

回答 1 投票 0

Windows 与 Linux 中的 Selenium(为日期选择器添加值)

最主要的是我尝试向日期字段添加日期,这非常简单: 使用 .send_keys("01/01/1990") 查找元素 / 但问题是在 Windows 中一切正常 - a...

回答 1 投票 0

fancybox 中的 jqueryUI datepicker 不起作用

我有这个奇怪的问题。当我将带有 datepicker 类的输入放入 fyncybox 包装中时,当我单击该输入时,datepicker 不会显示。 打开<...

回答 3 投票 0

更改 DatePicker [Xamarin.Forms] 的颜色

有没有办法在显示日历视图时更改 DatePicker 控件的背景颜色? 请检查随附的屏幕截图。

回答 2 投票 0

如何在Android中剪切(删除或隐藏或缩小)Material dateRangePicker(Dialog)的header_title?

我想删除顶部的空间 我的风格主题(stackOverFlow 的用户回答在这里) 我的代码 有趣的 clickDatePicker() { setTheme(R.style.AppTheme_MaterailComponent) val local = 区域设置...

回答 3 投票 0

角度材料中的多选日期范围

Angular 中多日期范围选择器的实现,类似于react-multi-date

回答 1 投票 0

在 Odoo 日期选择器中禁用以前的日期

我想限制用户从odoo-8的日期选择器中选择之前的日期。请告诉我如何在 odoo datepicker 中禁用以前的日期

回答 2 投票 0

ant design 日期选择器版本 5 中如何使用 Jalali 日期

我正在使用 ant design 版本 5,我想使用日期选择器。我如何将 Jalaliday 与 ant design 版本 5 一起使用。根据我的最新信息,有 antd-jalali 用于此目的,但我想它...

回答 1 投票 0

带有日期选择器的 Livewire 活动

我有以下 Livewire 组件视图代码,我在其中使用 startDate 和 endDate 调度事件, 我可以在仪表板中获得正确的数据,但问题是一旦在调度后发生重新渲染,

回答 1 投票 0

更改日期选择器 Swift UI 上的标签颜色

所以我想更改我的日期选择器(WheelDatePickerStyle)标签颜色,当前默认为绿色我想更改为黄色已经尝试了几个属性,如accentColor,但不起作用。 谢谢...

回答 1 投票 0

Angular getLocaleFirstDayOfWeek('en-FR') 返回 0(星期日)作为一周的开始日,而对于 en-NL 则返回 1(星期一)

我需要根据区域设置显示一周的开始日期并自定义日期选择器以显示工作日。由于 NativeAdaptor 始终返回星期日作为一周的开始日,因此自定义适配器...

回答 1 投票 0

React DatePicker - 点击月份之外的日期和日历自动关闭,不能不选择结束日期吗?

React DatePicker - 点击月份之外的日期和日历自动关闭,不能不选择结束日期吗? 当我点击 April 30 时,React DatePicker 自动关闭。我不选择结束日期。 输入图片

回答 1 投票 0

更改 Material UI 选择器上的工作日标签

我正在使用 Material UI DatePicker,它将工作日显示为其首字母(M、T、W、T、F、S、S)。我希望它显示为每个工作日的三个字母首字母缩写(周一、周二、周三...

回答 2 投票 0

jQuery 日期选择器范围在悬停时突出显示

我想突出显示悬停时两个日期之间的范围。我设法让它工作,但只能选择。 beforeShowDay: 函数(日期) { var date1 = $.datepicker.parseDate($.datepicker._defa...

回答 1 投票 0

Angular 材料日期选择器:日期解析 UTC 问题 1 天前

我知道有几个关于此问题的线程,我阅读了所有这些线程,但好几天都无法解决此问题。我可能找到了一个解决方案,但它似乎对我来说很脏。 所以和其他用户一样,我也有同样的问题

回答 4 投票 0

为什么它无法识别日期选择器上的任何选择?

我正在尝试用没有预订预约的时间填充选择下拉列表,现在我遇到了日期选择器的一些非常愚蠢的事情,因为我希望它被填充...

回答 1 投票 0

Datepicker:模态上的日期选择器(z-index)

今天,当我尝试在 Bootstrap Modal 上显示日期选择器时,我遇到了这个问题。 我使用 bootstrap-datepicker 作为日期选择器库。 这是我的模式形式: <... 今天当我尝试在 Bootstrap Modal 上显示日期选择器时遇到这个问题。 我使用 bootstrap-datepicker 作为日期选择器库。 这是我的模式形式: <div class="form-group"> <label for="message-text" class="control-label">Start Date</label> <div class="input-group date"> <div class="input-group-addon"> <i class="fa fa-calendar"></i> </div> <input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date"> </div> </div> 这是我的日期选择器脚本: $('#datepicker2').datepicker({ autoclose: true, format: 'yyyy-mm-dd', zIndexOffset: 10000 }); 我已经使用了 zIndexOffset 但它不起作用,日历仍然显示在模式后面。 有人可以建议解决方案吗? 谢谢你。 您应该尝试在模式中添加日期选择器容器div。你可以给模态一个 id,如下所示: <div class="form-group" id="myModalWithDatePicker"> <label for="start_date" class="control-label">Start Date</label> <div class="input-group date"> <div class="input-group-addon"> <i class="fa fa-calendar"></i> </div> <input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date"> </div> </div> 然后您可以使用 container 选项,如下所示: $('#datepicker2').datepicker({ autoclose: true, container: '#myModalWithDatePicker', format: 'yyyy-mm-dd' }); 我使用此选项来修复。 .modal-open .ui-datepicker{z-index: 2000!important} 此选项已在模态打开时应用(类 modal-open 添加到主体) 这对我来说很好用...只需添加样式 <style> /* style sici */ .datepicker { z-index: 1600 !important; } </style>

回答 3 投票 0

jQuery 日期选择器 - 设置当前日期

HTML JavaScript $( 函数() { $( "#datepicker" ).datepicker({ 日期格式: 'mm-dd-yy', 最短日期:...</desc> <question vote="1"> <p><strong>HTML</strong></p> <pre><code>&lt;input type=&#34;text&#34; id=&#34;datepicker&#34;&gt; </code></pre> <p><strong>javaScript</strong></p> <pre><code>&lt;script&gt; $( function() { $( &#34;#datepicker&#34; ).datepicker({ dateFormat: &#39;mm-dd-yy&#39;, minDate: &#34;today&#34;, maxDate: &#34;+30d&#34;, setDate: &#34;+1d&#34; }); }); &lt;/script&gt; </code></pre> <p><strong>回复:</strong></p> <p><a href="https://i.stack.imgur.com/oIsji.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL29Jc2ppLnBuZw==" alt=""/></a></p> <p><strong>选择当前日期的预期响应:</strong></p> <p><a href="https://i.stack.imgur.com/6kmg5.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tLzZrbWc1LnBuZw==" alt=""/></a></p> </question> <answer tick="true" vote="1"> <p><pre><code>setDate</code></pre>是你的朋友。 <pre><code>&#34;setDate&#34;, &#34;0&#34;</code></pre> 是今天的日期。您可以根据需要增加和减少数量。</p> <p><pre><code>$(&#34;#datepicker&#34;).datepicker(&#34;setDate&#34;, &#34;1&#34;);</code></pre></p> <p>示例:</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>$(function() { $(&#34;#datepicker&#34;).datepicker({ dateFormat: &#39;mm-dd-yy&#39;, minDate: &#34;today&#34;, maxDate: &#34;+30d&#34;, }); $(&#34;#datepicker&#34;).datepicker(&#34;setDate&#34;, &#34;1&#34;); });</code></pre> <pre><code>&lt;link href=&#34;https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css&#34; rel=&#34;stylesheet&#34;/&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://code.jquery.com/ui/1.13.0-rc.2/jquery-ui.min.js&#34;&gt;&lt;/script&gt; &lt;input type=&#34;text&#34; id=&#34;datepicker&#34;&gt;</code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>$(function() { $(&#34;#datepicker&#34;).datepicker({ dateFormat: &#39;dd-mm-yy&#39;, minDate: &#34;today&#34;, maxDate: &#34;+30d&#34;, }); $(&#34;#datepicker&#34;).datepicker(&#34;setDate&#34;, &#34;1&#34;); });</code></pre> <pre><code>&lt;link href=&#34;https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css&#34; rel=&#34;stylesheet&#34;/&gt; &lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://code.jquery.com/ui/1.13.0-rc.2/jquery-ui.min.js&#34;&gt;&lt;/script&gt; &lt;input type=&#34;text&#34; id=&#34;datepicker&#34;&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

回答 0 投票 0

如何在flutter中选择多个日期

我想从日期选择器中选择多个日期(不是范围)。实际上,在我的应用程序中,我添加了一个研讨会,该研讨会将在多天举办,例如 6 月 1 日、6 月 7 日、6 月 9 日。所以我想添加添加多个...

回答 4 投票 0

格式为 MM.yyyy 的 Angular 日期选择器想要选择日期

我想使用只接受月份和年份的日期选择器。根据 Angular Materials,我构建了一个函数,该函数应该在选择月份后关闭日期选择器 - 这样就不会出现任何一天...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.