infordb v1.2.39

InforDB NPM Module

Installation

$ npm i infordb

Update to the newest version

$ npm update infordb

Time select

Import time select variable

import { timeSelect } from 'infordb';

Define the variable as public

public timeSelect = timeSelect

HTML blade modal

  <div class="modal-container" *ngIf="timeSelect.modal" (click)="timeSelect.modal = false;" >
        <ion-card class="p-2 text-dark" style="width: 90vw; max-width: 750px;" (click)="$event.stopPropagation()" >
            <div class="d-flex ion-justify-content-around font-size-125">

                <div class="flex-between w-100" >
                    <div class="bg-secondary h-1 w-100 px-2"></div>
                </div>

                <!--      Hours-->
                <div (scroll)="timeSelect.scrollTime('hour')" style="max-height: 150px;" class="overflow-auto w-100" id="custom-time-hour" >
                    <div style="height: 39px" ></div>
                    <div class="ion-text-center my-4" id="custom-time-hour-{{h}}" *ngFor="let h of timeSelect.vars.hours" (click)="timeSelect.selectTimeValue('hour', h)" >
                        <span class="{{timeSelect.vars.time.hour == h ? 'text-primary' : ''}}" >{{('0'+h).slice(-2)}}</span>
                    </div>
                    <div style="height: 39px" ></div>
                </div>

                <div class="flex-between w-50" >
                    <div class="bg-secondary h-1 w-100 px-2"></div>
                </div>

                <!--      Minutes-->
                <div (scroll)="timeSelect.scrollTime('min')" style="max-height: 150px;" class="overflow-auto w-100" id="custom-time-min" >
                    <div style="height: 39px" ></div>
                    <div class="ion-text-center my-4" id="custom-time-min-{{m}}" *ngFor="let m of timeSelect.vars.minutes" (click)="timeSelect.selectTimeValue('min', m)">
                        <span class="{{timeSelect.vars.time.min == m ? 'text-primary' : ''}}" >{{('0'+m).slice(-2)}}</span>
                    </div>
                    <div style="height: 39px" ></div>
                </div>

                <div class="flex-between w-100" >
                    <div class="bg-secondary h-1 w-100 px-2"></div>
                </div>

            </div>
            <div class="mt-1 pt-1 ion-text-right border-top" >
                <ion-button fill="clear" (click)="timeSelect.confirmTime()" >OK</ion-button>
            </div>
        </ion-card>
    </div>

Usage

//variable[target] will be set to the selected time
timeSelect.select(variable, target)

Date select

Import time select variable

import { dateSelect } from 'infordb';

Define the variable as public

public dateSelect = dateSelect

HTML blade modal

<div class="modal-container" *ngIf="dateSelect.modal" (click)="dateSelect.modal = false;" >
        <ion-card class="p-2 text-dark" style="width: 90vw; max-width: 650px;" (click)="$event.stopPropagation()" >

            <div class="flex-between my-1 mx--2">
                <ion-button fill="clear" class="mx-2" (click)="dateSelect.selectDateChangeYear(false)" ><ion-icon name="chevron-back-outline"></ion-icon></ion-button>
                <span class="mx-2" >{{dateSelect.vars.date.year}}</span>
                <ion-button fill="clear" class="mx-2" (click)="dateSelect.selectDateChangeYear(true)" ><ion-icon name="chevron-forward-outline"></ion-icon></ion-button>
            </div>

            <div class="flex-between my-1 mx--2">
                <ion-button fill="clear" class="mx-2" (click)="dateSelect.selectDateChangeMonth(false)" ><ion-icon name="chevron-back-outline"></ion-icon></ion-button>
                <span class="mx-2" >{{dateSelect.vars.months[dateSelect.vars.date.month]}}</span>
                <ion-button fill="clear" class="mx-2" (click)="dateSelect.selectDateChangeMonth(true)" ><ion-icon name="chevron-forward-outline"></ion-icon></ion-button>
            </div>

            <div class="flex-between custom-date-picker-days">
                <div>ma</div>
                <div>di</div>
                <div>wo</div>
                <div>do</div>
                <div>vr</div>
                <div>za</div>
                <div>zo</div>
            </div>
            <div class="custom-date-picker">
                <div
                  *ngFor="let day of dateSelect.vars.completeDays"
                  [ngClass]="{
                    'active': dateSelect.vars.date.date === (dateSelect.vars.date.year + '-' + ('0' + dateSelect.vars.date.month).slice(-2) + '-' + ('0' + day.day).slice(-2)),
                    'prev-month': day.type === 'prev',
                    'current-month': day.type === 'current',
                    'next-month': day.type === 'next',
                    'disabled': day.status === 'past' //remove or change to 'future' or 'present' if needed
                  }"
                  (click)="dateSelect.confirmDate(day)">
                  {{ day.day }}
                </div>
            </div>

        </ion-card>
    </div>

Usage

//variable[target] will be set to the selected time
dateSelect.select(variable, target)

CSS

/main.css must be copied to the project

Now()

Import and define as public if needed

import { now } from 'infordb';
...
public now = now

Usage

now().date.eu   // 31-12-2022
now().date.us   // 2022-12-31
now().time      // 10:15
now().timestamp // 1673339350591 

Date convertsion()

Import and define as public if needed

import { convertDate } from 'infordb';
...
public convertDate = convertDate

Usage

convertDate('2022-12-31 10:15').date     // 31-12-2022
convertDate('2022-12-31 10:15').reverse  // 2022-12-31