@rikughi/web-components v0.0.21

Web Components

Contents

• Installation
• DatePicker
• DateRangePicker

Installation

Install via npm

$ npm i @rikughi/web-components

Or

<script type="module" src="https://unpkg.com/@rikughi/web-components@{VERSION}/dist/web-components/web-components.esm.js"></script>

DatePicker

• Properties
• Usage

DatePicker Usage

Set target property to id of input element

<div style="position: relative;">
  <input id="date-picker" type="text" />
  <date-picker target="date-picker"></date-picker>
</div>

defaultStyle

You can customize the style according to your preferences

• Default

  

• Customized

  <date-picker target="date-picker" default-style='{"--green-600":"#0284c7", "--green-50":"#eff6ff"}'></date-picker>

  

• The provided properties | Property | Default | | --------------- | ----------- | | --gray-50 | #f9fafb | | --gray-300 | #d1d5db | | --gray-900 | #111827 | | --green-50 | #f0fdf4 | | --green-600 | #16a34a | | --red-300 | #fca5a5 | | --red-600 | #dc2626 | | --white | #ffffff | | --font-family | system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif |

defaultValue

<date-picker target="date-picker" default-value="2023-09-01"></date-picker>

displayFormat

const datePicker = document.querySelector('[target="date-picker"]');

datePicker.displayFormat = d => {
  return String(d.getDate()).padStart(2, '0') + '/' + String(d.getMonth() + 1).padStart(2, '0') + '/' + d.getFullYear();
};

minDate

datePicker.minDate = new Date('2023-09-01');

maxDate

datePicker.maxDate = new Date('2023-09-20');

valueChanged

datePicker.valueChanged = v => {
  console.log(v);
};

DateRangePicker

• Properties
• Usage

DateRangePicker Usage

Set target property to id of input element

<div style="position: relative;">
  <input id="date-range-picker" type="text" />
  <date-range-picker target="date-range-picker"></date-range-picker>
</div>

defaultValue

const dateRangePicker = document.querySelector('[target="date-range-picker"]');

dateRangePicker.defaultValue = {
  startDate: new Date(2023, 8, 11),
  endDate: new Date(2023, 8, 15),
};

// or

dateRangePicker.defaultValue = {
  startDate: null,
  endDate: null,
};

placeholder

You must use the use-confirmation property to use placeholder property

<date-range-picker target="date-range-picker" use-confirmation placeholder="DD/MM/YYYY"></date-range-picker>

rangeValueChanged

dateRangePicker.rangeValueChanged = v => {
  console.log(v);
};

separator

<date-range-picker target="date-range-picker" separator=" to "></date-range-picker>

shortcutList

const currentDate = new Date();
dateRangePicker.shortcutList = [
  {
    label: 'This month',
    range: {
      startDate: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
      endDate: new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0),
    },
  },
  {
    label: 'This year',
    range: {
      startDate: new Date(currentDate.getFullYear(), 0, 1),
      endDate: new Date(currentDate.getFullYear(), 12, 0),
    },
  },
];

useConfirmation

<date-range-picker target="date-range-picker" use-confirmation></date-range-picker>