Skip to content

#CX-20457: Date Time picker: fix localised date format and disable user typing (remake) #2012

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
RiamLoddy wants to merge 1 commit into from
Closed

#CX-20457: Date Time picker: fix localised date format and disable user typing (remake) #2012

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 21 additions & 54 deletions web-components/src/[sandbox]/examples/date-time-picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,29 @@
import "@/components/date-time-picker/DateTimePicker";
import { now } from "@/utils/dateUtils";
import { css, customElement, html, LitElement } from "lit-element";
import { html } from "lit-element";
import { ifDefined } from "lit-html/directives/if-defined";

const minDate = now().minus({ day: 5 }).toISODate();

const maxDate = now().plus({ day: 5 }).toISODate();

@customElement("date-time-picker-sandbox")
export class DateTimePickerSandbox extends LitElement {
static get styles() {
return [
css`
h3 {
margin-bottom: 0.5rem;
margin-top: 0.5rem;
}
`
];
}

render() {
return html`
<h2 class="sandbox-header">md-date-time-picker</h2>
<h3>date-time-picker</h3>
<md-date-time-picker></md-date-time-picker>
<h3>date-time-picker with user's system locale</h3>
<md-date-time-picker .useISOFormat=${false}></md-date-time-picker>
<h3>date-time-picker with "ru" locale</h3>
<md-date-time-picker locale="ru" .useISOFormat=${false}></md-date-time-picker>
<h3>date-time-picker with "en-US" locale</h3>
<md-date-time-picker locale="en-US" .useISOFormat=${false}></md-date-time-picker>
<h3>date-time-picker with minDate & maxDate</h3>
<md-date-time-picker
minDate=${ifDefined(minDate ?? undefined)}
maxDate=${ifDefined(maxDate ?? undefined)}
></md-date-time-picker>
<h3>date-time-picker with dateValue & timeValue</h3>
<md-date-time-picker date-value="2021-01-31" time-value="08:20:00-08:00"></md-date-time-picker>
<h3>date-time-picker with value</h3>
<md-date-time-picker value="2021-02-14T12:00:00-08:00"></md-date-time-picker>
<h3>disabled date-time-picker</h3>
<md-date-time-picker value="2021-02-14T12:00:00-08:00" disabled></md-date-time-picker>
<h3>Call Date</h3>
<md-date-time-picker value="2021-02-14T12:00:00-08:00" ariaLabel="Call Date"></md-date-time-picker>
<h3>date time picker with accept and cancel buttons</h3>
<md-date-time-picker
.controlButtons=${{ apply: { value: "Apply" }, cancel: { value: "Cancel" } }}
.shouldCloseOnSelect=${true}
value="2021-01-31"
></md-date-time-picker>
<md-date-time-picker
.controlButtons=${{ apply: { value: "Apply" }, cancel: { value: "Cancel" } }}
.shouldCloseOnSelect=${true}
.showDefaultNowDate=${false}
></md-date-time-picker>
`;
}
}

export const dateTimePickerTemplate = html` <date-time-picker-sandbox></date-time-picker-sandbox> `;
export const dateTimePickerTemplate = html`
<h2 class="sandbox-header">md-date-time-picker</h2>
<h3>date-time-picker</h3>
<md-date-time-picker></md-date-time-picker>
<h3>date-time-picker with ru locale</h3>
<md-date-time-picker locale="ru"></md-date-time-picker>
<h3>date-time-picker with minDate & maxDate</h3>
<md-date-time-picker
minDate=${ifDefined(minDate ?? undefined)}
maxDate=${ifDefined(maxDate ?? undefined)}
></md-date-time-picker>
<h3>date-time-picker with dateValue & timeValue</h3>
<md-date-time-picker date-value="2021-01-31" time-value="08:20:00-08:00"></md-date-time-picker>
<h3>date-time-picker with value</h3>
<md-date-time-picker value="2021-02-14T12:00:00-08:00"></md-date-time-picker>
<h3>disabled date-time-picker</h3>
<md-date-time-picker value="2021-02-14T12:00:00-08:00" disabled></md-date-time-picker>
<h3>Call Date</h3>
<md-date-time-picker value="2021-02-14T12:00:00-08:00" ariaLabel="Call Date"></md-date-time-picker>
`;
23 changes: 3 additions & 20 deletions web-components/src/[sandbox]/examples/datepicker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,21 +24,11 @@ export const datePickerTemplate = html`
.filterParams=${{ minDate: undefined, maxDate: undefined, filterDate: undefined }}
></md-datepicker-calendar>
<h3>datepicker with custom trigger</h3>
<md-datepicker value=${"2025-04-10"}></md-datepicker>
<md-datepicker custom-trigger>
<md-button slot="date-trigger" variant="primary">Date Trigger</md-button>
</md-datepicker>
<h3>default date if we set showDefaultNowDate as true</h3>
<md-datepicker .useISOFormat=${true} .showDefaultNowDate=${true} placeholder="Select date"></md-datepicker>
<h3>show the passed placeholder if we set showDefaultNowDate as false</h3>
<md-datepicker .useISOFormat=${true} .showDefaultNowDate=${false} placeholder="Select date"></md-datepicker>

<h3>datepicker with user's system locale</h3>
<md-datepicker .useISOFormat=${false}></md-datepicker>
<h3>datepicker with "ru" locale</h3>
<md-datepicker locale="ru" .useISOFormat=${false}></md-datepicker>
<h3>datepicker with "en-US" locale</h3>
<md-datepicker locale="en-US" .useISOFormat=${false}></md-datepicker>
<h3>datepicker with different locale</h3>
<md-datepicker locale="ru"></md-datepicker>
<h3>datepicker with min / max filters</h3>
<md-datepicker minDate=${ifDefined(minDate ?? undefined)} maxDate=${ifDefined(maxDate ?? undefined)}></md-datepicker>
<h3>datepicker with Monday start week start</h3>
Expand All @@ -47,15 +37,8 @@ export const datePickerTemplate = html`
<md-datepicker weekStart="Monday" value="2021-01-31"></md-datepicker>
<h3>disabled datepicker</h3>
<md-datepicker weekStart="Monday" value="2021-01-31" disabled></md-datepicker>
<h3>Call Date (with custom aria label)</h3>
<h3>Call Date</h3>
<md-datepicker ariaLabel="Call Date" weekStart="Monday" value="2021-01-31"></md-datepicker>
<h3>datepicker with initial value compact newMomentum</h3>
<md-datepicker weekStart="Monday" value="2021-01-31" compact-input newMomentum></md-datepicker>
<h3>date picker with accept and cancel buttons</h3>
<md-datepicker
.controlButtons=${{ apply: { value: "Apply" }, cancel: { value: "Cancel" } }}
.shouldCloseOnSelect=${true}
value="2021-01-31"
newMomentum
></md-datepicker>
`;