new project

src/app/app-routing.module.ts

+import { PanelOkComponent } from './admin/panel-ok/panel-ok.component';
+import { PanelNewComponent } from './admin/panel-new/panel-new.component';
+
+import { AdminComponent } from './admin/admin.component';
+import { AppComponent } from './app.component';
+import { FormComponent } from './form/form.component';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { PanelEndComponent } from './admin/panel-end/panel-end.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {path:'',component:FormComponent},
+  {path:'admin',component:AdminComponent},
+ 
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.module.ts

@@ -3,16 +3,38 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { FormComponent } from './form/form.component';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { AdminComponent } from './admin/admin.component';
+
+import { NgPersianDatepickerModule } from 'ng-persian-datepicker';
+import { PanelNewComponent } from './admin/panel-new/panel-new.component';
+import { PanelOkComponent } from './admin/panel-ok/panel-ok.component';
+import { PanelEndComponent } from './admin/panel-end/panel-end.component';
+
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    FormComponent,
+    AdminComponent,
+    PanelNewComponent,
+    PanelOkComponent,
+    PanelEndComponent,
+
+
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    HttpClientModule,
+    ReactiveFormsModule,
+    NgPersianDatepickerModule,
+    FormsModule,
+
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

src/app/form/form.component.css

+.round-20 {
+  border-radius: 15px;
+}
+
+.right-box {
+  text-align: right;
+  display: flex;
+  justify-content: right;
+}
+
+.mr-1 {
+  margin-right: 30px;
+}

src/app/form/form.component.html

+
+<main class="center-all container-sm" style="font-family:iransans;">
+
+  <div class="box-me mt-5">
+  <div class="text-center">
+    <h2>
+      دریافت نوبت آنلاین
+    </h2>
+  </div>
+  <div class="row " dir="rtl">
+    <div class="col align-self-center">
+      <form [formGroup]="checkoutForm" (ngSubmit)="submitForm()">
+        <div>
+          <div class="row m-lg-3">
+            <h4 class="mb-3">اطلاعات شخصی <span style="color: red;">*</span></h4>
+            <div class="col">
+              <input type="text" name="name" formControlName='name' class="form-control round-20 p-2"
+                placeholder="نام*">
+            </div>
+            <div class="col">
+              <input type="text" name="lastName" formControlName='lastname' class="form-control round-20 p-2"
+                placeholder="نام خانوادگی*">
+            </div>
+          </div>
+          <div class="row m-lg-3">
+            <div class="col">
+              <input type="tel" name="tel" formControlName='tel' class="form-control round-20 p-2"
+                placeholder="شماره همراه*">
+            </div>
+            <div class="col">
+              <input type="email" name="email" formControlName='email' class="form-control round-20 p-2"
+                placeholder="ایمیل (اختیاری)">
+            </div>
+          </div>
+
+          <div class="row m-lg-3">
+            <h4 class="mb-3">زمان ترجیحی<span style="color: red;">*</span></h4>
+            <div class="col">
+              <div class="form-check right-box">
+                <input class="form-check-input" id="t1" type="radio" #inputOff  value="Off"  (click)="periodDate(inputOff.value)" [checked]='!period'>
+                <label class="form-check-label mr-1" for="t1">
+                  اولین زمان خالی
+                </label>
+              </div>
+              <div class="form-check right-box">
+                <input class="form-check-input" id="t2" type="radio" #inputOn  value="On"  (click)="periodDate(inputOn.value)" [checked]='period'>
+                <label class="form-check-label mr-1" for="t2">
+                  انتخاب بازه زمانی
+                </label>
+              </div>
+              <div class="row mt-3" *ngIf='period'>
+                <div class="col-md-6">
+                  <div class="input-group">
+                    <label class="p-1"> از تاریخ</label>
+                    <input class="form-control round-20" name="fdate" type="text" #datepickerInput formControlName='fdate'/>
+                  </div>
+                  <ng-persian-datepicker [uiAutoPosition]=true [dateFormat]="'jYYYY/jMM/jDD'" [input]="datepickerInput"
+                    [uiTheme]="'gray'" [timeMeridian]="false" [timeEnable]="false">
+                  </ng-persian-datepicker>
+                </div>
+                <div class="col-md-6">
+                  <div class="input-group">
+                    <h5 class="p-1">تا تاریخ</h5>
+                    <input class="form-control round-20" name="edate" type="text" #datepickerInput2 formControlName='edate'/>
+                  </div>
+                  <ng-persian-datepicker [uiAutoPosition]=true [dateFormat]="'jYYYY/jMM/jDD'" [input]="datepickerInput2"
+                    [uiTheme]="'blue'" [timeMeridian]="false" [timeEnable]="false">
+                  </ng-persian-datepicker>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+        <div class="mt-3">
+          <div class="row m-lg-3">
+            <div class="col">
+              <h5 class="mb-3"> دریافت نوبت برای <span style="color: red;">*</span></h5>
+              <select id="inputState" class="form-select round-20" name="typeQ" formControlName='typeq'>
+                <option value="1" selected>ویزیت</option>
+                <option value="2">مشاوره</option>
+                <option value="3">موارد دیگر</option>
+              </select>
+            </div>
+            <div class="col">
+              <h5 class="mb-3"> محل دریافت نوبت <span style="color: red;">*</span></h5>
+              <select id="inputState" class="form-select round-20" name="locationQ" formControlName='locationq'>
+                <option value="1" selected>مطب 1</option>
+                <option value="2">مطب 2</option>
+                <option value="3">مطب 3</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div class="row m-lg-3">
+          <div class="col">
+            <textarea name="doc" id="" class="form-control round-20" rows="3" placeholder="توضیحات"
+              formControlName='dec'></textarea>
+          </div>
+        </div>
+        <button type="submit" class="btn btn-primary round-20 p-2 ">درخواست نوبت</button>
+      </form>
+    </div>
+  </div>
+  </div>
+</main>
+

src/app/form/form.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormComponent } from './form.component';
+
+describe('FormComponent', () => {
+  let component: FormComponent;
+  let fixture: ComponentFixture<FormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FormComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/form/form.component.ts

+import { ServerService } from './../server.service';
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-form',
+  templateUrl: './form.component.html',
+  styleUrls: ['./form.component.css'],
+})
+export class FormComponent implements OnInit {
+  // item=this.http.getItem();
+  period: boolean = false;
+  constructor(private http: ServerService, public formBuild: FormBuilder) {
+    let d = new Date();
+    const options: any = { year: 'numeric', month: 'long', day: 'numeric' };
+    this.checkoutForm = this.formBuild.group({
+      name: '',
+      lastname: '',
+      tel: '',
+      email: '',
+      typeq: '',
+      locationq: '',
+      fdate: '',
+      edate: '',
+      dec: '',
+      date:
+        d.toLocaleDateString('fa-IR', options) +
+        ' - ' +
+        d.toLocaleTimeString('fa-IR'),
+    });
+  }
+
+  checkoutForm: FormGroup;
+
+  ngOnInit(): void {}
+
+  submitForm() {
+    console.log(this.checkoutForm.value);
+    let object = this.checkoutForm.value;
+    this.http.sendItem(object);
+    this.checkoutForm.reset();
+  }
+  periodDate(tf: any) {
+    if (tf == 'Off') {
+      this.period = false;
+    } else {
+      this.period = true;
+    }
+  }
+}

src/app/server.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { ServerService } from './server.service';
+
+describe('ServerService', () => {
+  let service: ServerService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ServerService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/server.service.ts

+
+import { iSick } from './ISick';
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+@Injectable({
+  providedIn: 'root',
+})
+export class ServerService {
+  constructor(private http:HttpClient) {}
+
+  sendItem(value: any) {
+    this.http.post('http://127.0.0.1:8000/api/store', value).subscribe(
+      (response) => console.log(response),
+      (error) => console.log(error)
+    );
+  }
+
+  setQ(date: any):Observable<iSick[]> {
+
+    // this.http.post('http://127.0.0.1:8000/api/update', date).subscribe(
+    //   (response) => console.log(response),
+    //   (error) => console.log(error)
+    // );
+   return this.http.post<iSick[]>('http://127.0.0.1:8000/api/update', date).pipe(catchError(this.showError));
+
+  }
+
+  getItem(): Observable<iSick[]> {
+    return this.http
+      .get<iSick[]>('http://127.0.0.1:8000/api/sick')
+      .pipe(catchError(this.showError));
+  }
+
+  chengeItem(id: number): Observable<iSick[]> {
+    let url: string = 'http://127.0.0.1:8000/api/chenge/' + id;
+    return this.http.get<iSick[]>(url).pipe(catchError(this.showError));
+  }
+
+  showError(errorResponse: HttpErrorResponse) {
+    if (errorResponse.error instanceof ErrorEvent) {
+      console.error('client side error', errorResponse.error.message);
+    } else {
+      console.error('Server side Error', errorResponse.error.message);
+    }
+    return throwError('Please Try again , this issue');
+  }
+}

src/index.html

@@ -6,6 +6,7 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+
 </head>
 <body>
   <app-root></app-root>

src/persian-date-0.1.8.min.js

+!function(){function a(a){return a.toString().toPersianDigit()}function b(a){return"[object Array]"===Object.prototype.toString.call(a)}function c(a){return"number"==typeof a?!0:!1}function d(a){return a instanceof Date}function e(a){return"undefined"==typeof a?!0:!1}function f(a,b){for(var c=a+"";c.length<b;)c="0"+c;return c}function g(a,b){return a-b*Math.floor(a/b)}function h(a){return g(Math.floor(a+1.5),7)}function i(a){return a%4==0&&!(a%100===0&&a%400!=0)}function j(a){return 682>682*((a-(a>0?474:473))%2820+474+38)%2816}function k(a,b,c){return t-1+365*(a-1)+Math.floor((a-1)/4)+-Math.floor((a-1)/100)+Math.floor((a-1)/400)+Math.floor((367*b-362)/12+(2>=b?0:i(a)?-1:-2)+c)}function l(a){var b,c,d,e,f,h,j,l,m,n,o,p;return b=Math.floor(a-.5)+.5,c=b-t,d=Math.floor(c/146097),e=g(c,146097),f=Math.floor(e/36524),h=g(e,36524),j=Math.floor(h/1461),l=g(h,1461),m=Math.floor(l/365),n=400*d+100*f+4*j+m,4!=f&&4!=m&&n++,o=b-k(n,1,1),p=b<k(n,3,1)?0:i(n)?1:2,month=Math.floor((12*(o+p)+373)/367),day=b-k(n,month,1)+1,new Array(n,month,day)}function m(a,b,c){g=function(a,b){return a-b*Math.floor(a/b)};var d,e;return d=a-(a>=0?474:473),e=474+g(d,2820),c+(7>=b?31*(b-1):30*(b-1)+6)+Math.floor((682*e-110)/2816)+365*(e-1)+1029983*Math.floor(d/2820)+(u-1)}function n(a){var b,c,d,e,f,h,i,j,k,l;return a=Math.floor(a)+.5,e=a-m(475,1,1),f=Math.floor(e/1029983),h=g(e,1029983),1029982===h?i=2820:(j=Math.floor(h/366),k=g(h,366),i=Math.floor((2134*j+2816*k+2815)/1028522)+j+1),b=i+2820*f+474,0>=b&&(b-=1),l=a-m(b,1,1)+1,c=Math.ceil(186>=l?l/31:(l-6)/30),d=a-m(b,c,1)+1,new Array(b,c,d)}function o(a,b,c){var d,e,e=m(a,b,c),d=l(e);return new Array(d[0],d[1]-1,d[2])}function p(a,b,c){var d=k(a,b+1,c)+Math.floor(.5)/86400,e=n(d),f=h(d);return new Array(e[0],e[1],e[2],f)}function q(a){var b=p(a.getFullYear(),a.getMonth(),a.getDate()),c={};return c.monthDayNumber=b[2]-1,6==b[3]?c.weekDayNumber=1:5==b[3]?c.weekDayNumber=0:4==b[3]?c.weekDayNumber=6:3==b[3]?c.weekDayNumber=5:2==b[3]?c.weekDayNumber=4:1==b[3]?c.weekDayNumber=3:0==b[3]&&(c.weekDayNumber=2),c.year=b[0],c.month=b[1],c.day=c.weekDayNumber,c.date=b[2],c.hours=a.getHours(),c.minutes=a.getMinutes()<10?"0"+a.getMinutes():a.getMinutes(),c.seconds=a.getSeconds(),c.milliseconds=a.getMilliseconds(),c.timeZoneOffset=a.getTimezoneOffset(),c}function r(a){var b=o(a[0]?a[0]:0,a[1]?a[1]:1,a[2]?a[2]:1),c=new Date(b[0],b[1],b[2]);return c.setYear(b[0]),c.setMonth(b[1]),c.setDate(b[2]),c.setHours(a[3]?a[3]:0),c.setMinutes(a[4]?a[4]:0),c.setSeconds(a[5]?a[5]:0),c}function s(a){return[a.year,a.month,a.date,a.hours,a.minutes,a.seconds,a.milliseconds]}var t=1721425.5,u=1948320.5,v={1:{name:{fa:"فروردین"},abbr:{fa:"فرو"}},2:{name:{fa:"اردیبهشت"},abbr:{fa:"ارد"}},3:{name:{fa:"خرداد"},abbr:{fa:"خرد"}},4:{name:{fa:"تیر"},abbr:{fa:"تیر"}},5:{name:{fa:"مرداد"},abbr:{fa:"مرد"}},6:{name:{fa:"شهریور"},abbr:{fa:"شهر"}},7:{name:{fa:"مهر"},abbr:{fa:"مهر"}},8:{name:{fa:"آبان"},abbr:{fa:"آبا"}},9:{name:{fa:"آذر"},abbr:{fa:"آذر"}},10:{name:{fa:"دی"},abbr:{fa:"دی"}},11:{name:{fa:"بهمن"},abbr:{fa:"بهم"}},12:{name:{fa:"اسفند"},abbr:{fa:"اسف"}}},w={1:{name:{fa:"شنبه"},abbr:{fa:"ش"}},2:{name:{fa:"یکشنبه"},abbr:{fa:"ی"}},3:{name:{fa:"دوشنبه"},abbr:{fa:"د"}},4:{name:{fa:"سه شنبه"},abbr:{fa:"س"}},5:{name:{fa:"چهار شنبه"},abbr:{fa:"چ"}},6:{name:{fa:"پنج شنبه"},abbr:{fa:"پ"}},0:{name:{fa:"جمعه"},abbr:{fa:"ج"}}},x=["اورمزد","بهمن","اوردیبهشت","شهریور","سپندارمذ","خورداد","امرداد","دی به آذز","آذز","آبان","خورشید","ماه","تیر","گوش","دی به مهر","مهر","سروش","رشن","فروردین","بهرام","رام","باد","دی به دین","دین","ارد","اشتاد","آسمان","زامیاد","مانتره سپند","انارام","زیادی"];String.prototype.toPersianDigit=function(a){return this.replace(/\d+/g,function(b){var c,d,e=[],f=[];for(c=0;c<b.length;c+=1)e.push(b.charCodeAt(c));for(d=0;d<e.length;d+=1)f.push(String.fromCharCode(e[d]+(a&&a===!0?1584:1728)));return f.join("")})},Duration=function(a){var b=function(a){return 0>a?Math.ceil(a):Math.floor(a)},c=this._data={},d=a.years||a.year||a.y||0,e=a.months||a.month||a.M||0,f=a.weeks||a.w||a.week||0,g=a.days||a.d||a.day||0,h=a.hours||a.hour||a.h||0,i=a.minutes||a.minute||a.m||0,j=a.seconds||a.second||a.s||0,k=a.milliseconds||a.millisecond||a.ms||0;return this._milliseconds=k+1e3*j+6e4*i+36e5*h,this._days=g+7*f,this._months=e+12*d,c.milliseconds=k%1e3,j+=b(k/1e3),c.seconds=j%60,i+=b(j/60),c.minutes=i%60,h+=b(i/60),c.hours=h%24,g+=b(h/24),g+=7*f,c.days=g%30,e+=b(g/30),c.months=e%12,d+=b(e/12),c.years=d,this},Duration.prototype={weeks:function(){return"Must Implement"},valueOf:function(){return this._milliseconds+864e5*this._days+2592e6*this._months},humanize:function(){return"Must Implement"}};var y=function(a){if(!(this instanceof y))return new y(a);if(e(a))this.gDate=new Date;else if(d(a))this.gDate=a;else if(b(a)){var f=a.slice();this.gDate=r(f)}else c(a)?this.gDate=new Date(a):a instanceof y?this.gDate=a.gDate:"/Date("===a.substring(0,6)&&(this.gDate=new Date(parseInt(a.substr(6))));return this.pDate=q(this.gDate),this};y.prototype={version:"0.1.8b",formatPersian:"_default",_utcMode:!1,duration:function(a,b){var c=this.isDuration(a),d="number"==typeof a,e=c?a._data:d?{}:a;return d&&(b?e[b]=a:e.milliseconds=a),new Duration(e)},isDuration:function(a){return a instanceof Duration},humanize:function(){return"Must Implement"},add:function(a,b){var c=this.duration(b,a).valueOf(),d=this.gDate.valueOf()+c;return new y(d)},subtract:function(a,b){var c=this.duration(b,a).valueOf(),d=this.gDate.valueOf()-c;return new y(d)},formatNumber:function(){var a;return"_default"===this.formatPersian?a=window.formatPersian===!1?!1:!0:this.formatPersian===!0?a=!0:this.formatPersian===!1?a=!1:$.error("Invalid Config 'formatPersian' !!"),a},format:function(b){function c(b){switch(formatToPersian=d.formatNumber(),b){case"a":return formatToPersian?g.hour>=12?"ب ظ":"ق ظ":g.hour>=12?"PM":"AM";case"H":return formatToPersian?a(g.hour):g.hour;case"HH":return formatToPersian?a(f(g.hour,2)):f(g.hour,2);case"h":var c=g.hour%12;return formatToPersian?a(c):c;case"hh":var c=g.hour%12;return formatToPersian?a(f(c,2)):f(c,2);case"m":return formatToPersian?a(g.minute):g.minute;case"mm":return formatToPersian?a(f(g.minute,2)):f(g.minute,2);case"s":return formatToPersian?a(g.second):g.second;case"ss":return formatToPersian?a(f(g.second,2)):f(g.second,2);case"D":return formatToPersian?a(f(g.date)):f(g.date);case"DD":return formatToPersian?a(f(g.date,2)):f(g.date,2);case"DDD":var e=d.startOf("year");return formatToPersian?a(d.diff(e,"days")):d.diff(e,"days");case"DDDD":var e=d.startOf("year");return formatToPersian?f(d.diff(e,"days"),3):a(f(d.diff(e,"days"),3));case"d":return formatToPersian?a(d.pDate.weekDayNumber):d.pDate.weekDayNumber;case"ddd":return w[d.pDate.weekDayNumber].abbr.fa;case"dddd":return w[d.pDate.weekDayNumber].name.fa;case"ddddd":return x[d.pDate.monthDayNumber];case"w":var e=d.startOf("year");return parseInt(d.diff(e,"days")/7)+1;case"ww":var e=d.startOf("year");return f(parseInt(d.diff(e,"days")/7)+1,2);case"M":return formatToPersian?a(g.month):g.month;case"MM":return formatToPersian?a(f(g.month,2)):f(g.month,2);case"MMM":return v[g.month].abbr.fa;case"MMMM":return v[g.month].name.fa;case"YY":var h=g.year.toString().split("");return formatToPersian?a(h[2]+h[3]):h[2]+h[3];case"YYYY":return formatToPersian?a(g.year):g.year;case"Z":var i="+",j=Math.round(g.timezone/60),k=g.timezone%60;0>k&&(k*=-1),0>j&&(i="-",j*=-1);var l=i+f(j,2)+":"+f(k,2);return formatToPersian?a(l):l;case"ZZ":var i="+",j=Math.round(g.timezone/60),k=g.timezone%60;0>k&&(k*=-1),0>j&&(i="-",j*=-1);var l=i+f(j,2)+""+f(k,2);return formatToPersian?a(l):l;case"X":return d.unix();case"LT":return d.format("h:m a");case"L":return d.format("YYYY/MM/DD");case"l":return d.format("YYYY/M/D");case"LL":return d.format("MMMM DD YYYY");case"ll":return d.format("MMM DD YYYY");case"LLL":return d.format("MMMM YYYY DD   h:m  a");case"lll":return d.format("MMM YYYY DD   h:m  a");case"LLLL":return d.format("dddd D MMMM YYYY  h:m  a");case"llll":return d.format("ddd D MMM YYYY  h:m  a");default:return g._d}}var d=this,e=/(\[[^\[]*\])|(\\)?(Mo|MM?M?M?|Do|DD?D?D?|ddddd|dddd?|do?|w[o|w]?|YYYY|YY|a|A|hh?|HH?|mm?|ss?|SS?S?|zz?|ZZ?|X|LT|ll?l?l?|LL?L?L?)/g,g={year:d.year(),month:d.month(),hour:d.hours(),minute:d.minutes(),second:d.seconds(),date:d.date(),timezone:d.zone(),unix:d.unix()};if(b)return b.replace(e,c);var b="YYYY-MM-DD HH:mm:ss a";return b.replace(e,c)},from:function(){return"Must Implement"},fromNow:function(){return"Must Implement"},humanizeDuration:function(){return"Must Implement"},_d:function(){return this.gDate._d},diff:function(a,b,c){var d,e=new y(this),f=a,g=0,h=e.gDate-f.gDate-g,i=e.year()-f.year(),j=e.month()-f.month(),k=-1*(e.date()-f.date());return d="months"===b||"month"===b?12*i+j+k/30:"years"===b||"year"===b?i+(j+k/30)/12:"seconds"===b||"second"===b?h/1e3:"minutes"===b||"minute"===b?h/6e4:"hours"===b||"hour"===b?h/36e5:"days"===b||"day"===b?h/864e5:"weeks"===b||"week"===b?h/6048e5:h,c?d:Math.round(d)},startOf:function(a){switch(a){case"years":case"year":return new y([this.year(),1,1]);case"months":case"month":return new y([this.year(),this.month(),1]);case"days":case"day":return new y([this.year(),this.month(),this.date(),0,0,0]);case"hours":case"hour":return new y([this.year(),this.month(),this.date(),this.hours(),0,0]);case"minutes":case"minute":return new y([this.year(),this.month(),this.date(),this.hours(),this.minutes(),0]);case"seconds":case"second":return new y([this.year(),this.month(),this.date(),this.hours(),this.minutes(),this.seconds()]);case"weeks":case"week":var b=this.pDate.weekDayNumber;return 0===b?new y([this.year(),this.month(),this.date()]):new y([this.year(),this.month(),this.date()]).subtract("days",b);default:return this}},endOf:function(a){switch(a){case"years":case"year":var b=this.isLeapYear()?30:29;return new y([this.year(),12,b,23,59,59]);case"months":case"month":var c=this.daysInMonth(this.year(),this.month());return new y([this.year(),this.month(),c,23,59,59]);case"days":case"day":return new y([this.year(),this.month(),this.date(),23,59,59]);case"hours":case"hour":return new y([this.year(),this.month(),this.date(),this.hours(),59,59]);case"minutes":case"minute":return new y([this.year(),this.month(),this.date(),this.hours(),this.minutes(),59]);case"seconds":case"second":return new y([this.year(),this.month(),this.date(),this.hours(),this.minutes(),this.seconds()]);case"weeks":case"week":var d=this.pDate.weekDayNumber;return d=6===d?7:6-d,new y([this.year(),this.month(),this.date()]).add("days",d);default:return this}},sod:function(){return this.startOf("day")},eod:function(){return this.endOf("day")},zone:function(){return this.pDate.timeZoneOffset},local:function(){if(this._utcMode){var a=60*this.pDate.timeZoneOffset*1e3;if(this.pDate.timeZoneOffset<0)var b=this.valueOf()-a;else var b=this.valueOf()+a;return this.gDate=new Date(b),this._updatePDate(),this._utcMode=!1,this}return this},utc:function(a){if(a)return new persianDate(a).utc();if(this._utcMode)return this;var b=60*this.pDate.timeZoneOffset*1e3;if(this.pDate.timeZoneOffset<0)var c=this.valueOf()+b;else var c=this.valueOf()-b;return this.gDate=new Date(c),this._updatePDate(),this._utcMode=!0,this},isUtc:function(){return this._utcMode},isDST:function(){var a=this.month(),b=this.date();return 7>a?!1:7==a&&b>=2||a>7?!0:void 0},isLeapYear:function(){return j(this.year())},daysInMonth:function(a,b){var c=a?a:this.year(),d=b?b:this.month();return 1>d||d>12?0:7>d?31:12>d?30:j(c)?30:29},toDate:function(){return this.gDate},toArray:function(){return[this.year(),this.month(),this.day(),this.hour(),this.minute(),this.second(),this.millisecond()]},_valueOf:function(){return this.gDate.valueOf()},unix:function(a){if(a)return new persianDate(1e3*a);var b=this.gDate.valueOf().toString();return output=b.substring(0,b.length-3),parseInt(output)},isPersianDate:function(a){return a instanceof y},millisecond:function(a){return this.milliseconds(a)},milliseconds:function(a){return a?(this.gDate.setMilliseconds(a),this._updatePDate(),this):this.pDate.milliseconds},second:function(a){return this.seconds(a)},seconds:function(a){return a|0===a?(this.gDate.setSeconds(a),this._updatePDate(),this):this.pDate.seconds},minute:function(a){return this.minutes(a)},minutes:function(a){return a||0===a?(this.gDate.setMinutes(a),this._updatePDate(),this):this.pDate.minutes},hour:function(a){return this.hours(a)},hours:function(a){return a|0===a?(this.gDate.setHours(a),this._updatePDate(),this):this.pDate.hours},dates:function(a){return this.date(a)},date:function(a){if(a|0==a){var b=s(this.pDate);return b[2]=a,this.gDate=r(b),this._updatePDate(),this}return this.pDate.date},days:function(){return this.day()},day:function(){return this.pDate.day},month:function(a){if(a|0===a){var b=s(this.pDate);return b[1]=a,this.gDate=r(b),this._updatePDate(),this}return this.pDate.month},years:function(a){return this.year(a)},year:function(a){if(a|0===a){var b=s(this.pDate);return b[0]=a,this.gDate=r(b),this._updatePDate(),this}return this.pDate.year},getFirstWeekDayOfMonth:function(a,b){var c=o(a,b,1),d=p(c[0],c[1],c[2]);return d[3]+2===8?1:d[3]+2===7?7:d[3]+2},clone:function(){var a=this;return new y(a.gDate)},_updatePDate:function(){this.pDate=q(this.gDate)},valueOf:function(){return this._valueOf()}},persianDate=y,pDate=y,persianDate.unix=persianDate.prototype.unix,persianDate.utc=persianDate.prototype.utc}();
\ No newline at end of file

src/persian-datepicker-0.4.5.min.css

+/*
+  persian-datepicker - v0.4.5 
+  Author: reza babakhani 
+ http://babakhani.github.io/PersianWebToolkit/datepicker 
+ */
+
+.datepicker-plot-area,.unselectable{-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none}.animation,.datepicker-plot-area .datepicker-time-view .down-btn,.datepicker-plot-area .datepicker-time-view .up-btn{-webkit-transition:all 100ms ease;-moz-transition:all 100ms ease;-ms-transition:all 100ms ease;-o-transition:all 100ms ease;transition:all 100ms ease}.date-item-disable,.datepicker-plot-area .datepicker-day-view .table-days td.disabled span,.datepicker-plot-area .datepicker-month-view .month-item-disable,.datepicker-plot-area .datepicker-year-view .year-item-disable,.reset-curve{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.datepicker-plot-area .datepicker-time-view .down-btn,.datepicker-plot-area .datepicker-time-view .up-btn,.top-big-curve{-webkit-border-radius:6px 6px 0 0;-moz-border-radius:0;border-radius:6px 6px 0 0;-moz-border-radius-topleft:6px;-moz-border-radius-topright:6px}.bottom-big-curve,.datepicker-plot-area .datepicker-time-view .down-btn{-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0;border-radius:0 0 6px 6px;-moz-border-radius-bottomright:6px;-moz-border-radius-bottomleft:6px}.big-curve,.datepicker-plot-area,.datepicker-plot-area .datepicker-time-view>div.time-segment{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.date-item,.datepicker-plot-area .datepicker-day-view .table-days td span,.datepicker-plot-area .datepicker-month-view .month-item,.datepicker-plot-area .datepicker-year-view .year-item,.small-curve{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.datepicker-plot-area,.main-box-shadow{-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2)}.date-item,.date-item-disable,.datepicker-plot-area .datepicker-day-view .table-days td span,.datepicker-plot-area .datepicker-day-view .table-days td.disabled span,.datepicker-plot-area .datepicker-header .btn-next,.datepicker-plot-area .datepicker-header .btn-prev,.datepicker-plot-area .datepicker-header .btn-switch,.datepicker-plot-area .datepicker-month-view .month-item,.datepicker-plot-area .datepicker-month-view .month-item-disable,.datepicker-plot-area .datepicker-time-view .down-btn,.datepicker-plot-area .datepicker-time-view .up-btn,.datepicker-plot-area .datepicker-time-view input,.datepicker-plot-area .datepicker-time-view>div.time-segment,.datepicker-plot-area .datepicker-year-view .year-item,.datepicker-plot-area .datepicker-year-view .year-item-disable,.datepicker-plot-area .toolbox .btn-today,.interactive-item{cursor:pointer}.date-item,.datepicker-plot-area .datepicker-day-view .table-days td span,.datepicker-plot-area .datepicker-month-view .month-item,.datepicker-plot-area .datepicker-year-view .year-item{font:14px;background-color:#fff;color:#333;border:0;text-shadow:none}.date-item-disable,.datepicker-plot-area .datepicker-day-view .table-days td.disabled span,.datepicker-plot-area .datepicker-month-view .month-item-disable,.datepicker-plot-area .datepicker-year-view .year-item-disable{background-color:#f1f1f1!important;color:#ccc!important;border:none!important;text-shadow:none!important;cursor:default}.date-item-today,.datepicker-plot-area .datepicker-day-view .table-days td span.today{background-color:#333;color:#fff;border:0;text-shadow:none}.date-item-numb,.datepicker-plot-area .datepicker-day-view .table-days td span.other-month{background-color:"";color:#ccc;border:none;text-shadow:none}.date-item-selected,.datepicker-plot-area .datepicker-day-view .table-days td span.selected,.datepicker-plot-area .datepicker-month-view .month-item.selected,.datepicker-plot-area .datepicker-year-view .year-item.selected{background-color:#006dcc!important;color:#fff;border:none;text-shadow:1px 1px 1px #000}.date-item-hover,.datepicker-plot-area .datepicker-day-view .table-days td span:hover,.datepicker-plot-area .datepicker-month-view .month-item:hover,.datepicker-plot-area .datepicker-year-view .year-item:hover{background-color:#eee;color:"";border:0;text-shadow:none}.datepicker-plot-area{box-sizing:border-box;overflow:hidden;min-height:70px;display:block;width:260px;padding:0 5px;position:absolute;top:100px;border:1px solid #ccc;background-color:#fff}.datepicker-plot-area table,.datepicker-plot-area td,.datepicker-plot-area th{border:none;background:0 0}.datepicker-plot-area *{text-align:center;color:#333}.datepicker-plot-area-inline-view{display:block!important;width:100%;position:static;float:left}.datepicker-plot-area .datepicker-day-view,.datepicker-plot-area .datepicker-month-view,.datepicker-plot-area .datepicker-year-view{display:block;width:98%;float:left;min-height:200px!important;margin:0 1%}.datepicker-plot-area .datepicker-time-view{display:block;float:left;width:100%;padding:5px 1%;margin:3px 0;background:#f9f9f9;border-top:1px solid #f1f1f1}.datepicker-plot-area .datepicker-time-view>div.time-segment{display:block;width:22%;height:60px;float:left;overflow:hidden}.datepicker-plot-area .datepicker-time-view>div.time-segment:hover .down-btn,.datepicker-plot-area .datepicker-time-view>div.time-segment:hover .up-btn{font-weight:700;background-color:#fff}.datepicker-plot-area .datepicker-time-view .divider{display:none;width:3%;height:60px;line-height:60px!important;float:left;overflow:hidden;font:12px bold}.datepicker-plot-area .datepicker-time-view .down-btn,.datepicker-plot-area .datepicker-time-view .up-btn{display:block;float:left;width:100%;margin:0;height:20px;line-height:18px}.datepicker-plot-area .datepicker-time-view .down-btn:hover,.datepicker-plot-area .datepicker-time-view .up-btn:hover{background-color:#eee}.datepicker-plot-area .datepicker-time-view input{display:block;width:90%;margin:0 5%;height:20px;padding:0;border:none;background:#f9f9f9}.datepicker-plot-area .datepicker-day-view .table-days{width:100%;float:left;direction:rtl}.datepicker-plot-area .datepicker-day-view .table-days tr{width:300px}.datepicker-plot-area .datepicker-day-view .table-days td{height:26px;padding:0;margin:0}.datepicker-plot-area .datepicker-day-view .table-days td span{display:block;width:100%;height:26px;line-height:26px;padding:0;margin:0}.datepicker-plot-area .datepicker-day-view .month-grid-box{display:block;width:100%;float:right;min-width:150px;height:180px;margin:10px 1% 5px}.datepicker-plot-area .datepicker-day-view .month-grid-box .header .header-row{display:block;width:100%;height:25px;float:left}.datepicker-plot-area .datepicker-day-view .month-grid-box .header .header-row-cell{display:block;width:14%;height:25px;float:right;line-height:25px;text-indent:6px;font:14px tahoma;font-weight:700;color:#333}.datepicker-plot-area .datepicker-month-view .month-item,.datepicker-plot-area .datepicker-year-view .year-item{display:block;width:31%;margin:2px 1% 0;float:right;height:36px;line-height:34px}.datepicker-plot-area .toolbox{display:block;width:100%;float:left;padding:3px 0}.datepicker-plot-area .toolbox .btn-today{display:block;width:60px;height:20px;line-height:16px;margin:0 auto;font-weight:700;background-color:#fff}.datepicker-plot-area .toolbox .btn-today:hover{background-color:#eee}.datepicker-plot-area .datepicker-header{display:block;width:98%;height:30px;float:left;padding:3px 1% 0;direction: ltr}.datepicker-plot-area .datepicker-header .btn-next,.datepicker-plot-area .datepicker-header .btn-prev,.datepicker-plot-area .datepicker-header .btn-switch{height:28px;line-height:28px;font-weight:700;background-color:#fff;color:#333}.datepicker-plot-area .datepicker-header .btn-next:hover,.datepicker-plot-area .datepicker-header .btn-prev:hover,.datepicker-plot-area .datepicker-header .btn-switch:hover{background-color:#eee}.datepicker-plot-area .datepicker-header .btn-next{display:block;width:15%;float:left}.datepicker-plot-area .datepicker-header .btn-switch{display:block;width:66%;margin:0 2%;float:left}.datepicker-plot-area .datepicker-header .btn-prev{display:block;width:15%;float:left}
\ No newline at end of file

src/styles.css

-/* You can add global styles to this file, and also import other style files */
+@font-face {
+  font-family: "iransans";
+  src: url('./assets/font/IRANSansWeb.ttf');
+}
+
+body {
+  font-family:iransans;
+  font-size: .875rem;
+}
+
+.feather {
+  width: 16px;
+  height: 16px;
+  vertical-align: text-bottom;
+}
+
+/*
+ * Sidebar
+ */
+
+.sidebar {
+  position: initial;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  /* rtl:remove */
+
+  z-index: 100;
+  /* Behind the navbar */
+  padding: 48px 0 0;
+  /* Height of navbar */
+  box-shadow: inset 1px 2px 3px rgba(0, 0, 0, 0.363);
+}
+
+@media (max-width: 767.98px) {
+  .sidebar {
+    top: 5rem;
+  }
+}
+
+.sidebar-sticky {
+  position: relative;
+  top: 0;
+  height: calc(100vh - 48px);
+  padding-top: .5rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+  /* Scrollable contents if viewport is shorter than content. */
+}
+
+.sidebar .nav-link {
+  font-weight: 500;
+  color: #333;
+}
+
+.sidebar .nav-link .feather {
+  margin-right: 4px;
+  color: #727272;
+}
+
+.sidebar .nav-link.active {
+  color: #ff00b3;
+}
+
+.sidebar .nav-link:hover .feather,
+.sidebar .nav-link.active .feather {
+  color: inherit;
+}
+
+.sidebar-heading {
+  font-size: .75rem;
+  text-transform: uppercase;
+}
+
+/*
+ * Navbar
+ */
+
+.navbar-brand {
+  padding-top: .75rem;
+  padding-bottom: .75rem;
+  font-size: 1rem;
+  background-color: rgba(0, 0, 0, .25);
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
+}
+
+.navbar .navbar-toggler {
+  top: .25rem;
+  right: 1rem;
+}
+
+.navbar .form-control {
+  padding: .75rem 1rem;
+  border-width: 0;
+  border-radius: 0;
+}
+
+.form-control-dark {
+  color: #fff;
+  background-color: rgba(255, 255, 255, .1);
+  border-color: rgba(255, 255, 255, .1);
+}
+
+.form-control-dark:focus {
+  border-color: transparent;
+  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
+}
+
+.center-all {
+
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+}
+
+.box-me {
+  padding: 25px;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 6px rgba(29, 29, 29, 0.185);
+}
+

tsconfig.json

@@ -5,7 +5,7 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
-    "strict": true,
+    "strict": false,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
@@ -16,6 +16,7 @@
     "importHelpers": true,
     "target": "es2017",
     "module": "es2020",
+    "allowSyntheticDefaultImports": true,
     "lib": [
       "es2018",
       "dom"