{"_id":"@dhlee2/ngx-daterangepicker-material","_rev":"2-20e3c64387690a99ed3d5d4b6b14351d","name":"@dhlee2/ngx-daterangepicker-material","dist-tags":{"latest":"3.0.2"},"versions":{"3.0.1":{"name":"@dhlee2/ngx-daterangepicker-material","version":"3.0.1","description":"Angular 2+ date range picker (with material design theme)","keywords":["angular2","angular4","angular5","angular6","ng2","daterangepicker","material","component","directive","daterange","date","moment","picker"],"homepage":"https://github.com/fetrarij/ngx-daterangepicker-material","license":"MIT","main":"bundles/dhlee2-ngx-daterangepicker-material.umd.js","typings":"dhlee2-ngx-daterangepicker-material.d.ts","schematics":"./schematics/collection.json","author":{"name":"David L."},"repository":{"type":"git","url":"git+https://github.com/dlee3/ngx-daterangepicker-material.git"},"peerDependencies":{"moment":"^2.24.0","@angular/common":"^9.0.0","@angular/core":"^9.0.0","@angular/material":"^9.0.0","tslib":"^1.10.0"},"$schema":"./node_modules/ng-packagr/package.schema.json","bugs":{"url":"https://github.com/dlee3/ngx-daterangepicker-material/issues"},"dependencies":{},"module":"fesm5/dhlee2-ngx-daterangepicker-material.js","es2015":"fesm2015/dhlee2-ngx-daterangepicker-material.js","esm5":"esm5/dhlee2-ngx-daterangepicker-material.js","esm2015":"esm2015/dhlee2-ngx-daterangepicker-material.js","fesm5":"fesm5/dhlee2-ngx-daterangepicker-material.js","fesm2015":"fesm2015/dhlee2-ngx-daterangepicker-material.js","metadata":"dhlee2-ngx-daterangepicker-material.metadata.json","sideEffects":false,"_id":"@dhlee2/ngx-daterangepicker-material@3.0.1","_nodeVersion":"12.16.2","_npmVersion":"6.14.4","dist":{"integrity":"sha512-/JnN2+lw/BkTQ2blA5Yv6Sb/3EvDUtjbOK0/OxT7+Cl+cTsj9RF6XREvoEYBrVaVbbS1VRxTvIOD6o9/pv9EkA==","shasum":"8d62818debe1beb010e23cfa7c2fcd27de8154be","tarball":"https://registry.npmjs.org/@dhlee2/ngx-daterangepicker-material/-/ngx-daterangepicker-material-3.0.1.tgz","fileCount":45,"unpackedSize":1657279,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo0C/CRA9TVsSAnZWagAAmw4P/RZpJ9JcLrhVCIBxoiWU\n2/JsszkKFEnBkqgTxzUHDXAAUm9Der4InrQFZD5LLKT9Rs1VMTWL7Bk5rPtw\nS5hpEmlEMXLabzB3MMdr+26rXjuszODfvJTE/TsmvvSDpMG5ROk3+Z1CFsiw\nHcezDZvPRVOofKoQqw7e7tvYMw9pVltGybTC6aoTiLI+QN2rZabZb4fmpJu7\nC9kV9Mj8EPxrswKobOUsfqXisxrA/A9USKxCmUvyO3eR3RHtlS0rLlWVm9eC\nqYfaXpys+ZYOmy4UZrLdKlTvjztub0kNUSwQT44wENfD+cAghzVs0cntELiv\nRp3pKMrWjwBD8ey+NZF3Dd2uwiUA39+x5QjMasvCEPjlK4v7YhT/CqOIqPni\nGTXZITIFP0AacW8taDix2FesM4YeKZWI/jTRAk6mVH+vy6HG3gmIrQBkZ1yq\n8/dArjoLiumVdi7ueYqNMTL33aC7cKjlfBXlWeuerRKusoC4No+q3JjbcSQW\nAW3R4UNcHHJKqDaKKby32mHfM/faYCpL6uBThH7jckwIc8vTeINLyrnjSJPu\nFaMCQAWcZXVugKHAH2E1hdkBJv4+P4xGRQfAVrGj33yiNt9allT3aTgnBVpO\nijNccJC9Oxb+733QWwMdnx2yhXh8+V1sfQskjuvDdHArfhSwdwAwwoET5QXd\n7VvW\r\n=3xxE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE5pnnqwqccLCsiav1zuD+3NK98FOoklKTnm2tBExbGYAiAdgztPyUhuJ6NlcS/5GJCx7enHk/R0KkwFRICW4oxu2g=="}]},"maintainers":[{"name":"dhlee3","email":"david@leejungle.com"}],"_npmUser":{"name":"dhlee3","email":"david@leejungle.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-daterangepicker-material_3.0.1_1587757246653_0.2553963217669115"},"_hasShrinkwrap":false},"3.0.2":{"name":"@dhlee2/ngx-daterangepicker-material","version":"3.0.2","description":"Angular 2+ date range picker (with material design theme)","keywords":["angular2","angular4","angular5","angular6","ng2","daterangepicker","material","component","directive","daterange","date","moment","picker"],"homepage":"https://github.com/fetrarij/ngx-daterangepicker-material","license":"MIT","main":"bundles/dhlee2-ngx-daterangepicker-material.umd.js","typings":"dhlee2-ngx-daterangepicker-material.d.ts","schematics":"./schematics/collection.json","author":{"name":"David L."},"repository":{"type":"git","url":"git+https://github.com/dlee3/ngx-daterangepicker-material.git"},"peerDependencies":{"moment":"^2.24.0","@angular/common":"^9.0.0","@angular/core":"^9.0.0","@angular/material":"^9.0.0","tslib":"^1.10.0"},"$schema":"./node_modules/ng-packagr/package.schema.json","bugs":{"url":"https://github.com/dlee3/ngx-daterangepicker-material/issues"},"dependencies":{},"module":"fesm5/dhlee2-ngx-daterangepicker-material.js","es2015":"fesm2015/dhlee2-ngx-daterangepicker-material.js","esm5":"esm5/dhlee2-ngx-daterangepicker-material.js","esm2015":"esm2015/dhlee2-ngx-daterangepicker-material.js","fesm5":"fesm5/dhlee2-ngx-daterangepicker-material.js","fesm2015":"fesm2015/dhlee2-ngx-daterangepicker-material.js","metadata":"dhlee2-ngx-daterangepicker-material.metadata.json","sideEffects":false,"_id":"@dhlee2/ngx-daterangepicker-material@3.0.2","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"dhlee3","email":"david@leejungle.com"},"dist":{"integrity":"sha512-WIkglq90cCq6OeH+m0hff0XXZutBDTNYylovPVixKIx31QSbUXFpjaHHLcuaLTsLxtEnm41l2MuIzgxVfOz6WA==","shasum":"850384d16158a9e2b8c637fdc6c70f01fcff4e8c","tarball":"https://registry.npmjs.org/@dhlee2/ngx-daterangepicker-material/-/ngx-daterangepicker-material-3.0.2.tgz","fileCount":45,"unpackedSize":1657279,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo0MgCRA9TVsSAnZWagAAyUQP/21a4QVfkJx3UsuxPe6L\nyt7KBQgNDK+HNmzXEtAIC8sdoaqDhy6uyprMx23BdxfTom4my5VGnVD8a1eW\npppYjT15Tm42LoMKQ0NWkZOIAhcsmlxxOTnbZn5pPdvbfLxYtM4zmE5AIQ20\nvapbnxcgoxVfqz8tBu+/mxBxPEEnjNBjzoneCy/KeK8s5ayRL7ntsi523YsV\nDR4xWjSFJq17sJ7IaNrh9zeP4veTwbO+fV51Mk4Qavuz4WVgy0WhvabG4J7u\nZ1GPD+fP0yHaOdXNDeqXK87aj/g+L5B9I1l8UHvgntz4zWtkvgu8cxyv7ZYA\nR0ev94TXCh0ZeQoKfAizkHjD+1hb1FW43T5cwUp+J7gFG9DLihIKxEm+j8o3\nvAPNUbYTn04OIY8+tfmlqlGe2amQH4VBGjyVhng4EI6u65iHvADvn919fBVF\nWXw+SzQfkaaRGoReg5h4zw0+ATTQOlEMMHEqg6Z+5Bv9T6Ie0Sp3KFxV8tQ+\nyhs0KQPDCvfbU2uYaH8UWh63YksyT/OeiIB9antORbTIokBNYgOBMMRlHTQt\nKg7NLB3+enSJ0sF/vYGuSgPV2jnUd+ypXPAsdiO5Bhjtbcx3SwyHj4XyrhNJ\nyAFan1vITIOPrGkX4kN/vdzDnIKkY0abhH1qK1NyyG6HTf2QpShz+ClQ5zee\nurwp\r\n=a3is\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHN+6udCWPcD7Uen1GO1SOxkS28qHV86mRCPnZX1CHDqAiAq5kLoY8CC+zLmWo9zb//Fhj0ubU3kUQx9IS1qz3Tsyw=="}]},"maintainers":[{"name":"dhlee3","email":"david@leejungle.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-daterangepicker-material_3.0.2_1587757855547_0.902331681455893"},"_hasShrinkwrap":false}},"time":{"created":"2020-04-24T19:40:46.390Z","3.0.1":"2020-04-24T19:40:46.826Z","modified":"2022-04-05T04:20:42.965Z","3.0.2":"2020-04-24T19:50:55.688Z"},"maintainers":[{"name":"dhlee3","email":"david@leejungle.com"}],"description":"Angular 2+ date range picker (with material design theme)","homepage":"https://github.com/fetrarij/ngx-daterangepicker-material","keywords":["angular2","angular4","angular5","angular6","ng2","daterangepicker","material","component","directive","daterange","date","moment","picker"],"repository":{"type":"git","url":"git+https://github.com/dlee3/ngx-daterangepicker-material.git"},"author":{"name":"David L."},"bugs":{"url":"https://github.com/dlee3/ngx-daterangepicker-material/issues"},"license":"MIT","readme":"# ngx-daterangepicker-material\n\n---\n\n## Alert!\n\nThis is a fork of https://github.com/fetrarij/ngx-daterangepicker-material that fixes this issue https://github.com/fetrarij/ngx-daterangepicker-material/issues/237.\nIf this pull request (https://github.com/fetrarij/ngx-daterangepicker-material/pull/270) has been merged, then please use the original repo.\n\n---\n\n> Angular 2+ Date range picker.\n\n[](https://travis-ci.org/fetrarij/ngx-daterangepicker-material)\n[](https://badge.fury.io/js/ngx-daterangepicker-material)\n[](https://github.com/fetrarij/ngx-daterangepicker-material/commits/master)\n\nThis `Angular Material` plugin is compatible with Angular 2+ and is Ivy compatible. It leverages `moment.js` to handle date manipulation and parsing. The base for this plugin was originally the [Bootstrap Date Range Picker](http://www.daterangepicker.com), but its dependencies on jQuery and Bootstrap were removed. `Angular Material` themes are fully supported since v3.0.0, so you can just drop this component into an existing Material project and it will blend right into your application.\n\n\n\nDemo: https://fetrarij.github.io/ngx-daterangepicker-material/\n\n---\n\n## Versions\n\n| Angular | ngx-daterangepicker-material |\n| ------- | :--------------------------: |\n| >=9.0.0 | v2.3.x and v3.x |\n| <9.0.0 | v2.2.x and below |\n\n---\n\n## Installation\n\n### Using the Angular CLI\n\nThe recommended way to install `ngx-daterangepicker-material` is by leveraging the `Angular CLI`, which will take care of all the heavy lifting for you:\n\n```\nng add ngx-daterangepicker-material\n```\n\n### Manual install\n\nIf you so choose, you can also manually install the plugin following these steps.\nYou'll first need to install `Angular Material` (see the [official docs](https://material.angular.io/guide/getting-started) for more information):\n\n```\nng add @angular/material\n```\n\nNext up, install `ngx-daterangepicker-material` package using your prefered package manager:\n\n```\nnpm i -D ngx-daterangepicker-material\nyarn add -D ngx-daterangepicker-material\n```\n\nimport **NgxDaterangepickerMd** in your module:\n\n```typescript\nimport { FormsModule } from '@angular/forms';\nimport { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';\nimport { App } from './app';\n\n@NgModule({\n imports: [\n ... ,\n NgxDaterangepickerMd.forRoot()\n ],\n declarations: [App],\n bootstrap: [App]\n})\nexport class AppModule {}\n```\n\n## Usage example\n\nThe [demo](https://fetrarij.github.io/ngx-daterangepicker-material/) is the best place to see the picker in action in some different use case, along with the accompanying source code. The picker can be used in two ways, either as a `Component` or a `Directive`. Two basic snippets illustrating this can be found below:\n\n### Directive\n\nAdding the `ngxDaterangepickerMd` directive to an `` element adds the picker as a pop-up element to that `` field. The `drops` (`up` or `down`) and `opens` (`left`, `center` or `right`) inputs determine where to display the pop-up.\n\n```html\n\n```\n\n### with some options:\n\n```html\n\n```\n\nYou can [play with our online demo here](https://fetrarij.github.io/ngx-daterangepicker-material/)\nand [browse our demo code here](./demo/src/app).\n\n## Component\n\nYou can use the component directly in your templates, which will set its `inline` mode to **true**, in which case the calendar won't hide after date/range selection. You can then use the events: `rangeClicked` or `datesUpdated` or `chosenDate` to get its selection state.\n\n```html\n\n```\n\n## Available options\n\n### autoApply, showDropdowns, singleDatePicker, showWeekNumbers, showISOWeekNumbers, alwaysShowCalendars, showClearButton, showCancel\n\n> These options are booleans\n\n### isCustomDate\n\n> (function) A function that is passed each date in the calendars before they are displayed, and may return a string or array of CSS class names to apply to that date's calendar cell\n\n### isInvalidDate\n\n> (function) A function that is passed each date in the two calendars before they are displayed, and may return true or false to indicate whether that date should be available for selection or not.\n\n### isTooltipDate\n\n> (function) A function that is passed each date in the two calendars before they are displayed, and may return a text to be displayed as a tooltip.\n\n### minDate, maxDate\n\n> To set the minimal and maximal date, these options are a moment date\n\n### dateLimit\n\n> To set max number of the date we can choose\n\n### locale\n\n> the locale options is an object with:\n\n```javascript\n{\n format: 'MM/DD/YYYY', // could be 'YYYY-MM-DDTHH:mm:ss.SSSSZ'\n displayFormat: 'MM/DD/YYYY', // default is format value\n direction: 'ltr', // could be rtl\n weekLabel: 'W',\n separator: ' To ', // default is ' - '\n cancelLabel: 'Cancel', // detault is 'Cancel'\n applyLabel: 'Okay', // detault is 'Apply'\n clearLabel: 'Clear', // detault is 'Clear'\n customRangeLabel: 'Custom range',\n daysOfWeek: moment.weekdaysMin(),\n monthNames: moment.monthsShort(),\n firstDay: 1 // first day is monday\n}\n```\n\n[Check here](#global-locale) for setting the global locale\n\n### startKey and endKey\n\nTheses 2 options are for the key you want for the value, default are `startDate` and `endDate`, it means the value we have from ngModel are: `{startDate: Date, endDate: Date}` by default;\n\nSpecifiyng `startKey` and `endKey` would have different model:\n\nexample:\n\n```html\n\n```\n\nthe model we got would be: `{start: Date, end: Date}`\n\n### ranges\n\n(object) Set predefined date ranges the user can select from. Each key is the label for the range, and its value an array with two dates representing the bounds of the range. As an example:\n\n```html\n\n```\n\n```javascript\nranges: any = {\n Today: [moment(), moment()],\n Yesterday: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],\n 'Last 7 Days': [moment().subtract(6, 'days'), moment()],\n 'Last 30 Days': [moment().subtract(29, 'days'), moment()],\n 'This Month': [moment().startOf('month'), moment().endOf('month')],\n 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],\n};\n```\n\n#### Other options with ranges\n\nYou can use bellow options when using the ranges. The default are `false`.\n\n| Attribut | Type | Description |\n| ---------------------------- | ------- | ----------------------------------------------------------------------------- |\n| alwaysShowCalendars | boolean | set to `true` if you want to display the ranges with the calendar |\n| keepCalendarOpeningWithRange | boolean | set to `true` if you want the calendar won't be closed after choosing a range |\n| showRangeLabelOnInput | boolean | set to `true` if you want to display the range label on input |\n| customRangeDirection | boolean | set to `true` if you want to allow selection range from end date first |\n| lockStartDate | boolean | set to `true` if you want to lock start date and change only the end date |\n\n#### Open datepicker from outside\n\nIt is possible to open datepicker from outside. You should create an input with attached datepicker directive and a button with \"ngx-daterangepicker-action\" class (to prevent triggering of clickOutside).\n\n```html\n\n\n\n Open\n\n```\n\n```javascript\n\n ...\n @ViewChild(DaterangepickerDirective, { static: false }) pickerDirective: DaterangepickerDirective;\n ...\n ...\n openDatepicker() {\n this.pickerDirective.open();\n }\n```\n\n### Timepicker\n\nYou have to set the attribute `timePicker` to `true` if you want to enable the timepicker.\n\nYou can use theses options:\n\n| Attribut | Type | Description |\n| ------------------- | ------- | ------------------------------------------------------------------------------------------- |\n| timePicker24Hour | boolean | set to `true` if you want to set the timepicker to 24h instead of having AM and PM |\n| timePickerIncrement | number | set the value increment of the minutes (eg: for `12` there would be 0mn, 15mn, 30mn, 45mn,) |\n| timePickerSeconds | boolean | set `true` if you want do display second's select |\n\n### Customisation\n\n| Attribut | Type | Description |\n| --------------------------- | ------ | ------------------------------------------------------------------ |\n| firstMonthDayClass | string | add a custom class for all first day of the month |\n| lastMonthDayClass | string | add a custom class for all last day of the month |\n| emptyWeekRowClass | string | add a custom class for all date in a week not in the current month |\n| lastDayOfPreviousMonthClass | string | add a custom class for the last day of the previous month |\n| firstDayOfNextMonthClass | string | add a custom class for the first day of the next month |\n\n### Positioning\n\n| Attribut | Possible values | Description |\n| -------- | ------------------- | ------------------------------------------------------- |\n| opens | left, center, right | position the calendar from the input element |\n| drops | up, down | position the calendar to the up or down of the calendar |\n\n## Available events\n\n### \\(rangeClicked)\n\n> Fired when clicked on range, and send an object with range label and dates value, eg: `{label: 'This Month', dates: [Moment, Moment]}`\n\n### \\(datesUpdated)\n\n> Fires when the date model is updated, like applying (if you have activated the apply button), or when selecting a range or date without the apply button, and sends an object containing start and end dates, eg: `{startDate: Moment, endDate: Moment}`\n\n### Global locale\n\nFor setting the global locale, pass this object to NgxDaterangepickerMd.forRoot().\n\neg:\n\n```\n@NgModule({\n imports: [\n ... ,\n FormsModule,\n NgxDaterangepickerMd.forRoot({\n separator: ' - ',\n applyLabel: 'Okay',\n })\n ],\n declarations: [App],\n bootstrap: [App]\n})\n```\n\n## Development\n\n### Prepare your environment\n\nInstall local dependencies: `npm install`.\n\n### Development server\n\nRun `npm start` to start a development server on a port 4200.\n\nOpen `http//:localhost:4200` on your browser.\n\n## Tests\n\nRun `npm test` or `ng test` to run tests.\n\n## Donation\n\n[](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=THF6M338KQ626)\n\n## [License](https://github.com/fetrarij/ngx-daterangepicker-material/blob/master/LICENSE)\n\nMIT\n","readmeFilename":"README.md"}