0

I am currently am changing an angularjs application to use material design vs bootstrap3. I am not familiar with angularjs, I am a graphic designer. I would like to know how to change the bootstrap datepicker to the material datepicker.

I can add the material tags and it works but I do not know if the attributes are working correctly. Also the date shows backwards from what I want. I want mm/dd/yyyy and it shows yyyy/mm/dd.

Bootstrap:

<input type="text" style="width:100%" required name="DOB" 
       tabindex="4" class="form-control"
       datepicker-options="inlineOptionsDOB"
       uib-datepicker-popup='MM-dd-yyyy'
       ng-model="DOB" is-open="openedDOB"
       show-button-bar="false" ng-click="openedDOB=true" 
       datepicker-append-to-body="true" placeholder="MM-DD-YYYY"
       alt-input-formats="altInputFormats" />

Material: 

<md-input-container>
     <label>Date of Birth</label>
     <md-datepicker type="text" tabindex="4" required
                    ng-model="DOB" name="DOB" 
                    datepickerOptions="inlineOptionsDOB">
     </md-datepicker>
</md-input-container>

controller code: 

  //must be 18 yrs or older and less than 140 years
  var dob18=moment(new Date).subtract(18, 'years');
  var dob140=moment(new Date).subtract(140, 'years');

  $scope.inlineOptionsDOB = {
    maxDate: new Date($filter("date")(dob18, 'yyyy/MM/dd')),
    minDate: new Date($filter("date")(dob140, 'yyyy/MM/dd')),
    initDate: new Date($filter("date")(dob18, 'yyyy/MM/dd')),
  };

I want to know if I am using the correct attributes and to change the date format.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Jessica
  • 23
  • 4
  • Just use [`dob18.toDate()`](https://momentjs.com/docs/#/displaying/as-javascript-date/) instead of doing `new Date()` with a string. You can also just use `moment()` instead of `moment(new Date)`. – Heretic Monkey Sep 03 '19 at 20:40
  • also I don't know angularjs at all, barely. I know html, css. I am a graphic designer. – Jessica Sep 03 '19 at 21:32
  • Just go get you used to doing this, you probably want to create an excel doc with a column for Bootstrap parameters, material parameters while you're going through the different directives. Anyhow to fix the date format issue - https://stackoverflow.com/questions/32566416/change-format-of-md-datepicker-in-angular-material-with-momentjs – kendavidson Sep 04 '19 at 00:26

0 Answers0