datepicker 相关问题

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

当我选择第三个日期时,日期范围不会很快为零

我使用爱彼迎的地平线日历,问题是当我点击超出范围的日期时,我无法将 selectedDateRange 设置为零。在这个日期选择逻辑中我错过了什么? .days { 天中 日景(

回答 1 投票 0

输入点击时打开 html5 日期选择器

默认情况下,单击图标时会打开日期选择器。 现在,我希望单击输入字段时出现日期选择器。 我可以通过将图标放大到 100% 宽度来实现这一点,但我不能......

回答 2 投票 0

无法使用 Angular Material 日期范围日期过滤器

我正在尝试使用 Angular Material 中的新日期范围选择器,我需要过滤掉某些特定日期(最小和最大在这里对我没有帮助)。 我之前用过“matDatepickerFilter”...

回答 1 投票 0

在Flutter中,有没有办法改变showDatePicker的输入颜色

创建DatePicker时,它使用了我整个项目的主题。在我的项目的其余部分中,输入的文本颜色为白色。使用 DatePicker 时,我可以选择一个日期(废话)或...

回答 1 投票 0

如何自定义移动屏幕的 MUI 日期选择器大小?

我在 React 应用程序中使用 Material-UI (MUI) 中的 DesktopDateTimePicker 组件。该组件专为桌面使用而设计,不太适合移动屏幕。 我愿意

回答 1 投票 0

React 原生 DatePicker 提供 android 错误

我有一个无法理解的错误,因为该错误仅发生在 Android 上 这是错误: 错误类型错误:无法读取未设置的属性“日历” 该错误位于: 在

回答 1 投票 0

无法在 Joy UI CssVarsProvider 包装器中使用 MUI X 日期选择器组件

每当我尝试在任何组件中使用 DatePicker 组件时都会出现崩溃错误。 包.json “依赖项”:{ "@emotion/react": "^11.11.4", “@情感/

回答 1 投票 0

两个jquery日期选择器表之间的填充

我需要在 jquery 日期选择器内的两个表之间留出间距,作为通用标题。我尝试了各种解决方案,例如为父 div 提供填充,但我无法解决它。任何人都可以吗

回答 2 投票 0

在MUI中设置“DD/MM/YYYY”格式

在我的 MUI 表单中,我使用 DatePicker 来选择用户离开和返回的日期。但是当我使用 .toLocaleDateString() 时,它以 mm-dd-yyyy 格式设置日期。但我想将它们设置为 dd-mm-...

回答 4 投票 0

ReactJS Ant Design - 单击按钮时打开 DatePicker

我正在使用 ReactJS 的 ant 设计框架,我试图找到一种在单击按钮时打开 DatePicker 的解决方案,但这对于框架组件来说似乎是不可能的,我尝试使用

回答 3 投票 0

NgbDatepicker 天数名称移位一天

我的日期选择器中的天数偏移了 1 天。星期一说星期日,依此类推...... 我更改了“firstDayOfWeek”属性,它随着错误而移动。 我将应用程序本地化为“es”...

回答 1 投票 0

Next JS 用户模态中 Shadcn 日历组件的日期选择问题

我在使用自定义日历组件的模式中遇到日期选择问题。这是我的设置: 我有一个 UserModal 组件,我在其中使用 React-hook-form 进行表单管理和 zo...

回答 1 投票 0

Android DatePicker 标题不改变颜色(.Net Maui)

我创建了一个具有 Android DatePicker 的 .Net Maui 应用程序。在目录 Platforms/Android/Resources 中,我有两个文件夹 value 和 value-night 用于 Android DatePicke 的 styles.xml...

回答 1 投票 0

colorAccent 对 Android DatePicker 深色模式 (.Net Maui) 没有影响

我创建了一个具有 Android DatePicker 的 .Net Maui 应用程序。在目录 Platforms/Android/Resources 中,我有两个文件夹 value 和 value-night 用于 Android DatePicke 的 styles.xml...

回答 1 投票 0

使用时区更改 javascript 日期

我正在使用Vue并且我有这个vue2-date-range-picker 我正在使用 Vue,我有这个 vue2-date-range-picker <date-range-picker ref="picker" :class="[dateHasChanges ? 'daterange-picker-highlighted' : '']" :opens="opens" :ranges="ranges" :always-show-calendars="true" :auto-apply="true" value-type="timestamp" data-testid="filter-form-date-range-picker" v-model="dateRange"> <template v-slot:input="picker" style="min-width: 350px;"> {{ getDateRangeInputLabel(picker) }} </template> </date-range-picker> 我添加了一些自定义范围与时刻: ranges: { 'All Time': [null, null], 'Today': [moment().tz('America/Los_Angeles').startOf('day').format('MM/DD/YYYY HH:mm:ss'), moment().tz('America/Los_Angeles').endOf('day').format('MM/DD/YYYY HH:mm:ss')], 'Yesterday': [window.moment().subtract(1, 'day')._d, window.moment().subtract(1, 'day')._d], 'This Week': [window.moment().startOf('week')._d, window.moment().endOf('week')._d], 'This Month': [window.moment().startOf('month')._d, window.moment().endOf('month')._d], 'Last 7 Days': [window.moment().subtract(7, 'day')._d, window.moment()._d], 'Last 300 Days': [window.moment().subtract(30, 'day')._d, window.moment()._d], 'Last 3 Months': [window.moment().subtract(3, 'month')._d, window.moment()._d], 'Custom Range': [window.moment().subtract(1, 'day')._d, window.moment()._d] }, 问题如下,我需要设置带有日期和时间的时区,但该组件不允许字符串,只允许对象,当我使用 .toDate() 解析时,我的时区会更改为本地时区。 我需要这个: moment().tz('美国/洛杉矶').startOf('日').format('MM/DD/YYYY 时:分:秒') 我也尝试这个 moment().tz('美国/洛杉矶').startOf('day').toDate() 无论你在哪里,我都想采用自定义时区,因为如果我选择今天:我想看到 07/10/2024 00:00:00 - 07/10/2024 23:59:59 尝试格式化并显示此道具属性在此处输入图像描述

回答 1 投票 0

symfony Admin lte 捆绑个性化日期类型表单

我在 symfony 5 上使用 kevinPast adminLte 包。每个日期类型都有自己的格式(dd-MM-YYYY),并且您无法通过编写 'format' => 'yyyy-MM 来以正常方式更新它-dd' 在表格内...

回答 1 投票 0

使用easepick插件选择日期范围时的回调

我正在使用 easypick 插件为我的用户提供选择日期范围的方法。但是,当选择数据范围时,我很难触发事件。谁能帮忙解决一下...

回答 3 投票 0

如何动态更改日期选择器(WPF、C#)的字符串格式?

我有这个日期选择器元素: 我有这个日期选择器元素: <DatePicker Name="DataSelected" Grid.Column="1" Grid.Row="2" SelectedDate="{Binding DataSelected, Mode=TwoWay}" CalendarOpened="DatePicker_Opened"> <DatePicker.Resources> <Style TargetType="DatePickerTextBox"> <Setter Property="Control.Template"> <Setter.Value> <ControlTemplate> <TextBox x:Name="PART_TextBox" Text="{Binding Path=SelectedDate, RelativeSource={RelativeSource AncestorType={x:Type DatePicker}}, StringFormat={x:Static local:MyView.DateFormat}}" /> </ControlTemplate> </Setter.Value> </Setter> </Style> </DatePicker.Resources> </DatePicker> 现在基于 DateFormat 变量的值(可以是“yyyy”或“MM-yyyy”或“dd-MM-yyyy”)我想更改日期选择器的格式。因为我希望用户能够在 DateFormat 为“yyyy”时仅选择/查看年份,或者在变量为“MM-yyyy”时仅选择/查看年份和月份,依此类推。我怎样才能做到这一点? (我的代码是C#) (对于任何语法错误,我很抱歉,英语不是我的母语) 正如此处评论中所讨论的,我用来“动态”更改文本框的 StringFormat 的代码。其中 DecimalPlaces 是我用来触发更改的整数 <TextBox> <TextBox.Style> <Style TargetType="TextBox" BasedOn="{StaticResource TextBoxTemplate}"> <Setter Property="Text" Value="{Binding CurrentPosition, StringFormat=F3}"></Setter> <Style.Triggers> <DataTrigger Binding="{Binding DecimalPlaces}" Value="0"> <Setter Property="Text" Value="{Binding CurrentPosition , StringFormat=F0}"></Setter> </DataTrigger> <DataTrigger Binding="{Binding DecimalPlaces}" Value="1"> <Setter Property="Text" Value="{Binding CurrentPosition, StringFormat=F1}"></Setter> </DataTrigger> <DataTrigger Binding="{Binding DecimalPlaces}" Value="2"> <Setter Property="Text" Value="{Binding CurrentPosition, StringFormat=F2}"></Setter> </DataTrigger> </Style.Triggers> </Style> </TextBox.Style> </TextBox>

回答 1 投票 0

Angular Material 10 日期选择器(mat-datepicker)与其他输入字段不对齐

使用Angular 10和Angular Material 10,在表单中使用日期选择器与其他输入表单字段不对齐,如下图:字段未对齐 ~component.html 中的示例代码: 使用 Angular 10 和 Angular Material 10,在表单中使用日期选择器与其他输入表单字段不对齐,如下图所示:字段未对齐 ~component.html 中的示例代码: <mat-form-field color="primary" appearance="fill"> <mat-label>Data Da</mat-label> <input matInput [matDatepicker]="picker1" [(ngModel)]="dataDa"> <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle> <mat-datepicker #picker1 color="primary"></mat-datepicker> </mat-form-field> <mat-form-field class="example-form-field" appearance="fill"> <mat-label>Ora Da</mat-label> <input matInput type="text" [(ngModel)]="oraDa"> </mat-form-field> 您尝试后是否也遇到同样的问题? 这似乎是一个错误。 我找到了这个解决方案: 在 ~component.scss 文件中我放置了这个 css 规则: ::ng-deep mat-datepicker-toggle.mat-datepicker-toggle button.mat-focus-indicator.mat-icon-button.mat-button-base { display: inherit; } 我遇到了同样的问题,它似乎与在 dom 中渲染时的项目对齐有关,我解决了应用以下规则: .mat-form-field.custom-class-name { .mat-form-field-wrapper { .mat-form-field-flex { align-items: normal; } } }

回答 2 投票 0

隐藏角度日期选择器输入中的秒数

我正在使用角度日期选择器,我想隐藏输入框中的秒数 我正在使用角度日期选择器,我想隐藏输入框中的秒数 <mat-form-field class="input-ff transparent-bg no-warning underline-prefix"> <mat-label >{{ 'EstimatedArrivalTime' | translate }}</mat-label> <mat-icon matPrefix class="fill-underline">info</mat-icon> <input matInput [ngxMatDatetimePicker]="picker" [(ngModel)]="formattedEDTA" (dateChange)="dateChanged($event)" /> <mat-hint style="color: black;">DD/MM/YYYY HH:mm</mat-hint> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <ngx-mat-datetime-picker #picker [showSpinners]="true" [showSeconds]="false" [pickerType]="'calendar'" [startView]="'month'" [dateFormat]="'DD/MM/YYYY HH:mm'" [stepHour]="1"> </ngx-mat-datetime-picker> </mat-form-field> <span style="color: red;">- {{formattedEDTA}} -</span> 然后在我的ts中 private _selectedData; formattedEDTA: string; set selectedData(value: any) { this_selectedData= value; this.formattedEDTA = this.formatDate(value.EDTA); } get selectedData(): any { return this._selectedData; } formatDate(date: Date | moment.Moment): string { return moment(date).isValid() ? moment(date).format('DD/MM/YYYY HH:mm') : ''; } dateChanged(event: any): void { if (event.value) { this._selectedData.EDTA = event.value; this.formattedEDTA = this.formatDate(event.value); } } 最初它在输入中没有显示任何值,但在跨度值中存在formattedEDTA 27/06/2024 23:37 当我更改日期时,它在日期输入中显示19/06/2024, 00:00:00,但在跨度中它显示19/06/2024 00:00 我错过了什么吗?输入日期框中的日期也应该是正确的 更新1 我在我的模块中尝试过这样的 export const CUSTOM_DATE_FORMATS: NgxMatDateFormats = { parse: { dateInput: 'DD/MM/YYYY HH:mm', }, display: { dateInput: 'DD/MM/YYYY HH:mm', monthYearLabel: 'MMM YYYY', dateA11yLabel: 'LL', monthYearA11yLabel: 'MMMM YYYY', }, }; 以及我的提供商 providers: [ MatIconRegistry, DatePipe, MatDatepickerModule, NgxMatDatetimePickerModule, { provide: LOCALE_ID, useValue: 'sv', }, { provide: LOCALE_ID, useValue: 'nb', }, { provide: LOCALE_ID, useValue: 'en', }, { provide: MAT_DATE_LOCALE, useValue: 'en-GB' }, { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS } ] 但现在这很引人注目 您面临的问题似乎与日期格式如何应用于输入字段有关。尽管您进行了配置,ngx-mat-datetime-picker 可能会在输入字段中显示带秒的日期。 要解决此问题,您需要确保日期格式正确应用于输入字段值。实现此目的的一种方法是使用 Angular 的内置 DatePipe 来格式化输入字段中显示的日期。 具体操作方法如下: 在组件中导入 DatePipe: import { DatePipe } from '@angular/common'; 将 DatePipe 注入到您的组件中: constructor(private datePipe: DatePipe) {} 更新您的 formatDate 方法以使用 DatePipe: formatDate(date: Date | moment.Moment): string { return this.datePipe.transform(date, 'dd/MM/yyyy HH:mm'); } 将 formattedEDTA 属性直接绑定到 matInput: <mat-form-field class="input-ff transparent-bg no-warning underline-prefix"> <mat-label>{{ 'EstimatedArrivalTime' | translate }}</mat-label> <mat-icon matPrefix class="fill-underline">info</mat-icon> <input matInput [ngxMatDatetimePicker]="picker" [(ngModel)]="formattedEDTA" (dateChange)="dateChanged($event)" [value]="formattedEDTA" /> <mat-hint style="color: black;">DD/MM/YYYY HH:mm</mat-hint> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <ngx-mat-datetime-picker #picker [showSpinners]="true" [showSeconds]="false" [pickerType]="'calendar'" [startView]="'month'" [dateFormat]="'DD/MM/YYYY HH:mm'" [stepHour]="1"> </ngx-mat-datetime-picker> </mat-form-field> <span style="color: red;">- {{formattedEDTA}} -</span> 进行这些更改后,日期输入字段应显示格式化的日期,不带秒。关键点是确保保存格式化日期的 formattedEDTA 属性通过 [value]="formattedEDTA" 直接绑定到输入字段。 此外,请确保您的组件正确注册为 DatePipe: import { Component } from '@angular/core'; import { DatePipe } from '@angular/common'; @Component({ selector: 'app-your-component', templateUrl: './your-component.component.html', styleUrls: ['./your-component.component.css'], providers: [DatePipe] }) export class YourComponent { private _selectedData; formattedEDTA: string; constructor(private datePipe: DatePipe) {} set selectedData(value: any) { this._selectedData = value; this.formattedEDTA = this.formatDate(value.EDTA); } get selectedData(): any { return this._selectedData; } formatDate(date: Date | moment.Moment): string { return this.datePipe.transform(date, 'dd/MM/yyyy HH:mm'); } dateChanged(event: any): void { if (event.value) { this._selectedData.EDTA = event.value; this.formattedEDTA = this.formatDate(event.value); } } } 这应确保日期输入字段和跨度显示相同格式的日期,不带秒。

回答 1 投票 0

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