CODEWITHSUNDEEP
javascripthtmlcssangularbootstrap-4
Fernando Caria
Fernando Caria

Reputation: 113

How to build a datepicker in Angular with a button (example image)

So I'm trying to build a datepicker in angular, but i'm not achieving what I pretend.

I use the default angular material datepicker that looks like this:

What I have

But aesthetically is not what I want to achieve.

Heres an image of what I want:

Objective

How can i make something like this? All put together?

Thank you in advance.

Best regards!

Upvotes: 3

Views: 2756

Answers (3)

ArcX
ArcX

Reputation: 817

The style you want to achieve looks similar to the bootstrap styles. If you don't have bootstrap in your project it's not too difficult to get the style.

HTML

<div class="dp-group">
  <input class="dp-input" [matDatepicker]="picker" placeholder="YYYY-MM-DD">
  <button (click)="picker.open()" class="dp-button">
    <!-- Date Icon Here -->
    ico
  </button>
  <mat-datepicker #picker ></mat-datepicker>
</div>

CSS

.dp-input {
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  background: rgb(238, 238, 238);
  border: 1px solid #d1d1d1;
  border-radius: 3px 0px 0px 3px;
}

.dp-group {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.dp-button {
  cursor: pointer;
  margin-left: 0px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid #d1d1d1;
  border-left: 0px;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  box-shadow: 1px 1px 2px 0px #EEE;
  border-radius: 0px 3px 3px 0px;
}

Check this stackblitz

Upvotes: 2

Eliseo
Eliseo

Reputation: 57981

just beauty 

  <input  [matDatepicker]="picker" placeholder="Choose a date">
  <button (click)="picker.open()">click<button>
  <mat-datepicker #picker ></mat-datepicker>

Upvotes: 0

Quentin
Quentin

Reputation: 1933

There is more than one appearance for input in Angular Material.

This one can correspond :

<mat-form-field appearance="outline">
   <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker" placeholder="Date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

enter image description here

Upvotes: 0

Related Questions