datepicker 相关问题

vanillajs-datepicker 不设置输入值，点击日期时不会触发更改事件

美好的一天 我正在使用这个日期选择器，我喜欢它，但在我单击日期后它不会触发输入上的更改事件。 这是我的代码 我在 jsFiddle 上测试了这个 美好的一天 我正在使用这个日期选择器，我喜欢它，但在我单击日期后它不会触发输入上的更改事件。 这是我的代码 我在 jsFiddle 上测试了这个 <input type="text" name="foo"> const elem = document.querySelector('input[name="foo"]'); const datepicker = new Datepicker(elem, { autohide: true, todayHighlight: true, format: "yyyy-mm-dd", }); elem.addEventListener("change", function (e) { console.log(e.target.value); }); 当我单击日期选择器上的特定日期时，不会触发更改事件。 我需要这方面的帮助。 我还将它与 livewire 和 alpine 一起使用，但单击日期后，甚至没有触发更改。这是我的 Laravel 代码 当我测试 pickaday 时它有效。 我如何解决这个问题或使其即使在 vanillajs datepicker 上也能触发更改。 提前致谢。 您的库不会触发像onchange这样的本机事件，这就是它不起作用的原因。您必须使用库自定义事件来代替 文档中的信息 更改日期 const elem = document.querySelector('input[name="foo"]'); const datepicker = new Datepicker(elem, { autohide: true, todayHighlight: true, format: "yyyy-mm-dd", }); elem.addEventListener("changeDate", function (e) { console.log(e.target.value); }); <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/datepicker.min.css"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/datepicker-full.min.js"></script> <input type="text" name="foo">

自定义日期选择器：如何更改图标图像并单击代码隐藏上的文本框打开弹出窗口？

这是我的自定义日期选择器： 这是我的自定义日期选择器： <customcontrols:CustomDatePicker x:Name="DataCreazione" SelectedDate="{Binding DataCreazione, StringFormat={}{0:dd/MM/yyyy}}" controls:TextBoxHelper.Watermark="Data Creazione" Cursor="Hand" BorderThickness="0" SelectedDateFormat="Short" Margin="0,0,0,0" Grid.ColumnSpan="3" Grid.Row="1" /> 我将此模板应用于后面的代码： using System.Windows; using System.Windows.Controls; using System.Windows.Input; namespace Client.customcontrols { public class CustomDatePicker : DatePicker { public override void OnApplyTemplate() { base.OnApplyTemplate(); if (Template.FindName("PART_TextBox", this) is TextBox textbox) { textbox.IsReadOnly = true; textbox.Cursor = Cursors.Hand; textbox.PreviewMouseLeftButtonDown += PreviewMouseLeftButtonDown_Click; } if (Template.FindName("PART_Button", this) is Button button) { button.Visibility = Visibility.Hidden; } } private void PreviewMouseLeftButtonDown_Click(object sender, System.Windows.Input.MouseButtonEventArgs e) { IsDropDownOpen = true; } } } 我愿意： 而不是隐藏图标，我想更改它的图像（使用PackIconFontAwesome的CalendarAltSolid），大小16x16，边距0,0,8,0 单击文本框后，单击图标具有相同的行为（弹出窗口打开，在我选择日期之前保持打开状态）；相反，使用 PreviewMouseLeftButtonDown，它似乎会保持弹出窗口打开，直到我按下鼠标左键单击，一旦其“向上”，弹出窗口就会消失 你能帮我解决这个问题吗？ 您始终可以为Button定义自定义模板，例如： <customcontrols:CustomDatePicker x:Name="DataCreazione" SelectedDate="{Binding DataCreazione, StringFormat={}{0:dd/MM/yyyy}}" controls:TextBoxHelper.Watermark="Data Creazione" Cursor="Hand" BorderThickness="0" SelectedDateFormat="Short" Margin="0,0,0,0" Grid.ColumnSpan="3" Grid.Row="1" > <customcontrols:CustomDatePicker.Resources> <ControlTemplate x:Key="ButtonTemplate" TargetType="Button"> <Grid Background="Silver"> <iconPacks:PackIconControl Kind="{x:Static iconPacks:PackIconFontAwesomeKind.CalendarAltSolid}" Width="24" Height="24" /> </Grid> </ControlTemplate> </customcontrols:CustomDatePicker.Resources> </customcontrols:CustomDatePicker> if (Template.FindName("PART_Button", this) is Button button) { button.Template = FindResource("ButtonTemplate") as ControlTemplate; }

Mat 日期范围日期选择器显示错误的值 - Angular

Mat 日期范围日期选择器显示错误的值 我需要起始值 2021-02-01T00:00:00.000Z

使用 vue js 2 的日期选择器滚动器

我想创建一个像这张照片一样的日期选择器（使用 vue js 2），这样我就可以 在移动视图中使用它。 在此输入图像描述 谁能帮我 ？ 我试图找到任何包裹，但它有...

如何使用@react-testing-library测试@mui/x-date-pickers

我尝试使用 DatePicker 组件为我的表单编写一个测试。我在最新版本 6.2.0 中使用@mui/x-date-pickers。 当我运行下面的测试时，我收到消息： “测试库元素呃...

在 Rails 中选择带有日期的卡片后更改课程显示

我正在为马术学校开发一个应用程序，以便他们可以组织他们的课程并查看谁预订了课程等等！ 在所有类别的显示中，我创建了帮助用户选择...

点击时 Flowbite 日期选择器不显示

我有一个输入字段，它是一个 Flowbite 日期选择器字段。 然而，当点击时，什么也没有发生...... 我还需要导入js文件吗？ 这是我所拥有的： 导入日期...</desc> <question vote="0"> <p>我有一个输入字段，它是一个 flowbite 日期选择器字段。 然而，当点击时，什么也没有发生...... 我还需要导入js文件吗？</p> <p>这是我所拥有的：</p> <pre><code>&lt;script setup&gt; import Datepicker from &#39;flowbite-datepicker/Datepicker&#39;; document.addEventListener(&#34;DOMContentLoaded&#34;, function () { document.querySelectorAll(&#34;[datepicker]&#34;).forEach(function (datepickerEl) { const d = new Datepicker(datepickerEl); d.setOptions(datepickerOptions); }); }); &lt;/script&gt; </code></pre> <p>在 vue 文件部分：</p> <pre><code>&lt;div class=&#34;relative max-w-sm&#34;&gt; &lt;div class=&#34;absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none&#34;&gt; &lt;svg class=&#34;w-4 h-4 text-gray-500 dark:text-gray-400&#34; aria-hidden=&#34;true&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; fill=&#34;currentColor&#34; viewBox=&#34;0 0 20 20&#34;&gt; &lt;path d=&#34;M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z&#34; /&gt; &lt;/svg&gt; &lt;/div&gt; &lt;input datepicker datepicker-autohide type=&#34;text&#34; class=&#34;bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500&#34; placeholder=&#34;Select date&#34; id=&#34;datepickerEL&#34;&gt; &lt;/div&gt; </code></pre> <p>因此输入字段显示正确。但正如所说，什么也没有发生。我可能错过了这里的一部分代码......</p> </question> <answer tick="false" vote="0"> <p>还没有解决方案，但是，我又向前迈进了一步。</p> <p>问题似乎是模态......</p> <p>当我在“普通”vue 视图中使用日期选择器时，它可以工作。但是，当模态中具有相同的代码时，下拉菜单不起作用。</p> </answer> </body></html>

Persian DatePicker 无法计算 1403 jalali 的正确 FirstDayOfYear

我在我的网络应用程序中使用 ha-datetimepicker。但是对于1403年，一年的第一天不是从星期三开始，而是错误地从星期四开始。显然，问题...

vuetify 3 v-date-picker（type =“month”）在nuxt中不起作用（“vue”：“^3.3.4”，）

“vuetify”：“^3.5.7” "vite-plugin-vuetify": "^2.0.1", "@mdi/font": "^7.4.47", 我想从 ... 中选择并检索 YYYY/MM 格式的数据

Vanilla JS 日期选择器显示小时和分钟

我有一个显示日期选择器的页面，使用 Vanilla JS Datepicker， 如何显示小时和分钟？ const elem = document.querySelector('input[name="foo"]'); const datepicker = new Datep...

如果太早打开，为什么我的 Bootstrap 日期选择器会被重复？

我的代码中有一个日期选择器，当我在所有请求完成之前打开日期选择器时，它会在我的日期选择器下拉列表中添加一个内联日期选择器，这是我的代码 我的代码中有一个日期选择器，当我在所有请求完成之前打开日期选择器时，它会在我的日期选择器下拉列表中添加一个内联日期选择器，这是我的代码 <div class="hand-date-picker mr-3"> @Html.TextBox("InHandDate", "", new { @class = "datepicker", @group = "inhanddate", @data_date_format = HelperMethods.GetDateFormat(), @data_test_selector = "txtInHandDate" }) <span class="icon-calendar" data-time-icon="icon-time" data-date-icon="icon-calendar"></span> </div> 并在课堂上初始化 $("#InHandDate").datepicker({ //@ts-ignore daysOfWeekDisabled: '0,6' }); $("#InHandDate").datepicker('setDaysOfWeekDisabled', [0, 6]) 并在脚本元素中 $(document).ready(function () { let minDate; if ($("input[class='PickUpShipping']").is(":checked")){ $(".CashOnPickup").show(); $("#warehouses-select").css("display", "block"); minDate = '@(HelperMethods.GetDateTime())'; } else { $(".CashOnPickup").hide(); $("#warehouses-select").css("display", "none"); minDate = '@(HelperMethods.GetDateTime().AddDays(1))'; } $("#InHandDate").datepicker('setStartDate', new Date(minDate)) }); $("input[name='ShippingOptions']").on("click", function (ev) { let minDate; if ($(this).data('shippingcode') === 'Pickup') { $(".CashOnPickup").show(); $("#warehouses-select").css("display", "block"); minDate = '@(HelperMethods.GetDateTime())'; } else { $(".CashOnPickup").hide(); $(".CashOnPickup input").prop('checked', false); $("#warehouses-select").css("display", "none"); minDate = '@(HelperMethods.GetDateTime().AddDays(1))'; } $("#InHandDate").datepicker('setStartDate', new Date(minDate)) }); $("input[name='ShippingOptions']").on("change", function (ev) { $("#InHandDate").datepicker('setDate', ""); }); 我尝试用多种方式来阻止它。但到目前为止还没有运气 显然这是因为没有设置 minDate 属性。添加'@minDate =“”' HTML 解决了问题

仅在ios中允许用户从日历中选择非连续日期的日期？

我是日历新手。我有一系列不连续的日期。我想首先选择并突出显示它。并且，未突出显示的部分必须是不可点击的，即用户只能

提交表单后，日期选择器 UI 会因错误而重置

提交表单后，日期选择器 UI 会因错误而重置 var tempDate = new Date(); $('#cal-calibrationDate-req').datepicker({ 开始日期：从开始日期， daysOfWeekDisabled: "2,6,0,1",

DatePicker onchange 事件未在 jQuery 中触发

我有一个按钮和一个文本框。单击按钮日期选择器弹出窗口，用户从日历弹出窗口中选择一个日期，所选日期将填充在文本字段中。 现在我想...

MUI DatePicker 6.19.7 使用 sx 更改所选日期的背景颜色

如何改变箭头所指的颜色元素？使用 sx{} 日期选择器 如何改变箭头所指的颜色元素？使用 sx{} <LocalizationProvider dateAdapter={AdapterDayjs}> <DatePicker className={styles.picker} slotProps={{ day: { sx: { backgroundColor: "red", }, }, }} /> </LocalizationProvider> 添加 sx: { "&.Mui-selected": { backgroundColor: "red", }, 有效，但只有当我点击某个地方，颜色才会改变...... 尝试使用 sx{} 但不知道如何在该元素上执行此操作。我的实现改变了所有日子的颜色，但没有改变选定的颜色。 您还需要定位根选择器类来更改所选日期的背景颜色。 试试这个class： slotProps={{ day: { sx: { '&.MuiPickersDay-root.Mui-selected': { bgcolor: 'red', }, }, }, }}

如何使用 JavaScript 验证日期和时间

如果选择了不正确的日期和/或时间，下面的代码将会显示一个警告框。 我遇到的问题是，如果我选择 25/11/2015 并选择 11:00 它显示“请更改日期或

c# Radzen 日期选择器渲染后抛出错误

我在 blazor 上有一个应用程序。 当我添加 Radzen 日期选择器时 - 我在页面上出现错误 ...

WordPress ContactForm7 日期选择器字段 - 禁用/阻止特定日期？

我目前安装了一个 WordPress 网站，用户可以在其中预订参观我们的设施（我们是一所大学）。我已经使用 ContactForm7 插件在页面中创建了一个表单，访问者可以...

更改react antd DatePicker语言

如何将antd Datepicker语言设置为法语？ 我试过这个： 从“反应”导入反应； 从“react-dom”导入ReactDOM； 导入“antd/dist/antd.css”； 导入&...

如何在同一组件上应用多个 MAT_DATE_FORMATS

我有一个包含许多日期输入的组件。除其中一个外，所有这些都将使用标准格式 (MM/DD/YYYY)。我读到这里，这帮助我弄清楚如何获取我想要的自定义格式（MM/YYYY）...