Example(s) of the Ember Material Design Datepicker in action

American Date

{{md-datepicker placeholder="Enter Date" selectedDate=selectedDate dateChanged=(action (mut selectedDate)) required=true}}

{{selectedDate}}

UK Date

{{md-datepicker placeholder="Enter UK Date" selectedDate=selectedDate2 dateFormat='DD/MM/YYYY' dateChanged=(action (mut selectedDate2)) required=true}}

UK, no initial date, not required

{{md-datepicker placeholder="Enter UK Date" selectedDate=selectedDate3 dateFormat='DD/MM/YYYY' dateChanged=(action (mut selectedDate3))}}

UK, min and max supplied

{{md-datepicker placeholder="Enter UK Date" selectedDate=selectedDate4 dateFormat='DD/MM/YYYY' dateChanged=(action (mut selectedDate4)) required=true minDate=minDate maxDate=maxDate}}

UTC mode

{{md-datepicker placeholder="Enter Date" selectedDate=selectedDateUtc dateChanged=(action (mut selectedDateUtc)) required=true utc=true}}

{{selectedDateUtc}}

Disabled

{{md-datepicker placeholder="Enter Date" selectedDate=selectedDate dateChanged=(action (mut selectedDate)) required=true disabled=true}}

UK, no initial date, required

{{md-datepicker placeholder="Enter UK Date" selectedDate=selectedDate6 dateFormat='DD/MM/YYYY' dateChanged=(action (mut selectedDate6)) required=true}}

Date with time

{{md-datepicker placeholder="Enter Date and Time" selectedDate=selectedDate7 dateChanged=(action (mut selectedDate7)) mode='datetime'}}

{{selectedDate7}}

With auto hide disabled

{{md-datepicker placeholder="Enter Date and Time" selectedDate=selectedDate dateChanged=(action (mut selectedDate)) required=true autoHideAfterSelection=false}}

{{selectedDate}}