Creating a calendar field for my validity field is on my to-do list.
https://i.sstatic.net/0JLHt.png
Here's the code I have so far:
<div class="col-12 col-12 col-md-4 col-lg-2">
<div class="form-group">
<label for="validity">Validaty</label>
<input id="validity" name="validity" type="text" class="form-control"
[(ngModel)]="order.validity"
style="background-color: white; max-width: 300px;width: 100%;"
placeholder="Validity" autofocus>
</div>
</div>
I'm taking inspiration from these two fields:
https://i.sstatic.net/O6GeC.png
And here's the corresponding code:
<div class="form-group row">
<label for="picker2" class="col-12 col-sm-4 col-form-label">{{'startDate | t }}</label>
<div class="col-12 col-sm-8">
<div class="input-group" style="background-color: white; max-width: 300px;">
<input id="picker2" class="form-control" placeholder="yyyy-mm-dd" name="dp2"
ngbDatepicker #dp2="ngbDatepicker" [(ngModel)]="search.enddate">
<div class="input-group-append" (click)="dp2.toggle()">
<div class="input-group-text">
<i class="icon-regular i-Calendar-4"></i>
</div>
</div>
</div>
</div>
</div>
I attempted to tweak the code, but the icon ended up in the wrong position. Can someone help me figure out the issue?
<div class="col-12 col-12 col-md-4 col-lg-2">
<div class="form-group">
<label for="validity">{{'3735' | t}}</label>
<input id="validity" name="validity" class="form-control" placeholder="yyyy-mm-dd" name="dp2"
ngbDatepicker #dp2="ngbDatepicker"
[(ngModel)]="order.validity "
style="background-color: white; max-width: 300px;width: 100%;"
placeholder="Validity" autofocus>
<div class="input-group-append" (click)="dp2.toggle()">
<div class="input-group-text">
<i class="icon-regular i-Calendar-4"></i>
</div>
</div>
</div>