Post
Ask Question

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.
  1. ng new Timepicker  
Open this project in Visual Studio Code and install bootstrap by using the following command.
  1. npm install bootstrap --save   
Now open styles.css file and add Bootstrap file reference. To add reference in styles.css file add this line.
  1. @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.
  1. npm install ngx-bootstrap --save    
 Now open index.html file and add the following cdn link to add css for datepicker
  1. <link rel="stylesheet" href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css">   
Now create a new component by using the following command. 
  1. ng g c Timepic
 Now open Timepic.component.ts file and add the following code,
  1. import { DatePipe } from '@angular/common';  
  2. import { Component, OnInit } from '@angular/core';  
  3. @Component({  
  4.   selector: 'app-timepic',  
  5.   templateUrl: './timepic.component.html',  
  6.   styleUrls: ['./timepic.component.css']  
  7. })  
  8. export class TimepicComponent implements OnInit {  
  9.   startdateofweek: any;  
  10.   Enddateofweek: string;  
  11.   model: any = {};  
  12.   date = new Date()  
  13.   name: string;  
  14.   Friday: any;  
  15.   Thruds: any;  
  16.   mon: any;  
  17.   Tuesday: any;  
  18.   Wednedday: any;  
  19.   Sat: any;  
  20.   Sun: any;  
  21.   constructor(public datepipe: DatePipe) { }  
  22.   ngOnInit() {  
  23.     this.model.startdate = new Date();  
  24.     debugger;  
  25.   }  
  26.   searchdate() {  
  27.     debugger;  
  28.     console.log(this.model.startdate);  
  29.     let getdate = this.datepipe.transform(this.model.startdate, 'yyyy,M,d');  
  30.     function startOfWeek(date) {  
  31.       var diff = date.getDate() - date.getDay() + (date.getDay() === 0 ? -6 : 1);  
  32.       return new Date(date.setDate(diff));  
  33.     }  
  34.     function endofweek(date) {  
  35.       var lastday = date.getDate() - (date.getDay() - 1) + 6;  
  36.       return new Date(date.setDate(lastday));  
  37.     }  
  38.     var dt = new Date(getdate);  
  39.     this.startdateofweek= this.datepipe.transform(startOfWeek(dt),'EEEE, MMMM d, y');  
  40.     this.Enddateofweek=this.datepipe.transform(endofweek(dt),'EEEE, MMMM d, y');  
  41.   
  42.     function addDays(date, days) {  
  43.       const find = new Date(Number(date))  
  44.       find.setDate(date.getDate() + days)  
  45.       return find  
  46.     }  
  47.     const date = new Date(startOfWeek(dt));  
  48.     this.mon = this.datepipe.transform(startOfWeek(dt), 'EEEE, MMMM d');  
  49.     this.Tuesday = this.datepipe.transform(addDays(date, 1), 'EEEE, MMMM d');  
  50.     this.Wednedday = this.datepipe.transform(addDays(date, 2), 'EEEE, MMMM d');  
  51.     this.Thruds = this.datepipe.transform(addDays(date, 3), 'EEEE, MMMM d');  
  52.     this.Friday = this.datepipe.transform(addDays(date, 4), 'EEEE, MMMM d');  
  53.     this.Sat = this.datepipe.transform(addDays(date, 5), 'EEEE, MMMM d');  
  54.     this.Sun = this.datepipe.transform(endofweek(dt), 'EEEE, MMMM d');  
  55.   }  
  56. }  
Open timepic.component.html file and add the following lines
  1. <div class="container" style="margin-bottom: 10px; margin-top: 10px;">  
  2.     <div class="col-sm-12 btn btn-primary">  
  3.         How to Get Week start and end date in Angular 10  
  4.     </div>  
  5. </div>  
  6. <div class="container">  
  7.     <form (ngSubmit)="searchdate()" novalidate>  
  8.         <div class="col-sm-3 form-group">  
  9.             <input type="text" #startdate="ngModel" name="startdate" [(ngModel)]="model.startdate"  
  10.                 placeholder="From Date" bsDatepicker bsDatepicker [bsConfig]="{ showWeekNumbers: false }"  
  11.                 [bsConfig]="{ showWeekNumbers: false }" class="form-control" />  
  12.         </div>  
  13.         <div class="col-sm-3 form-group">  
  14.             <button type="submit" class="btn btn-success">Find Date</button>  
  15.         </div>  
  16.     </form>  
  17. </div>  
  18. <div></div>  
  19. <div class="container">  
  20.     <div class="  row" style="margin-top:10px;margin-bottom: 10px;">  
  21.         <div class="col-sm-6 form-group">  
  22.             <b> Week Start Day and Date :</b> {{startdateofweek}}  
  23.         </div>  
  24.         <div class="col-sm-6 form-group">  
  25.             <b> Week End Day and Date : </b>{{Enddateofweek}}  
  26.         </div>  
  27.     </div>  
  28. </div>  
Now Open app.module.ts file and add the following code. 
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { FormsModule } from '@angular/forms';  
  4. import { AppRoutingModule } from './app-routing.module';  
  5. import { AppComponent } from './app.component';  
  6. import { TimepickerModule } from 'ngx-bootstrap/timepicker';  
  7. import { PopoverModule } from 'ngx-bootstrap/popover';  
  8. import { TimepicComponent } from './timepic/timepic.component';  
  9. import { DatePipe } from '@angular/common';  
  10. import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';    
  11. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';  
  12. import { GridpipePipe } from './gridpipe.pipe';  
  13. @NgModule({  
  14.   declarations: [  
  15.     AppComponent,  
  16.     TimepicComponent,  
  17.     GridpipePipe  
  18.   ],  
  19.   imports: [  
  20.     BrowserModule,BrowserAnimationsModule,FormsModule,  
  21.     AppRoutingModule,TimepickerModule.forRoot(), PopoverModule.forRoot(), BsDatepickerModule.forRoot(),  
  22.   ],  
  23.   providers: [DatePipe],  
  24.   bootstrap: [AppComponent]  
  25. })  
  26. export class AppModule { }  
Now open app.component.html file and add the following code,
  1. <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
  1. <div class="container" style="margin-bottom: 10px; margin-top: 10px;">  
  2.     <div class="col-sm-12 btn btn-primary">  
  3.         How to Get Week start and end date in Angular 10  
  4.     </div>  
  5. </div>  
  6. <div class="container">  
  7.     <form (ngSubmit)="searchdate()" novalidate>  
  8.         <div class="col-sm-3 form-group">  
  9.             <input type="text" #startdate="ngModel" name="startdate" [(ngModel)]="model.startdate"  
  10.                 placeholder="From Date" bsDatepicker bsDatepicker [bsConfig]="{ showWeekNumbers: false }"  
  11.                 [bsConfig]="{ showWeekNumbers: false }" class="form-control" />  
  12.         </div>  
  13.         <div class="col-sm-3 form-group">  
  14.             <button type="submit" class="btn btn-success">Find Date</button>  
  15.         </div>  
  16.     </form>  
  17. </div>  
  18. <div></div>  
  19. <div class="container">  
  20.     <div class="  row" style="margin-top:10px;margin-bottom: 10px;">  
  21.         <div class="col-sm-6 form-group">  
  22.             <b> Week Start Day and Date :</b> {{startdateofweek}}  
  23.         </div>  
  24.         <div class="col-sm-6 form-group">  
  25.             <b> Week End Day and Date : </b>{{Enddateofweek}}  
  26.         </div>  
  27.     </div>  
  28. </div>  
  29. <div class="container">  
  30.     <div class="container" style="margin-bottom: 10px; margin-top: 10px;">  
  31.         <div class="col-sm-12 btn btn-primary">  
  32.             Select Date Week Days  
  33.         </div>  
  34.     </div>  
  35.     <ul class="list-group">  
  36.         <li class="list-group-item">Monday:<b> {{mon}}</b></li>  
  37.         <li class="list-group-item">Tuesday:<b>{{Tuesday}}</b></li>  
  38.         <li class="list-group-item">Wednedday:<b>{{Wednedday}}</b></li>  
  39.         <li class="list-group-item">Thursday :<b> {{Thruds}}</b></li>  
  40.         <li class="list-group-item">Friday : <b>{{Friday}}</b></li>  
  41.         <li class="list-group-item">Saturday <b>:{{Sat}}</b></li>  
  42.         <li class="list-group-item">Sunday :<b>{{Sun}}</b></li>  
  43.     </ul>  
  44. </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.


Similar Articles