pip-webui2-dates

Control visualizes specific time interval

Usage no npm install needed!

<script type="module">
  import pipWebui2Dates from 'https://cdn.skypack.dev/pip-webui2-dates';
</script>

README

Pip.WebUI Logo
Date components

Components

Date-time range

Control visualizes specific time interval

Using

<pip-time-range [startDate]="startDate" [endDate]="endDate"></pip-time-range>

Example on the image

Date-time range edit

Control allows to specify time interval rounded to days or half-hour chunks

Using

<pip-time-range-edit [startDate]="startDate" [endDate]="endDate" 
    (startDateChange)="startDate = $event" (endDateChange)="endDate = $event">
</pip-time-range-edit>

Example on the image

Pipes

Elapsed

Shows localized time interval from date to now

Using

    {{ dateInPast | elapsed }}

Localized date

Shows localized date

Using

    {{ startDate | localizedDate: 'dd MMM yyyy HH:mm' }}

Installation

To install this module using npm:

npm install pip-webui2-dates --save

License

This module is released under MIT license and totally free for commercial and non-commercial use.