Datepicker is a highly configurable component that adds datepicker functionality to your pages. You can\r\n customize the date format and language, restrict the selectable date ranges.
\r\nThe easiest way to add the datepicker component to your app (will be added to the root module)
\r\nng add ngx-bootstrap --component datepicker\r\n
This is a legacy version of datepicker without support of daterangepicker, locales, themes, etc.
\r\n\r\nNote: If you installed ngx-bootstrap not via ng add command, you will need to perform a several actions
\r\nNotable change is additional css for it \"/datepicker/bs-datepicker.css\"
There are two ways of adding css:
\r\n<link rel=\"stylesheet\"\r\n href=\"https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css\"> to your\r\n index.htmlnode_modules/ngx-bootstrap/datepicker/bs-datepicker.css via package bundler\r\n like Angular CLI, if you're using one.\r\n with initial state set by bsInlineValue property
isAnimated config option`,\r\n outlet: DemoDatePickerAnimatedComponent\r\n },\r\n {\r\n title: 'Adaptive position',\r\n anchor: 'adaptive-position',\r\n component: require('!!raw-loader!./demos/adaptive-position/adaptive-position.ts'),\r\n html: require('!!raw-loader!./demos/adaptive-position/adaptive-position.html'),\r\n description: `You can enable adaptive position via adaptivePosition option in bsConfig
You can easily change the date format by specifying the dateInputFormat\r\n in [bsConfig]\r\n
To set your own date format you can use variety of formats provided by\r\n moment.js
\r\nThe following examples show how to use several date formats inside a form:\r\n
YYYY-MM-DDMM/DD/YYYYMMMM Do YYYY,h:mm:ss aHide the datepicker on page scroll.
\r\n `,\r\n outlet: DemoDatepickerHideOnScrollComponent\r\n },\r\n {\r\n title: 'Themes',\r\n anchor: 'themes',\r\n component: require('!!raw-loader!./demos/color-theming/color-theming.ts'),\r\n html: require('!!raw-loader!./demos/color-theming/color-theming.html'),\r\n description: `\r\nDatepicker comes with some default color schemes.\r\n You can change it by manipulating containerClass property in bsConfig object
There are 6 color schemes: theme-default, theme-green, theme-blue,\r\n theme-dark-blue, theme-red, theme-orange
Datepicker can use different locales.
It's possible to change a locale by calling\r\n use\r\n method of BsLocaleService, list of available locales is in dropdown below.
To use a different locale, you have to import it from ngx-bootstrap/chronos first, then\r\n define it in your @NgModule using function defineLocale
Example:
\r\nimport { defineLocale } from 'ngx-bootstrap/chronos';import { deLocale } from 'ngx-bootstrap/locale';defineLocale('de', deLocale);\r\n You can set min and max date of datepicker/daterangepicker using minDate and\r\n maxDate properties
In the following example minDate is set to yesterday and maxDate\r\n to the current day in the next week
You can set which days of the week should be disabled with daysDisabled\r\n
In the following example daysDisabled is set with an array which disabled Saturday and Sunday.\r\n Sunday is considered the first day of the week and thus has the value 0
You can set which dates should be disabled with datesDisabled
In the following example datesDisabled is set with an array to disable 2020-02-05 and 2020-02-09.
NOTE: DO NOT USE this functionality with datesEnabled at the same time
You can set which dates should be enable with datesEnabled
In the following example datesEnabled is set with an array to enable 2020-02-06, 2020-02-08 and 2020-02-11. All other dates are disabled
NOTE: DO NOT USE this functionality with datesDisabled at the same time
You can configure, how many months you want to show for daterangepicker via displayMonths in BsDaterangepickerConfig.
With displayOneMonthRange you can show only one month for two cases
You can set min view mode of datepicker using minMode property
In the following example minMode is set to 'month'
If you want to disable datepicker's or daterangepicker's content set isDisabled property to true
If you want to add custom class to current day datepicker's content set value to customTodayClass option in bsConfig
Datepicker and daterangepicker can be used in forms. Keep in mind that\r\n value of ngModel is Date object for datepicker and array of 2\r\n Date objects for daterangepicker
Allows to return focus to input of datepicker or daterangepicker after the date or daterange selection
`,\r\n outlet: DemoDatePickerReturnFocusToInputComponent\r\n },\r\n {\r\n title: 'Manual triggering',\r\n anchor: 'triggers-manual',\r\n component: require('!!raw-loader!./demos/triggers-manual/triggers-manual.ts'),\r\n html: require('!!raw-loader!./demos/triggers-manual/triggers-manual.html'),\r\n description: `You can manage datepicker's state by using its show(), hide()\r\n and toggle() methods
Add placement property if you want to change placement
You can manage datepicker's options by using its setConfig() method
You can subscribe to datepicker's visibility events
`,\r\n outlet: DemoDatePickerVisibilityEventsComponent\r\n },\r\n {\r\n title: 'Value change event',\r\n anchor: 'value-change-event',\r\n component: require('!!raw-loader!./demos/value-change-event/value-change-event.ts'),\r\n html: require('!!raw-loader!./demos/value-change-event/value-change-event.html'),\r\n description: `You can subscribe to datepicker's value change event (bsValueChange).
You can configure the datepicker via its bsConfig option
You can enable dates from other months via selectFromOtherMonth option in bsConfig
You can enable ability to select a week number (first day of the week will be selected) via selectWeek option in bsConfig
You can enable ability to select a week number (range with first weekday - last weekday will be selected) via selectWeekRange option in bsConfig
Datepicker closes after outside click by default. To change\r\n this behavior, use outsideClick property.
Datepicker can be shown or hidden by changing isOpen property
Use different triggers ( for example keydown, mouseenter and\r\n dblclick ) to interact with datepicker
Style dates with custom classes
`,\r\n outlet: DemoDatepickerDateCustomClassesComponent\r\n },\r\n {\r\n title: 'Tooltip for selected dates',\r\n anchor: 'tooltip-for-selected-dates',\r\n component: require('!!raw-loader!./demos/tooltip-to-selected-dates/tooltip-to-selected-dates.ts'),\r\n html: require('!!raw-loader!./demos/tooltip-to-selected-dates/tooltip-to-selected-dates.html'),\r\n description: ``,\r\n outlet: DemoDatePickerTooltipToSelectedDates\r\n },\r\n {\r\n title: 'Quick select ranges',\r\n anchor: 'quick-select-ranges',\r\n component: require('!!raw-loader!./demos/quick-select-ranges/quick-select-ranges.ts'),\r\n html: require('!!raw-loader!./demos/quick-select-ranges/quick-select-ranges.html'),\r\n description: `Quick select ranges can be added to Daterangepicker using ranges
Pick previous & current month instead of current & next month.When daterange selected and related to current month,\r\n daterangepicker will works by default, with current & next month
`,\r\n outlet: DemoDateRangePickerShowPreviousMonth\r\n },\r\n {\r\n title: 'Show Today Button',\r\n anchor: 'datepicker-show-today-button',\r\n component: require('!!raw-loader!./demos/today-button/today-button.ts'),\r\n html: require('!!raw-loader!./demos/today-button/today-button.html'),\r\n description: `Display an optional 'Today' button that will automatically select today's date.
`,\r\n outlet: DemoDatepickerTodayButtonComponent,\r\n },\r\n {\r\n title: 'Show Clear Button',\r\n anchor: 'datepicker-show-clear-button',\r\n component: require('!!raw-loader!./demos/clear-button/clear-button.ts'),\r\n html: require('!!raw-loader!./demos/clear-button/clear-button.html'),\r\n description: `Display an optional 'Clear' button that will automatically clear date.
`,\r\n outlet: DemoDatepickerClearButtonComponent\r\n },\r\n {\r\n title: 'Start view',\r\n anchor: 'start-view',\r\n component: require('!!raw-loader!./demos/start-view/start-view.ts'),\r\n html: require('!!raw-loader!./demos/start-view/start-view.html'),\r\n description: `Add startView property if you want to change start view
Max date range after first date selection can be added to Daterangepicker using maxDateRange
bsValue property sets initial state in this example
ngModel property sets two-way data binding in this example
Selected date is: {{ getDate() | date:'fullDate'}}\r\n maxDate is today
minDate month is equal to maxDate month
Saturday and Sunday are not selectable
\r\n \r\nSaturday and Sunday are selectable
\r\n \r\nSaturday and Sunday are not selectable
\r\n \r\nSaturday and Sunday are selectable
\r\n \r\n{{datepickerModel}}
{{daterangepickerModel}}\r\n Outside click closes the datepicker in this example
\r\n \r\nOutside click doesn't close the datepicker in this example
\r\n \r\nThe datepicker's placement is right
\r\n \r\nThe datepicker's placement is top
\r\n \r\nThe datepicker's placement is bottom
\r\n \r\nThe datepicker's placement is left
\r\n \r\nAlso works with selectFromOtherMonth option, which allows to select weeks which started on previous\r\n month
If first day of the week is disabled, the next one will be selected.
\r\n\r\nTwo first days of the each week are disabled
\r\nIf all days in week are disabled, you can't select this week
\r\n\r\nAlso works with selectFromOtherMonth option, which allows to select weeks which started on previous\r\n month
If first day of the week is disabled, the next one will be selected.
\r\n\r\nTwo first days of the each week are disabled
\r\n \r\nIf all days in week are disabled, you can't select this week
\r\n\r\nThe datepicker's start view is day (default)
\r\n \r\nThe datepicker's start view is month
\r\n \r\nThe datepicker's start view is year
\r\n \r\nHover over the input to open the datepicker
\r\n \r\nFocus on input and press any key to open the datepicker
\r\n \r\nСlick twice on input to open the datepicker
\r\n \r\nChanged date is {{data | date}}\r\n {{message}}\r\n bsValue property sets initial state in this example
ngModel property sets two-way data binding in this example
Selected date is: {{ getDate() | date:'fullDate'}}\\r\\n maxDate is today
minDate month is equal to maxDate month
Saturday and Sunday are not selectable
\\r\\n \\r\\nSaturday and Sunday are selectable
\\r\\n \\r\\nSaturday and Sunday are not selectable
\\r\\n \\r\\nSaturday and Sunday are selectable
\\r\\n \\r\\n{{datepickerModel}}
{{daterangepickerModel}}\\r\\n Outside click closes the datepicker in this example
\\r\\n \\r\\nOutside click doesn't close the datepicker in this example
\\r\\n \\r\\nThe datepicker's placement is right
\\r\\n \\r\\nThe datepicker's placement is top
\\r\\n \\r\\nThe datepicker's placement is bottom
\\r\\n \\r\\nThe datepicker's placement is left
\\r\\n \\r\\nAlso works with selectFromOtherMonth option, which allows to select weeks which started on previous\\r\\n month
If first day of the week is disabled, the next one will be selected.
\\r\\n\\r\\nTwo first days of the each week are disabled
\\r\\nIf all days in week are disabled, you can't select this week
\\r\\n\\r\\nAlso works with selectFromOtherMonth option, which allows to select weeks which started on previous\\r\\n month
If first day of the week is disabled, the next one will be selected.
\\r\\n\\r\\nTwo first days of the each week are disabled
\\r\\n \\r\\nIf all days in week are disabled, you can't select this week
\\r\\n\\r\\nThe datepicker's start view is day (default)
\\r\\n \\r\\nThe datepicker's start view is month
\\r\\n \\r\\nThe datepicker's start view is year
\\r\\n \\r\\nHover over the input to open the datepicker
\\r\\n \\r\\nFocus on input and press any key to open the datepicker
\\r\\n \\r\\nСlick twice on input to open the datepicker
\\r\\n \\r\\nChanged date is {{data | date}}\\r\\n {{message}}\\r\\n