Skip to content
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

Datepicker and timepicker docs unify + Add new Datepicker functionality + Select/Datepicker/Timepicker icon unify #1549

Merged
merged 3 commits into from
Apr 5, 2023
Merged

Datepicker and timepicker docs unify + Add new Datepicker functionality + Select/Datepicker/Timepicker icon unify #1549

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d513bfd
Unify toggle icons in pickers and their input size
juujisai Apr 3, 2023
915b157
Datepicker - unify docs and functionality with MDB
juujisai Apr 4, 2023
6f1a55c
Timepicker - unify docs with mdb
juujisai Apr 5, 2023
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
312 changes: 302 additions & 10 deletions demo/sites/forms/datepicker.html
View file
Open in desktop

Large diffs are not rendered by default.

100 changes: 50 additions & 50 deletions demo/sites/forms/timepicker.html
View file
Open in desktop

Large diffs are not rendered by default.

232 changes: 224 additions & 8 deletions site/content/docs/standard/forms/datepicker/a.html
View file
Open in desktop

Large diffs are not rendered by default.

121 changes: 121 additions & 0 deletions site/content/docs/standard/forms/datepicker/index-js.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
---
---

<script type="module">
//Datepicker translations example
const datepickerTranslated = new te.Datepicker(
document.querySelector("#datepicker-translated"),
{
title: "Datum auswählen",
monthsFull: [
"Januar",
"Februar",
"März",
"April",
"Mai",
"Juni",
"Juli",
"August",
"September",
"Oktober",
"November",
"Dezember",
],
monthsShort: [
"Jan",
"Feb",
"Mär",
"Apr",
"Mai",
"Jun",
"Jul",
"Aug",
"Sep",
"Okt",
"Nov",
"Dez",
],
weekdaysFull: [
"Sonntag",
"Montag",
"Dienstag",
"Mittwoch",
"Donnerstag",
"Freitag",
"Samstag",
],
weekdaysShort: ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"],
weekdaysNarrow: ["S", "M", "D", "M", "D", "F", "S"],
okBtnText: "Ok",
clearBtnText: "Klar",
cancelBtnText: "Schließen",
}
);

// datepicker with limits
const datepickerWithLimits = document.getElementById(
"datepicker-with-limits"
);
new te.Datepicker(datepickerWithLimits, {
min: new Date(2020, 5, 10),
max: new Date(2023, 5, 20),
});

// datepicker with limits
// datepicker disable past

const datepickerDisablePast = document.getElementById(
"datepicker-disable-past"
);
new te.Datepicker(datepickerDisablePast, {
disablePast: true,
});

// datepicker disable past
// datepicker disable future

const datepickerDisableFuture = document.getElementById(
"datepicker-disable-future"
);
new te.Datepicker(datepickerDisableFuture, {
disableFuture: true,
});

// datepicker disable future
// datepicker disabled dates

const datepickerWithFilter = document.getElementById(
"datepicker-disabled-dates"
);

const filterFunction = (date) => {
const isSaturday = date.getDay() === 6;
const isSunday = date.getDay() === 0;

return !isSaturday && !isSunday;
};

new te.Datepicker(datepickerWithFilter, { filter: filterFunction });

// datepicker disabled dates
// datepicker Close without confirmation

const confirmDateOnSelect = document.getElementById(
"datepicker-close-without-confirmation"
);
new te.Datepicker(confirmDateOnSelect, {
confirmDateOnSelect: true,
});

// datepicker Close without confirmation
// datepicker Remove Action Buttons

const datepickerWithoutClearButton = document.getElementById(
"datepicker-remove-action-buttons"
);
new te.Datepicker(datepickerWithoutClearButton, {
removeClearBtn: true,
});

// datepicker Remove Action Buttons
</script>
30 changes: 30 additions & 0 deletions site/content/docs/standard/forms/datepicker/index-ss.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,42 @@
<li class="mb-1 pl-[9px] text-[0.85rem]" data-te-spy-active>
<a href="#basic">Basic example</a>
</li>
<li class="mb-1 pl-[9px] text-[0.85rem]">
<a href="#section-inline">Inline version</a>
</li>
<li class="mb-1 pl-[9px] text-[0.85rem]">
<a href="#section-translations">Translations</a>
</li>
<li class="mb-1 pl-[9px] text-[0.85rem]">
<a href="#section-formats">Formats</a>
</li>
<li class="mb-1 pl-[9px] text-[0.85rem]">
<a href="#section-date-limits">Date limits</a>
</li>
<li class="mb-1 pl-[9px] text-[0.85rem]">
<a href="#section-disable-past">Disable past</a>
</li>
<li class="mb-1 pl-[9px] text-[0.85rem]">
<a href="#section-disable-future">Disable future</a>
</li>
<li class="mb-1 pl-[9px] text-[0.85rem]">
<a href="#section-disabled-dates">Disabled dates</a>
</li>
<li class="mb-1 pl-[9px] text-[0.85rem]">
<a href="#input-toggle">Input toggle</a>
</li>
<li class="mb-1 pl-[9px] text-[0.85rem]">
<a href="#custom-toggle">Custom toggle icon</a>
</li>
<li class="mb-1 pl-[9px] text-[0.85rem]">
<a href="#section-close-without-confirmation">Close without confirmation</a>
</li>
<li class="mb-1 pl-[9px] text-[0.85rem]">
<a href="#section-remove-action-buttons">Remove Action Buttons</a>
</li>
<li class="mb-1 pl-[9px] text-[0.85rem]">
<a href="#section-accessibility">Accessibility</a>
</li>
<li class="mb-1 pl-[9px] text-[0.85rem]">
<a href="#section-related-resources">Related resources</a>
</li>
Loading