How To Get Start And End Date Of Week Using Angular 10

Introduction

In this article, we will learn how to find a week's start date and end date in an Angular 10 Application.

Prerequisites

Basic Knowledge of Angular 2 or higher
Visual Studio Code
Node and NPM installed
Bootstrap
ngx-bootstrap

Create an Angular project by using the following command.

ng new Timepicker

Open this project in Visual Studio Code and install bootstrap by using the following command.

npm install bootstrap --save

Now open styles.css file and add Bootstrap file reference. To add reference in styles.css file add this line.

@import '~bootstrap/dist/css/bootstrap.min.css';

To add datepicker we use ngx bootstrap datepicker, so add ngx bootstrap datepicker in this project using the following command.

npm install ngx-bootstrap --save

Now open index.html file and add the following cdn link to add css for datepicker

<link rel="stylesheet" href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css">

Now create a new component by using the following command.

ng g c Timepic

Now open Timepic.component.ts file and add the following code,

import { DatePipe } from '@angular/common';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-timepic',
templateUrl: './timepic.component.html',
styleUrls: ['./timepic.component.css']
})
export class TimepicComponent implements OnInit {
startdateofweek: any;
Enddateofweek: string;
model: any = {};
date = new Date()
name: string;
Friday: any;
Thruds: any;
mon: any;
Tuesday: any;
Wednedday: any;
Sat: any;
Sun: any;
constructor(public datepipe: DatePipe) { }
ngOnInit() {
this.model.startdate = new Date();
debugger;
}
searchdate() {
debugger;
console.log(this.model.startdate);
let getdate = this.datepipe.transform(this.model.startdate, 'yyyy,M,d');
function startOfWeek(date) {
var diff = date.getDate() - date.getDay() + (date.getDay() === 0 ? -6 : 1);
return new Date(date.setDate(diff));
}
function endofweek(date) {
var lastday = date.getDate() - (date.getDay() - 1) + 6;
return new Date(date.setDate(lastday));
}
var dt = new Date(getdate);
this.startdateofweek= this.datepipe.transform(startOfWeek(dt),'EEEE, MMMM d, y');
this.Enddateofweek=this.datepipe.transform(endofweek(dt),'EEEE, MMMM d, y');
function addDays(date, days) {
const find = new Date(Number(date))
find.setDate(date.getDate() + days)
return find
}
const date = new Date(startOfWeek(dt));
this.mon = this.datepipe.transform(startOfWeek(dt), 'EEEE, MMMM d');
this.Tuesday = this.datepipe.transform(addDays(date, 1), 'EEEE, MMMM d');
this.Wednedday = this.datepipe.transform(addDays(date, 2), 'EEEE, MMMM d');
this.Thruds = this.datepipe.transform(addDays(date, 3), 'EEEE, MMMM d');
this.Friday = this.datepipe.transform(addDays(date, 4), 'EEEE, MMMM d');
this.Sat = this.datepipe.transform(addDays(date, 5), 'EEEE, MMMM d');
this.Sun = this.datepipe.transform(endofweek(dt), 'EEEE, MMMM d');
}
}

Open timepic.component.html file and add the following lines

<div class="container" style="margin-bottom: 10px; margin-top: 10px;">
<div class="col-sm-12 btn btn-primary">
How to Get Week start and end date in Angular 10
</div>
</div>
<div class="container">
<form (ngSubmit)="searchdate()" novalidate>
<div class="col-sm-3 form-group">
<input type="text" #startdate="ngModel" name="startdate" [(ngModel)]="model.startdate"
placeholder="From Date" bsDatepicker bsDatepicker [bsConfig]="{ showWeekNumbers: false }"
[bsConfig]="{ showWeekNumbers: false }" class="form-control" />
</div>
<div class="col-sm-3 form-group">
<button type="submit" class="btn btn-success">Find Date</button>
</div>
</form>
</div>
<div></div>
<div class="container">
<div class=" row" style="margin-top:10px;margin-bottom: 10px;">
<div class="col-sm-6 form-group">
<b> Week Start Day and Date :</b> {{startdateofweek}}
</div>
<div class="col-sm-6 form-group">
<b> Week End Day and Date : </b>{{Enddateofweek}}
</div>
</div>
</div>

Now Open app.module.ts file and add the following code.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TimepickerModule } from 'ngx-bootstrap/timepicker';
import { PopoverModule } from 'ngx-bootstrap/popover';
import { TimepicComponent } from './timepic/timepic.component';
import { DatePipe } from '@angular/common';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { GridpipePipe } from './gridpipe.pipe';
@NgModule({
declarations: [
AppComponent,
TimepicComponent,
GridpipePipe
],
imports: [
BrowserModule,BrowserAnimationsModule,FormsModule,
AppRoutingModule,TimepickerModule.forRoot(), PopoverModule.forRoot(), BsDatepickerModule.forRoot(),
],
providers: [DatePipe],
bootstrap: [AppComponent]
})
export class AppModule { }

Now open app.component.html file and add the following code,

<app-timepic></app-timepic>

Now run the project by using the following command: 'npm start

Now select a date from the datepicker and click on Find date button.

Now we got the start and end date of the week we selected.

Now add the following code in Timepic.component.ts to get the selected date and week details

<div class="container" style="margin-bottom: 10px; margin-top: 10px;">
<div class="col-sm-12 btn btn-primary">
How to Get Week start and end date in Angular 10
</div>
</div>
<div class="container">
<form (ngSubmit)="searchdate()" novalidate>
<div class="col-sm-3 form-group">
<input type="text" #startdate="ngModel" name="startdate" [(ngModel)]="model.startdate"
placeholder="From Date" bsDatepicker bsDatepicker [bsConfig]="{ showWeekNumbers: false }"
[bsConfig]="{ showWeekNumbers: false }" class="form-control" />
</div>
<div class="col-sm-3 form-group">
<button type="submit" class="btn btn-success">Find Date</button>
</div>
</form>
</div>
<div></div>
<div class="container">
<div class=" row" style="margin-top:10px;margin-bottom: 10px;">
<div class="col-sm-6 form-group">
<b> Week Start Day and Date :</b> {{startdateofweek}}
</div>
<div class="col-sm-6 form-group">
<b> Week End Day and Date : </b>{{Enddateofweek}}
</div>
</div>
</div>
<div class="container">
<div class="container" style="margin-bottom: 10px; margin-top: 10px;">
<div class="col-sm-12 btn btn-primary">
Select Date Week Days
</div>
</div>
<ul class="list-group">
<li class="list-group-item">Monday:<b> {{mon}}</b></li>
<li class="list-group-item">Tuesday:<b>{{Tuesday}}</b></li>
<li class="list-group-item">Wednedday:<b>{{Wednedday}}</b></li>
<li class="list-group-item">Thursday :<b> {{Thruds}}</b></li>
<li class="list-group-item">Friday : <b>{{Friday}}</b></li>
<li class="list-group-item">Saturday <b>:{{Sat}}</b></li>
<li class="list-group-item">Sunday :<b>{{Sun}}</b></li>
</ul>
</div>

Now run the project by using the following command: 'npm start'

Summary

In this article, we learned how to find a week's start date and end date of a select date in Angular applications.