Search code examples
htmlangularngx-bootstrap

allow time picker in BsDatepickerConfig


I'm using BsDatepickerConfig to pick date also I want to use it to pick time in same field is there any way?

 <div class="col-lg-6 col-md-6 col-sm-6">
        <fieldset [disabled]="caseFound">
        <div class="ui-input-group">
        <input type="text" class="form-control" #dp="bsDatepicker" bsDatepicker
         bsConfig]="bsConfig" formControlName="cardExpiryDate" placeholder='DD-MM-YYYY'
         (ngModelChange)="triggerCheck()">
          <span class="input-bar"></span>
          <label>Card Expiry Date <span class="mdtr">*</span></label>
          <span *ngIf="submitted && f.cardExpiryDate.errors" class="tooltiptext">{{'Card Expiry Date is required'}}</span>
           </div>
        </fieldset>
         </div>

Solution

  • You can pass withTimepicker as true in bsconfig:

        [bsConfig]="{withTimepicker: true, rangeInputFormat : 'MMMM Do YYYY, h:mm:ss a', dateInputFormat: 'MMMM Do YYYY, h:mm:ss a'}"
    

    Example from documentation.

    withTimepicker config option was added in ngx-bootstrap v7.1.2