title: Extracting and breaking Down a date from a Material Date picker
body: <p>So im trying to figure out how I can &quot;Properly&quot; separate the dates im getting from the Date range selector.</p>
  <p>I've managed to separate them into a start and end value but Id need to more then likely use some kind of regex to separate the dates into a D/M/Y because I have 3 variables I need to fill as later on I need to do calculations with the years and one value is terrible for that. Curious if anyones got any ideas about this</p>
  <p>Outputs:</p>
  <pre><code>1/1/2021 || 1/8/2021
  </code></pre>
  <pre><code>    &lt;mat-form-field appearance=&quot;fill&quot;&gt;
          &lt;mat-label&gt;Enter a date range&lt;/mat-label&gt;
          &lt;mat-date-range-input [formGroup]=&quot;range&quot; [rangePicker]=&quot;picker&quot;&gt;
            &lt;input style=&quot;position: relative;&quot; #Startz matStartDate formControlName=&quot;start&quot; placeholder=&quot;Start date&quot;&gt;
            &lt;input style=&quot;position: relative;&quot;  #Endz matEndDate formControlName=&quot;end&quot; placeholder=&quot;End date&quot;&gt;
          &lt;/mat-date-range-input&gt;
          &lt;mat-datepicker-toggle matSuffix [for]=&quot;picker&quot;&gt;&lt;/mat-datepicker-toggle&gt;
          &lt;mat-date-range-picker #picker&gt;&lt;/mat-date-range-picker&gt;
        
          &lt;mat-error *ngIf=&quot;range.controls.start.hasError('matStartDateInvalid')&quot;&gt;Invalid start date&lt;/mat-error&gt;
          &lt;mat-error *ngIf=&quot;range.controls.end.hasError('matEndDateInvalid')&quot;&gt;Invalid end date&lt;/mat-error&gt;
        &lt;/mat-form-field&gt;
        
   
       &lt;div class=&quot;&quot;&gt;
          &lt;input type=&quot;text&quot; class=&quot;&quot; placeholder=&quot;info&quot; #info required&gt;
       &lt;/div&gt;
      
       &lt;button style=&quot;margin-right:10px;&quot; type=&quot;button&quot; class=&quot;btn googleBtn&quot; value=&quot;Log In&quot; (click)=&quot;createEntry(Startz.value, Endz.value, info.value)&quot;&gt;Create Entry&lt;/button&gt;
  
  
  </code></pre>
  <pre><code>createEntry(startDate, endDate,  info: string){
        alert(startDate + endDate);
    }
  </code></pre>
  <pre><code>export class Entry {
      id: string;
      surname: string;
      color: string;
      startDate: Startdate;
      endDate: Enddate;
      info: string;
      status: boolean;
  }
  
  export class Startdate{
      day: number;
      month: number;
      year: number;
  }
  
  export class Enddate{
      day: number;
      month: number;
      year: number;
  }
  </code></pre>
  <p>This is what ive done so far but there should surely be a better solution for this:</p>
  <pre><code>    var value = startDate;
      var day = value.substring(0,1);
      var month = value.substring(2,3);
      var year = value.substring(4,8);
      var str = &quot;{Day:&quot; + day + &quot;,month:&quot; + month + &quot;,year:&quot; + year + &quot;}&quot;;
        alert(str);
  </code></pre>
  <p>The issue with this way is that asoon as u end up with double digit days/months ect it breaks</p>