datepicker 相关问题

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）...

iOS 设备上 Safari 中的日期输入格式问题

我在 iOS 设备上的 Safari 中遇到了与输入类型“日期”相关的问题。当使用日期类型的输入字段时，Safari 的默认行为是显示日历选择器，其中日期

具有不同区域设置/语言的 macOS 上的内容控件

我使用此代码创建了一个宏，用于在 Mac 上的 Word 文档中插入 DatePicker： 子 AddDatePickerCC_GermanExt() 调暗 oCC 作为内容控件 设置 oCC = ActiveDocument.ContentControl...

Tab 键始终隐藏日期选择器（辅助功能）

<input id="BirthDate.0" name="BirthDate.0" class="input-sm input_mask mask_date form-control hasDatepicker" onchange="updateFieldGrid('UpdateField', this)" style="" value="" type="text" aria-label="Birth Date" size="11" maxlength="10" placeholder="mm/dd/yyyy" autocomplete="off"> $('input[type="text"].hasDatepicker').keydown(function(event) { var target = $(event.target); if(event.keyCode == 9) { if(!target.datepicker("widget").is(":visible")) { target.datepicker("show"); } else { target.datepicker("hide"); } } }); 我被要求使日期选择器更易于访问，IE 用户使用 Tab 键导航到出生日期字段，再次点击 Tab 键，日期选择器打开，他们可以通过键盘按钮导航选择器，他们点击 Tab再次关闭选择器并将焦点转移到下一个表单元素。 上面的代码让日期选择器在点击“tab”键时显示。但是，如果您按两次 Tab 键以将其从同一焦点文本输入字段中隐藏，target.datepicker("widget").is(":visible") 仍会计算为 false。事实上它总是评估为 false。如果我检查不同的按键，例如键码为 65 的“a”键，它确实会在第二次按键时隐藏日期选择器。我已经尝试过event.preventDefault()但这仍然不能解决问题。 在我的一生中，我无法调试为什么会发生这种情况，以及为什么每当我按“tab”时以及激活 keydown 事件处理程序之前它总是隐藏日期选择器。调试器在进入按键处理程序时显示它已经关闭，尽管当我按下该键时它已打开，并且大多数其他键不会发生这种情况。所以我的猜测是在调用 keydown 处理程序之前的上游某个地方它隐藏了日期选择器，但是在哪里？ 编辑： 我在 jquery-ui-1.13.2.min.js 文件中找到了以下代码片段： _doKeyDown: function(a) { var b, c = d.datepicker._getInst(a.target); b = !0; var f = c.dpDiv.is(".ui-datepicker-rtl"); c._keyEvent = !0; if (d.datepicker._datepickerShowing) switch (a.keyCode) { case 9: d.datepicker._hideDatepicker(); b = !1; break; 我将断点设置为基本上隐藏的日期选择器，它正在执行这段代码。它看起来是默认的日期选择器功能，用于隐藏选项卡按键上的日期选择器（键码= 9）。有什么办法可以覆盖这个吗？ 解决方案似乎是覆盖 keydown 事件的所有日期选择器的默认功能，即关闭日期选择器，即使按“tab”键时它已经打开。 这个 stackoverflow 的答案似乎可以解决它： jQuery UI 日期选择器：配置键盘快捷键 虽然 stackoverflow 回答了我的问题，但它的问题与我面临的情况并不太相符，所以是否应该关闭它是值得怀疑的，因为 1）它涉及日期选择器中的键盘快捷键，而我不是根本不关心 2）他们并没有试图覆盖“选项卡”功能。

如何在 antd datepicker 组件的日历模态中放置清除按钮？

我正在使用andt datepicker组件。就我而言，清晰的图标覆盖了日历按钮。 我需要删除清除按钮并允许手动清除。 （但是，据我所知，目前还不能...

联系表格7日期选择器，日期范围在2个日期之间

我希望在我的 WordPress 联系表 7 中有两个日期字段。开始日期和结束日期。这些字段将是“Contact Form 7 Datepicker”插件中的日期选择器。 当访客选择...

如何在 Symfony 表单中添加引导日期时间选择器

我正在尝试在我的 Symfony 表单中使用 http://eonasdan.github.io/bootstrap-datetimepicker/ 。 我补充道： 我正在尝试在我的 Symfony 表单中使用 http://eonasdan.github.io/bootstrap-datetimepicker/。 我补充说： <link type="text/css" rel="stylesheet" href="{{ asset('assets/css/bootstrap-datetimepicker-standalone.min.css') }}"> <link type="text/css" rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}"> <script type="text/javascript" charset="utf8" src="{{ asset('assets/js/jquery-3.1.1.min.js') }}"></script> <script type="text/javascript" charset="utf8" src="{{ asset('assets/js/moment.min.js') }}"></script> <script type="text/javascript" charset="utf8" src="{{ asset('assets/js/bootstrap.min.js') }}"></script> <script type="text/javascript" charset="utf8" src="{{ asset('assets/js/bootstrap-datetimepicker.min.js') }}"></script> 但现在我不知道如何更改我的表单类型以使用日期选择器 我尝试过类似的方法，但不起作用 ->add('date', DateTimeType::class, array( 'required' => true, 'widget' => 'single_text', 'attr' => [ 'class' => 'form-control input-inline datetimepicker', 'data-provide' => 'datetimepicker', 'html5' => false, ], )) 有人可以帮助我吗？ 您应该将 html5 键/值从 attr 移至 options : ->add('date', DateTimeType::class, array( 'required' => true, 'widget' => 'single_text', 'html5' => false, 'attr' => [ 'class' => 'form-control input-inline datetimepicker', 'data-provide' => 'datetimepicker', ], )) 我也面临着同样的问题。 Symfony 中用于日期时间类型的默认表单组件呈现另一组输入字段。 引导方法需要一个“正常”输入字段，其中日期时间呈现为字符串。所以你必须使用TextType::class 为了在实体中使用 DateTime，我添加了一个 EntityTransformer 来处理 sting 和 DateTime 之间的转换以进行读写操作。 你可以这样做： $builder->get( 'from' )->addModelTransformer( new CallbackTransformer( function ( $date ) { return $date->format( 'd.m.Y H:i' ); }, function ( $date ) { return new \DateTime( $date ); } ) ); 我不确定这是唯一的问题，但您可能需要将 DateTimeType::class 更改为 texttype::class。 我希望这能有所帮助！ 祝你好运

bootstrap 3 datepicker禁用像预订表格这样的分钟

我想在预订表格中使用 bootstrap 3 日期选择器。我找到了如何禁用日期（月/日/年），但我无法禁用时间。 ... 我想在预订表格中使用bootstrap 3 datepicker。我找到了如何禁用日期（月/日/年），但我无法禁用时间。 <div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='datetimepicker5'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker5').datetimepicker({ defaultDate: "11/1/2013", disabledDates: [ moment("12/25/2013"), new Date(2013, 11 - 1, 21), "11/22/2013 00:53" ] }); }); </script> </div> </div> 我只想禁用 11/22/2013 00:53 而不是全天 11/22/2013。 我还看到了这个示例，它禁用了 00 分钟，但如果您选择 16:00，则无法将其更改为 16:15。 有人可以帮助我吗？ 我不完全明白你需要什么。根据我得到的信息，你想改变分钟，但以步骤（5,10,15）为单位。为此，您可以使用您传递的链接的类似方法，但无需禁用步骤选择器。 $('.datetimepicker').datetimepicker({ format: 'DD/MM/YY - HH:mm' }).on('dp.show', function () { $('a.btn[data-action="incrementMinutes"], a.btn[data-action="decrementMinutes"]').removeAttr('data-action').attr('disabled', true); }); 笔 但是如果您不想显示分钟，只显示小时，您可以简单地更改时间选择器的格式。并且可以使用 moment.js 中的一些命名约定。如果您的格式类似于“DD/MM/YY - HH”，它只会显示小时。 该解决方案的缺点是选择器变得很奇怪，并且您无法真正知道自己在选择什么。因此，您在链接上提供的解决方案是仅选择时间的最佳方法。 经过很长一段时间后，我不得不在现有项目上使用引导日期时间选择器。所以我找到了stepping选项 stepping: 15 所以这里是 <script type="text/javascript"> $(function () { $('#datetimepicker5').datetimepicker({ defaultDate: one_month, minDate: new Date(), format: 'DD/MM/YYYY HH:mm', stepping: 15 }); }); </script>

Material-Ui DatePicker 更改为字符串

有没有办法让Material-UI DatePicker值成为String而不是Date对象？我只想将 YYYY-MM-DD 作为日期值。现在我正在做的是在将其发送到...之前对其进行编辑

Javascript Pesian DatePicker 计算闰年问题

大家好我希望你能帮助我解决这个问题。我有一个日期选择器，我在项目中多次使用它，它是一个组件。但现在到了波斯新年，我们有1403(Shamsi...