ngComboDatePicker demos

Basic example

Choose a date:

Current selection is: {{ basic }}

Change order of combo boxes

Choose a date:

Current selection is: {{ change }}

Set initial date

To fixed value

Choose a date:

Current selection is: {{ fixed }}

To dynamic value

Choose a date:

Current selection is: {{ dynamic }}

To empty value

Choose a date:

Current selection is: {{ emptyDate }}

Define minimum and maximum dates

Statically

Choose a date:

Current selection is: {{ range }}

Dynamically

Minimum date:

Maximum date:

Choose a date:

Current selection is: {{ dyn_range }}

Change strings for months

Choose a date:

Current selection is: {{ names }}

Define attributtes (for each combobox)

Styles

Choose a date:

Current selection is: {{ attrs }}

Classes

Choose a date:

Current selection is: {{ classes }}

Change years order

Choose a date:

Current selection is: {{ yearsOrder }}

Timezones

Choose a date:

Current selection is: {{ timezone1 }}

Choose a date:

Current selection is: {{ timezone2 }}

Choose a date:

Current selection is: {{ timezone3 }}

Place holders

Choose a date:

Current selection is: {{ placeholder }}

Form validation

Using inners <select>

Choose a date:

Current selection is: {{ formv }}

Form is valid: {{ myForm.$invalid? 'No' : 'Yes' }}

Field Pristine Dirty Touched Untouched
Date {{ myForm.formv_date.$pristine? 'Yes' : 'No' }} {{ myForm.formv_date.$dirty? 'Yes' : 'No' }} {{ myForm.formv_date.$touched? 'Yes' : 'No' }} {{ myForm.formv_date.$untouched? 'Yes' : 'No' }}
Month {{ myForm.formv_month.$pristine? 'Yes' : 'No' }} {{ myForm.formv_month.$dirty? 'Yes' : 'No' }} {{ myForm.formv_month.$touched? 'Yes' : 'No' }} {{ myForm.formv_month.$untouched? 'Yes' : 'No' }}
Year {{ myForm.formv_year.$pristine? 'Yes' : 'No' }} {{ myForm.formv_year.$dirty? 'Yes' : 'No' }} {{ myForm.formv_year.$touched? 'Yes' : 'No' }} {{ myForm.formv_year.$untouched? 'Yes' : 'No' }}

Using ngRequired and name

Choose a date:

Current selection is: {{ requiredDate }}

Date selector is dirty: {{ myOtherForm.my_date.$dirty? 'Yes' : 'No' }}

Date selector is valid: {{ myOtherForm.my_date.$invalid? 'No' : 'Yes' }}

Date selector was touched: {{ myOtherForm.my_date.$touched? 'Yes' : 'No' }}

Form is valid: {{ myOtherForm.$invalid? 'No' : 'Yes' }}

Disable combo boxes

Disable all

Choose a date:

Disable combo boxes

Disable one by one

Choose a date:

Disable date

Disable month

Disable year

Change event

Choose a date:

The date was never changed last changed on {{ lastChange | date:'medium' }}