META-INF.resources.bower_components.angular-bootstrap-datetimepicker.demo.index.html Maven / Gradle / Ivy
Show all versions of jwebmp-bootstrap-date-time-picker Show documentation
Angular Bootstrap - Date Time Picker Demo
Drop-down Datetime with input box
No formatting
Notice that you cannot enter a date with the keyboard.
dropdownSelector: '#dropdown1'
to toggle the dropdown.
Drop-down Datetime with input box
Localized formatting using angular-date-time-input
directive
Notice that you CAN enter a date with the keyboard.
dropdownSelector: '#dropdown2'
to toggle the dropdown.
Drop-down Datetime with input box
Default configuration
data-on-set-time='inputOnTimeSet()'
to toggle the dropdown.
Drop-down Datetime form integration
dropdownSelector: '#dropdown4'
to toggle the dropdown.
This example shows a date picker that has the required attribute.
Note that the user must type into the input to toggle dirty/pristine.
Drop-down using text link
dropdownSelector: '#dropdown5'
to toggle the dropdown.
Formatted Date: {{ data.linkCalendar | date:'medium' }}
Show / hide with check box
startView: 'day'
and minuteStep: 15
data-on-set-time='checkboxOnTimeSet()'
to toggle visibility.
Formatted Date: {{ data.checkboxCalendar | date:'medium' }}
Click me to show/hide via ng-show:
Embedded calendar
Default configuration
Formatted Date: {{ data.embeddedYear | date:'yyyy-MM-dd h:mm a' }}
Embedded calendar form integration
This example shows a date picker that has the required attribute.
Note that without an input, only validity is tracked by ngModel.
Embedded calendar with property configuration
data-datetimepicker-config="config.datetimePicker"
which returns { startView: 'year' }
Formatted Date: {{ data.embeddedPropertyConfig | date:'yyyy-MM-dd h:mm a' }}
Embedded calendar with function configuration
data-datetimepicker-config="configFunction()"
which returns { startView: 'month' }
Formatted Date: {{ data.embeddedFunctionConfig | date:'yyyy-MM-dd h:mm a' }}
ng-repeat with drop-down using text link
data-on-set-time="guardianOnSetTime($index, guardian, newDate, oldDate)"
Embedded calendar with configureOn
Every time you click the button, the startView is changed
configureOn: 'config-changed'
to cause the directive to re-read its configuration.
Start View: {{ config.configureOnConfig.startView }}
Embedded calendar with renderOn
Every time you click the button, the selectable attribute is toggled.
renderOn: 'valid-dates-changed'
to cause the directive to re-render.
Date range picker
Every time you select a start date, dates before the start date are disabled in the end date.
This is a little more complex than the other examples.
Start Date: renderOn: 'end-date-changed'
to cause the directive to re-render when the end date changes,
and data-on-set-time="startDateOnSetTime()"
to broadcast when the start date changes,
and finally data-before-render="beforeRenderStartDate($dates)"
to disable the dates after the selected end date.
End Date: renderOn: 'start-date-changed'
to cause the directive to re-render when the start date changes,
and data-on-set-time="endDateOnSetTime()"
to broadcast when the end date changes,
and finally data-before-render="beforeRenderEndDate($view, $dates, $leftDate, $upDate, $rightDate)"
to disable the dates before the selected start date.
NB: It is possible that data coming from the server (or via a defect in the controller) that the start date is after the end date.
To allow the user to get themselves out of this situation, your implementation might not disable any dates if the start date is greater than the end date.