datepicker 相关问题

使用 Selenium/Java 在输入中调出日历选择器<type=date>

React JS MUI Datepicker 奇怪的红色边框

在我的reactJS应用程序中，我设置了一些日期选择器，一切正常。 在自定义页面中，我有另一个日期选择器，我看到它周围有一个奇怪的红色边框： 代码是： 在我的reactJS应用程序中，我设置了一些日期选择器，一切正常。 在自定义页面中，我有另一个日期选择器，我看到它周围有一个奇怪的红色边框： 代码是： <DatePicker disableFuture style={{ width: "90%", border: "1px solid black" }} inputFormat="yyyy-MM-dd" renderInput={(params) => <TextField fullWidth {...params} />} value={props.value} fullWidth onMouseDown={(e) => e.stopPropagation()} onChange={(e) => props.handleChangeComponentValue(props.id, e.target.value) } onBlur={(e) => props.handleBlurComponent(props.id, e.target.value)} /> 用 chrome 检查它，我发现样式来自 <fieldset aria-hidden="true" class="sc-gKseQn jzeLFY MuiOutlinedInput-notchedOutline-SmBCs dwFpjw MuiOutlinedInput-notchedOutline"> <legend class="sc-iBPTik gOBiIn"> <span class="notranslate">&ZeroWidthSpace;</span> </legend> </fieldset> 特别是： .hiztcv.Mui-error .MuiOutlinedInput-notchedOutline { border-color: #f44336; } 我没有设置它的任何类，并且我的项目中没有设置该颜色。 我错过了什么吗？ 要解决此问题，我们可以在日期选择器组件中应用 slotProps。 访问 https://mui.com/x/react-date-pickers/custom-components/ <LocalizationProvider dateAdapter={AdapterDayjs}> <DatePicker slotProps={{ textField: { size: "small" error: false, }, }} value={value || dayjs(field.value)} onChange={field.onChange} /> </LocalizationProvider>; 我也面临同样的问题。当我将 console.log 参数传入 renderInput 属性时，我看到它的默认属性为 error:true。 所以你可以这样修复它： <DatePicker ... renderInput={(params) => <TextField {...params} error={false} />} ... /> 我有同样的情况，问题出在日期的初始值上。这是一个空字符串，DatePicker 将其解释为无效日期，因此我将初始值更改为 undefined，现在它默认为今天的日期，并且没有错误状态。 当您在单个页面中同时使用两个材质 UI 数据选择器组件时，会出现此行为。有两种方法可以解决此问题 一种是覆盖CSS 另一种是通过设置 error={false} 的默认值 1.覆盖CSS <div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-error MuiInputBase-formControl MuiInputBase-adornedEnd css-1bn53lx"><input aria-invalid="true" id=":r1m:" placeholder="mm/dd/yyyy" type="tel" class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd css-1uvydh2" value=""><div class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-1nvf7g0"><button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeMedium css-slyssw" tabindex="0" type="button" aria-label="Choose date"><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="CalendarIcon"><path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"></path></svg><span class="MuiTouchRipple-root css-w0pj6f"></span></button></div><fieldset aria-hidden="true" class="MuiOutlinedInput-notchedOutline css-igs3ac"><legend class="css-ihdtdm"><span class="notranslate">​</span></legend></fieldset></div> 上面的代码有 Mui-error 类，它负责显示红线。您可以尝试覆盖它。 在参数之后使用 renderInput 组件时，默认传递 error={false} } ... /> 问题是初始值不应该是空字符串，而是null，请参阅作者的信息https://github.com/mui/mui-x/issues/10274 接受的解决方案会导致即使用户没有填写任何日期，日期也始终被视为有效的问题...

角度材料日期选择器验证

我正在努力向日期选择器添加验证。 这是一个 stackblitz 链接。你可以看到代码库 我的日期选择器应该只允许 DD MMM YYYY 格式。它不应该允许 DD-MM-YY、DD/MM/YY...

jQuery datepicker - 如何覆盖初始化？

我在我的项目中使用 jQuery datepicker 的全局初始化 - 它几乎是这样的代码： $('body').find(".datepicker").datepicker({dateFormat: 'yy-mm-dd'}); 但对于某些页面，...

更改角度材质datePicker图标

我想知道是否可以更改使用角度材料的datePicker显示的图标。 这是角度材料文档中的代码。 我想知道是否可以更改使用 Angular Material 的 datePicker 显示的图标。 这是角度材料文档中的代码。 <md-input-container> <input mdInput [mdDatepicker]="picker" placeholder="Choose a date"> <button mdSuffix [mdDatepickerToggle]="picker"></button> </md-input-container> <md-datepicker #picker></md-datepicker> 有办法实现吗？ 您可以在 mat-datepicker-toggle 中添加 mat-icon 自定义 <input matInput [matDatepicker]="dp" placeholder="Select minimum date" disabled> <mat-datepicker-toggle matSuffix [for]="dp"> <mat-icon matDatepickerToggleIcon>arrow_drop_down</mat-icon> </mat-datepicker-toggle> <mat-datepicker #dp disabled="false"></mat-datepicker> 您可以通过覆盖 background 类的 mat-datepicker-toggle 属性来做到这一点。添加您想要的 asset 文件夹中的图标路径。 以下是在 calender 中将 alert.png 图标替换为 src > asset > img 图标的示例： >>> .mat-datepicker-toggle { background: url("../../assets/img/alert-circle-24.png") no-repeat !important; } html: <md-input-container align="end"> <input mdInput [mdDatepicker]="datepicker" [(ngModel)]="date"> <button mdSuffix [mdDatepickerToggle]="datepicker"></button> </md-input-container> 您可以在 中添加您自己的图像 <mat-datepicker-toggle matSuffix (click)="openCalendar()"> <mat-icon matDatepickerToggleIcon> <img src={{imageSource}}> </mat-icon> </mat-datepicker-toggle> 您可以使用 svg 来自定义图标，如下所示： <mat-form-field style="width: 100%; margin-top: 16px;"> <mat-label style="font-size: 16px;">Date</mat-label> <input matInput [matDatepicker]="protocolIssueDate" formControlName="protocolIssueDate"> <mat-datepicker-toggle matSuffix [for]="protocolIssueDate"> <mat-icon matDatepickerToggleIcon> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7 4L9 4V6L15 6V4L17 4V6L20 6V14H18V8L6 8L6 18H14V20H4L4 6H7V4Z" fill="black" fill-opacity="0.38"/> <path d="M10 12V10H8V12H10Z" fill="black" fill-opacity="0.38"/> <path d="M14 10L12 10V12L14 12V10Z" fill="black" fill-opacity="0.38"/> <path d="M10 16V14L8 14V16L10 16Z" fill="black" fill-opacity="0.38"/> </svg> </mat-icon> </mat-datepicker-toggle> <mat-datepicker #protocolIssueDate startView="month" [startAt]="startProtocolIssueDate"></mat-datepicker> </mat-form-field> 检查这个https://stackblitz.com/edit/angular-ivy-xc5wkd?file=src%2Fapp%2Fapp.component.ts 在 Material 图标字体之外自定义图标，这种方法对于开发人员来说将更加可重用且清晰。 <mat-form-field class="custom-mat-form-field" appearance="fill"> <mat-label>Choose a date 1</mat-label> <input matInput [matDatepicker]="picker1" /> <mat-hint>MM/DD/YYYY</mat-hint> <mat-datepicker-toggle matSuffix [for]="picker1"> <!-- this icon is outside of Material icons font --> <mat-icon svgIcon="date_check_in" matDatepickerToggleIcon></mat-icon> <!-- you can check how do this in the link above --> </mat-datepicker-toggle> <mat-datepicker #picker1></mat-datepicker> 结果： 角度13 matDatepickerToggleIcon 解决方案对我不起作用，因为我想要一个自定义图标。我必须使用 CSS： .mat-datetimepicker-toggle, .mat-datepicker-toggle { .mat-icon { background-image: url('../../assets/images/calendar.svg'); background-position: 5px 2px; background-repeat: no-repeat; svg { display: none; } } }

DatePicker AngularJS

... <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 mb-2"> <mat-form-field class="example-full-width" appearance="outline"> <mat-label>Follow up Consultation</mat-label> <input matInput [matDatepicker]="picker" formControlName="consultationDate"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> 这是我的代码，我正在开发一个与医疗相关的角度应用程序。当我从日历图标中选择日期时，它会选择确切的日期。但是当我单击继续订单按钮时，我看到的日期是一天后的日期我选择的日期。 如何解决这个问题 您为实现日期选择器所做的一切看起来都不错。 在处理日期时，无法获取确切的日期/日期时间是一个常见的误解。问题可能出在您将传入日期过滤到组件/服务中的方式。 这个问题已经有答案了。 希望您可以在这里找到答案：https://stackoverflow.com/a/66105308/8681915

Plotly Dash 日期选择器范围显示在输入下方

我正在 Python 中使用 Plotly Dash 构建一个仪表板，并在布局上添加了日期选择器范围输入。当我打开日期选择器时，问题就出现了，日历显示了一些下面的输入......

自定义 WPF DatePickerTextBox 模板

我尝试在 DatePicker 控件中使用自定义 TextBox，但无法将日期从弹出日历绑定到 TextBox。我不想设计整个 DatePicker 的样式，除非我......

更改 WPF DatePicker 文本框的外观

更改WPF DatePicker 的Foreground 属性确实会更改文本框中文本的颜色，但更改Background 属性不会更改。但您可以通过设置包含的样式来更改它

有没有办法使用库比蒂诺日期选择器更改书面日期？

当前日期已写在文本按钮中。当你按下它时，会弹出一个CupertinoDatePicker，但是我想当我更改CupertinoDatePick中的日期时立即更改写入的日期...

JQuery Date.parse函数实现

我正在使用jquery的daterangepicker组件。当我将日期传递为“Jan 2011”时，jquery 的 Date.parse() 函数会给出一些奇怪的输出。以下是不同用例的示例输出：...

无法在 React Tailwind Datepicker 上获取浅色主题。有什么解决办法吗？

如何更改React Tailwind Datepicker的颜色主题 如何更改 React Tailwind Datepicker 的颜色主题 <Datepicker asSingle={true} containerClassName="relative mt-8 bg-gray-100" displayFormat={"DD/MM/YYYY"} // maxDate={new Date()} minDate={new Date()} primaryColor={"green"} // startFrom={minDate()} useRange={false} value={value} onChange={handleValueChange} />; Npm 包： npm i react-tailwindcss-datepicker 我想获取浅色主题，但也无法通过控制台获取CSS。 页面链接：https://react-tailwindcss-datepicker.vercel.app/theming-options 没有用于将默认深色主题更改为浅色主题的代码片段。 面临同样的问题，在文档中没有找到任何内容。如果您在应用程序中仅使用浅色主题，请执行此解决方法。 转到 tailwind.config.js 并将其放入 darkMode: "" 像这样 export default { darkMode: '', ...restOptions } 更新：来自官方文档的一些信息： 手动切换深色模式

我想在这个程序中选择两个日期，如果我尝试执行它会显示datepicker不是一个函数

我想在这个程序中选择两个日期，如果我尝试执行它会显示： 日期选择器不是一个函数 代码： var 开始日期； $("#validFrom").datetimepicker({ ...

一行中的多个表单字段是否具有良好的可访问性？

我理解应该避免使用多列表单，以及为什么它不利于可用性和可访问性。我的问题是关于将 2-3 个连接的表单元素彼此相邻放置。例如...

react-tailwindcss-datepicker 的错误

我已经使用 tailwindcss 一段时间了，而且总是很高兴。但我目前面临着react-tailwindcss-datepicker 的重大问题。在空项目中，日期选择器按预期工作，但是......

基于 JXDatePicker 的 TableCellEditor 在选择日期后不会消失，并且永远不会为 TableCellRenderer 方法提供途径

我有一个像这样的TableCellEditor： 导入 javax.swing.*; 导入 javax.swing.event.CellEditorListener; 导入 javax.swing.table.TableCellEditor; 导入 javax.swing.table.TableCellRenderer; 导入j...

jQuery 日期选择器不会重置禁用的日期

jQuery UI 日期选择器 1.13.2 我需要根据从下拉列表中选择的选项来重置禁用天数。 我初始化日期选择器，然后当“selectChange”被触发时，我检索...

laravel datepicker：如何加载 jquery 图标

我是laravel的新手，我正在尝试在页面上添加一个日期选择器， 这是我的标记： 我是 Laravel 新手，我正在尝试在页面上添加日期选择器， 这是我的标记： <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> </head> <body> <<div style="display:table-cell;width:50%"> <input class="date_picker_icon" name="ddl_date"></input> </div> </body> 这是我的脚本部分： <script> $( function() { $("#datepicker" ).datepicker({ changeMonth: true, changeYear: true }); } ); formNextReviewDate(); function formNextReviewDate(){ let field = $("[name='ddl_date']"); field.datepicker({ dateFormat: 'yy-mm-dd' , }); field.datepicker('option', 'dateFormat', 'yy-mm-dd'); } </script> </html> 页面结果如下图： 问题是，当我想更改月份时，有空格而不是图标，并且我想在选择日期之前在框中添加“dd/mm/yy”。你能帮我解决一下吗？非常感谢！ “我想在选择日期之前在框中添加‘dd/mm/yy’。” - 要实现此目的，您可以使用占位符，如下所示： <div style="display:table-cell;width:50%"> <input class="date_picker_icon" name="ddl_date" placeholder="dd/mm/yy"></input> </div> 要显示 jQuery UI 图标，您必须包含 jQuery UI 主题。如果您尚未执行此操作，请在 HTML 文档的 部分中包含指向 jQuery UI 主题的链接： <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 还要确保在脚本之前以正确的顺序加载 jQuery 和 jQuery UI。这是一个例子： <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 此外，您还初始化了日期选择器两次，这是没有必要的： $(function() { formNextReviewDate(); function formNextReviewDate(){ let field = $("[name='ddl_date']"); field.datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true }); } });

laravel datepicker：如何添加更改月份点击的图标

我是laravel的新手，我正在尝试在页面上添加一个日期选择器， 这是我的标记： < 我是 Laravel 新手，我正在尝试在页面上添加日期选择器， 这是我的标记： <<div style="display:table-cell;width:50%"> <input class="date_picker_icon" name="ddl_date"></input> </div> 这是我的脚本部分： <script> $( function() { $("#datepicker" ).datepicker({ changeMonth: true, changeYear: true }); } ); formNextReviewDate(); function formNextReviewDate(){ let field = $("[name='ddl_date']"); field.datepicker({ dateFormat: 'yy-mm-dd' , }); field.datepicker('option', 'dateFormat', 'yy-mm-dd'); } 页面结果如下图： 问题是，当我想更改月份时，有空格而不是图标，并且我想在选择日期之前在框中添加“dd/mm/yy”。你能帮我解决一下吗？非常感谢！ “我想在选择日期之前在框中添加‘dd/mm/yy’。” - 要实现此目的，您可以使用占位符，如下所示： <div style="display:table-cell;width:50%"> <input class="date_picker_icon" name="ddl_date" placeholder="dd/mm/yy"></input> </div> 要显示 jQuery UI 图标，您必须包含 jQuery UI 主题。如果您尚未执行此操作，请在 HTML 文档的 部分中包含指向 jQuery UI 主题的链接： <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 还要确保在脚本之前以正确的顺序加载 jQuery 和 jQuery UI。这是一个例子： <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 此外，您还初始化了日期选择器两次，这是没有必要的： $(function() { formNextReviewDate(); function formNextReviewDate(){ let field = $("[name='ddl_date']"); field.datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true }); } });

更改 DatePicker 列的顺序

问题在于 DatePicker 微调器会根据区域设置更改其列的顺序（dd、mm、yy）。我想冻结任何区域的一个订单。 我试过 绑定.datePicker.resources.configuration.