How to increase the width of an AngularJS Material datepicker

Question

I have something like this:

How is it possible to make the line under the "Date of recruitment" and the "down array" adapt to half of the layout as in flex="50" for example. It is pretty easy for normal input fields.

Current markup:

<md-content layout-padding> 
 <form> 
  <div layout-gt-xs="row"> 
   <md-input-container class="md-block" flex-gt-xs> 
      <label> date </label> 
      <md-datepicker ng-model="cv.contract.dateOfRecruitment"></md-datepicker> 
   </md-input-container>
   <md-input-container class="md-block" flex-gt-xs> 
      <label> months </label> 
          <input required ng-model="cv.contract.months" ng-pattern="/^[1-9][0-9]*$/" /> 
   </md-input-container> 
  </div>
 </form> 
</md-content>

Can you share the markup you are using currently please – mindparse Sep 13 '16 at 11:08 — mindparse, Sep 13 '16 at 11:08
Yeah sorry, I have added the markup to the question. – Sep 13 '16 at 11:25 — , Sep 13 '16 at 11:25

score 1 · Answer 1 · answered Jun 10 '17 at 14:16

1

See these tickets:

This feature won't be implemented due to layout troubles. But there's a workaround solution described here

answered Jun 10 '17 at 14:16

Mikhail Kopylov

2,008
5
27
58

score 1 · Answer 2 · answered Nov 13 '19 at 14:04

There is no official documentation. You could consider using custom CSS.

Try to add width: 100% to the container of the date picker. It will increase width certainly. Of course, it assumes that the parent container of date picker is divided by half-width(50%) each other.

score 0 · Answer 3 · answered Nov 13 '19 at 13:47

0

Adding this property as !important worked for me

mat-form-field {
  width: 100px !important;
}

answered Nov 13 '19 at 13:47

Pipo

4,653
38
47

score 0 · Answer 4 · answered Mar 12 '20 at 17:59

0

You can set the size of the datepicker:

<input class="md-datepicker-input md-input" id="input_58" size="50">

answered Mar 12 '20 at 17:59

Sterling Diaz

3,789
2
31
35

How to increase the width of an AngularJS Material datepicker

4 Answers4