added sl-date-picker component

docs/_sidebar.md

@@ -23,6 +23,7 @@
   - [Dialog](/components/dialog)
   - [Drawer](/components/drawer)
   - [Dropdown](/components/dropdown)
+  - [Date Picker](/components/date-picker)
   - [Form](/components/form)
   - [Icon](/components/icon)
   - [Icon Button](/components/icon-button)
@@ -52,6 +53,7 @@
 
 - Utilities
   - [Animation](/components/animation)
+  - [Calendar](/components/calendar)
   - [Format Bytes](/components/format-bytes)
   - [Format Date](/components/format-date)
   - [Format Number](/components/format-number)

docs/components/calendar.md

@@ -0,0 +1,113 @@
+# Calendar
+
+[component-header:sl-calendar]
+
+The `sl-calendar` represents a calendar by displaying the days of a month of a given year. The component allow users to enter dates easily and visually.
+
+```html preview
+<sl-calendar
+  start="2021-08-12"
+></sl-calendar>
+```
+
+## Examples
+
+### Today highlighted
+
+Display the `sl-calendar` with today highlighted.
+
+```html preview
+<sl-calendar
+  start="2021-08-12"
+  today
+></sl-calendar>
+```
+
+### Minimum and maximum dates
+
+Configuring minimum and maximum selectable dates is great for limiting the user selections. Setting the values will disable dates earlier than min-date and dates that come after max-date.
+
+```html preview
+<sl-calendar
+  start="2021-08-12"
+  min="2021-08-01"
+  max="2021-08-24"
+></sl-calendar>
+```
+
+### Disabled dates
+
+Disabled dates can be defined using the property `disabledDates`. These date are not selectable in calendar.
+
+```html preview
+<sl-calendar
+  class="calendar-disabled-dates"
+  start="2021-08-12"
+></sl-calendar>
+
+<script>
+  const calendar = document.querySelector('.calendar-disabled-dates');
+  calendar.disabledDates = [new Date(2021, 07, 06), new Date(2021, 07, 23)];
+</script>
+```
+
+### Multiple dates selection
+
+To enable multiple selection set the `range` attribute, in this way it is possible to select multiple dates.
+
+```html preview
+<sl-calendar
+  start="2021-08-12"
+  range
+></sl-calendar>
+```
+
+### Calendar events
+
+The `sl-calendar` component emit different type of events during the user interaction.
+
+```html preview
+<sl-calendar
+  class="calendar-events"
+  start="2021-08-12"
+  range
+></sl-calendar>
+
+<script>
+  const calendar = document.querySelector('.calendar-events');
+  calendar.disabledDates = [new Date(2021, 07, 06), new Date(2021, 07, 23)];
+
+  [
+    'sl-calendar-range-selected',
+    'sl-calendar-date-selected',
+    'sl-calendar-month-changed',
+    'sl-calendar-year-changed'
+  ].forEach(name => calendar.addEventListener(name, e => console.log(name, e.detail)));
+</script>
+```
+
+### Limit dates selection
+
+Limit date range selection to a number of specified days.
+
+```html preview
+<sl-calendar
+  start="2021-08-12"
+  limit-range="3"
+  range
+></sl-calendar>
+```
+
+### Localization
+
+The `sl-calendar` component is fully localized. This covers date, time, days names and months names. The first day of the week can also be set using the `first-day-of-week` attribute.
+
+```html preview
+<sl-calendar
+  start-date="2021-08-12"
+  first-day-of-week="1"
+  lang="it"
+></sl-calendar>
+```
+
+[component-metadata:sl-calendar]

docs/components/date-picker.md

@@ -0,0 +1,102 @@
+# Date Picker
+
+[component-header:sl-date-picker]
+
+The `sl-date-picker` component acts as a container for the `sl-calendar` component to display an awesome dropdown calendar.
+
+```html preview
+<style>
+  sl-icon.arrow {
+    position: absolute;
+    z-index: 1;
+    color: var(--sl-color-primary-500);
+    font-size: 1.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 55%;
+  }
+
+  sl-input::part(base) {
+    width: 125px;
+    height: 38.5px;
+    --sl-input-border-color-focus: var(--sl-input-border-color);
+    --focus-ring: 0 0 0 0 transparent;
+  }
+
+  sl-input::part(base):hover,
+  sl-input::part(base):focus,
+  sl-input::part(base):active {
+    border-color: var(--sl-input-border-color)
+  }
+
+  sl-input.start-date::part(base) {
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    height: 100%;
+  }
+
+  sl-input.end-date::part(base) {
+    border-left: none;
+    border-right: none;
+    border-radius: 0;
+    height: 100%;
+  }
+
+  sl-input.end-date::part(input) {
+    text-align: left;
+    padding-left: 15px
+  }
+
+  sl-date-picker::part(trigger-button) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    height: 100%;
+  }
+</style>
+
+<sl-date-picker
+  class="datepicker"
+  start="2021-08-11"
+  first-day-of-week="1"
+  today
+  range>
+  <sl-input class="start-date" size="medium" readonly placeholder="from"></sl-input>
+  <sl-icon class="arrow" name="arrow-right"></sl-icon>
+  <sl-input class="end-date" size="medium" readonly placeholder="to"></sl-input>
+</sl-date-picker>
+
+
+<script>
+  const datepicker = document.querySelector('.datepicker');
+  const startDateInput = datepicker.querySelector('.start-date');
+  const endDateInput = datepicker.querySelector('.end-date');
+
+  datepicker.addEventListener('sl-calendar-date-selected', event => {
+    const data = event.detail;
+    startDateInput.value = format(data);
+
+    console.log(data);
+  });
+
+  datepicker.addEventListener('sl-calendar-range-selected', event => {
+    const data = event.detail;
+
+    startDateInput.value = format(data.start);
+    endDateInput.value = format(data.end);
+
+    console.log(data);
+  });
+
+  function format(value) {
+    var d = value.getDate();
+    var m = value.getMonth() + 1;
+    var y = value.getFullYear();
+    return (d <= 9 ? '0' + d : d) + '.' + (m <= 9 ? '0' + m : m) + '.' + y;
+  }
+</script>
+```
+
+## Examples
+
+[component-metadata:sl-date-picker]

docs/components/format-date.md

@@ -61,4 +61,18 @@ French: <sl-format-date locale="fr"></sl-format-date><br>
 Russian: <sl-format-date locale="ru"></sl-format-date><br>
 ```
 
+### Date operations
+
+The `sl-format-date` component allows you to manipualte dates using the internal `date` library.
+
+```html preview
+Start of month: <sl-format-date date="2020-07-15" locale="ru" class="operation1"></sl-format-date><br>
+Add 14 days: <sl-format-date date="2020-07-15" locale="ru" class="operation2"></sl-format-date>
+
+<script>
+  document.querySelector('sl-format-date.operation1').calculate('start-of-month');
+  document.querySelector('sl-format-date.operation2').calculate('add-days', 14);
+</script>
+```
+
 [component-metadata:sl-format-date]