@rikughi/web-components

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>