Skip to content

input click opens the calendar

Keke edited this page Mar 6, 2020 · 7 revisions

Input box click opens the calendar.

<style>
  .input-box-container {
    position: relative;
  }
  .input-box {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 16px;
  }
</style>

<div class="input-box-container">
  <input class="input-box" placeholder="Click to select a date" 
    angular-mydatepicker name="mydate" (click)="dp.toggleCalendar()" 
    [(ngModel)]="model" [options]="myDpOptions"
    #dp="angular-mydatepicker"/>
</div>
import {IAngularMyDpOptions, IMyDateModel} from 'angular-mydatepicker';
// other imports are here...

export class MyTestApp {
  myDpOptions: IAngularMyDpOptions = {
    dateRange: false,
    dateFormat: 'dd.mm.yyyy'
    // other options are here...
  };

  model: IMyDateModel = null;

  constructor() { }
}