{"id":13674110,"url":"https://github.com/indrimuska/angular-moment-picker","last_synced_at":"2025-05-15T14:06:09.072Z","repository":{"id":2430357,"uuid":"46529231","full_name":"indrimuska/angular-moment-picker","owner":"indrimuska","description":"Angular Moment Picker is an AngularJS directive for date and time picker using Moment.js.","archived":false,"fork":false,"pushed_at":"2019-11-16T09:05:33.000Z","size":937,"stargazers_count":524,"open_issues_count":110,"forks_count":223,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-05-07T18:55:51.043Z","etag":null,"topics":["angular","calendar","date","datepicker","datetime","moment","moment-picker","picker","time","timepicker"],"latest_commit_sha":null,"homepage":"http://indrimuska.github.io/angular-moment-picker/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/indrimuska.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-20T00:39:44.000Z","updated_at":"2025-03-11T22:46:57.000Z","dependencies_parsed_at":"2022-08-06T12:15:21.118Z","dependency_job_id":null,"html_url":"https://github.com/indrimuska/angular-moment-picker","commit_stats":null,"previous_names":[],"tags_count":49,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indrimuska%2Fangular-moment-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indrimuska%2Fangular-moment-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indrimuska%2Fangular-moment-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/indrimuska%2Fangular-moment-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/indrimuska","download_url":"https://codeload.github.com/indrimuska/angular-moment-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254355335,"owners_count":22057354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","calendar","date","datepicker","datetime","moment","moment-picker","picker","time","timepicker"],"created_at":"2024-08-02T11:00:41.019Z","updated_at":"2025-05-15T14:06:04.053Z","avatar_url":"https://github.com/indrimuska.png","language":"TypeScript","funding_links":[],"categories":["UI Components"],"sub_categories":["Tooltip"],"readme":"# Angular Moment Picker\n\n[![Join the chat at https://gitter.im/indrimuska/angular-moment-picker](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/indrimuska/angular-moment-picker?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n[![Build Status](https://travis-ci.org/indrimuska/angular-moment-picker.svg)](https://travis-ci.org/indrimuska/angular-moment-picker)\n\n[![NPM version](http://img.shields.io/npm/v/angular-moment-picker.svg?style=flat)](https://npmjs.org/package/angular-moment-picker)\n[![NPM downloads](http://img.shields.io/npm/dm/angular-moment-picker.svg?style=flat)](https://npmjs.org/package/angular-moment-picker)\n[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)\n[![CDNJS](https://img.shields.io/cdnjs/v/angular-moment-picker.svg)](https://cdnjs.com/libraries/angular-moment-picker)\n\nCheck out the homepage at [http://indrimuska.github.io/angular-moment-picker/](http://indrimuska.github.io/angular-moment-picker/).\n\n*Angular Moment Picker* is a native AngularJS directive for date and time picker that uses *Moment.js* and **does not require jQuery**.\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"http://indrimuska.github.io/angular-moment-picker/\"\u003e\n        \u003cimg src=\"http://indrimuska.github.io/angular-moment-picker/img/angular-moment-picker.gif\" alt=\"Angular Moment Picker demo\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n## Installation\n\nGet Angular Moment Picker from [**npm**](https://www.npmjs.com/), [**bower**](http://bower.io/) or [**git**](https://git-scm.com/):\n```\n  npm install angular-moment-picker\nbower install moment-picker\n  git clone   https://github.com/indrimuska/angular-moment-picker.git\n```\n\nInclude style and script in your page:\n```html\n\u003cscript src=\"//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"//cdn.rawgit.com/indrimuska/angular-moment-picker/master/dist/angular-moment-picker.min.js\"\u003e\u003c/script\u003e\n\u003clink href=\"//cdn.rawgit.com/indrimuska/angular-moment-picker/master/dist/angular-moment-picker.min.css\" rel=\"stylesheet\"\u003e\n```\n\nAdd *moment-picker* dependency to your module:\n```js\nvar myApp = angular.module('myApp', ['moment-picker']);\n```\n\nProvide the attribute to your element:\n```html\n\u003cdiv moment-picker=\"myDate\"\u003e {{ myDate }} \u003c/div\u003e\n```\n\n## Demo\n\nCheck out the demo page at [http://indrimuska.github.io/angular-moment-picker/](http://indrimuska.github.io/angular-moment-picker/).\n\n## The views\n\n***Decade view*** | ***Year view*** | ***Month view***\n:---:|:---:|:---:\n![Decade view](http://indrimuska.github.io/angular-moment-picker/img/themes/default/decade-view.png?) | ![Year view](http://indrimuska.github.io/angular-moment-picker/img/themes/default/year-view.png?) | ![Month view](http://indrimuska.github.io/angular-moment-picker/img/themes/default/month-view.png?)\n***Day view*** | ***Hour view*** | ***Minute view***\n![Day view](http://indrimuska.github.io/angular-moment-picker/img/themes/default/day-view.png?) | ![Hour view](http://indrimuska.github.io/angular-moment-picker/img/themes/default/hour-view.png?) | ![Minute view](http://indrimuska.github.io/angular-moment-picker/img/themes/default/minute-view.png?)\n\n### Additional themes\n\nAngular Moment Picker provides the following additional themes. Each theme has a dedicate stylesheet to be included in the application the overrides the default style.\n\n - **Material UI** - [Plunker](https://embed.plnkr.co/P48UnN)\n   ```html\n   \u003clink href=\"//cdn.rawgit.com/indrimuska/angular-moment-picker/master/dist/themes/material-ui.min.css\" rel=\"stylesheet\"\u003e\n   ```\n\nA preview of the each theme is available [here](dist/themes/).\n\n## Options\n\nTo configure Angular Moment Picker you have to add to your element or your input the attribute relative to the options you want to set.\n\n```html\n\u003cdiv moment-picker=\"ctrl.birthday\" locale=\"fr\" format=\"LL\"\u003e\n    Mon anniversaire est le {{ ctrl.birthday }}\n\u003c/div\u003e\n```\n\n```html\n\u003cinput moment-picker=\"ctrl.dateFormatted\" ng-model=\"ctrl.momentDate\" format=\"DD/MM/YYYY\"\u003e\n```\n\nProperty | Default | Description | Sample\n---|---|---|---\nmoment-picker | | Two-way bindable property as **formatted datetime string**. | [Plunker](https://embed.plnkr.co/nPGbO3KkmmPqf7mfN2PC/)\nng-model | | Two-way bindable property as **Moment.js object**. | [Plunker](https://embed.plnkr.co/hs10SM)\nlocale | `\"en\"` | Locale code. \u003csup\u003e1\u003c/sup\u003e | [Plunker](https://embed.plnkr.co/z3KSxy)\nformat | `\"L LTS\"` | Format of the output value and min/max date. \u003csup\u003e1\u003c/sup\u003e | [Plunker](https://embed.plnkr.co/rWtdhO)\nmin-view | `\"decade\"` | Minimum navigable view. | [Plunker](https://embed.plnkr.co/wAGqtl)\nmax-view | `\"minute\"` | Maximum navigable view. | [Plunker](https://embed.plnkr.co/GYRv7J)\nstart-view | `\"year\"` | Initial view when the picker is open. | [Plunker](https://embed.plnkr.co/wFXcGL)\nmin-date | | Two-way bindable property representing the minimum selectable date (as String in the same format of the value, or as a Moment.js object). | [Plunker](https://embed.plnkr.co/L9dOc4)\nmax-date | | Two-way bindable property representing the maximum selectable date (as String in the same format of the value, or as a Moment.js object). | [Plunker](https://embed.plnkr.co/OvvfAQ)\nstart-date | | Two-way bindable property representing the initial date to be shown in picker (as String in the same format of the value, or as a Moment.js object). | [Plunker](https://embed.plnkr.co/rjFk9d)\ndisable | `false` | Disables the picker if truly. | [Plunker](https://embed.plnkr.co/Zeaxd3)\nposition | | Sets a fixed position for the picker. Available values are `\"top left\"`, `\"top right\"`, `\"bottom left\"`, `\"bottom right\"`. | [Plunker](https://embed.plnkr.co/v9AZFu)\ninline | `false` | Views the picker inline. | [Plunker](https://embed.plnkr.co/5PhKOc)\nvalidate | `true` | Forces picker value between the range `minDate` and `maxDate`. | [Plunker](https://embed.plnkr.co/hFTyMV)\nautoclose | `true` | Closes the picker after selecting a date. | [Plunker](https://embed.plnkr.co/z7M6WK)\nset-on-select | `false` | Updates picker model after selecting a date in each view. | [Plunker](https://embed.plnkr.co/hJRNcT)\nis-open | | Open/closes the picker when set to `true` or `false`. | [Plunker](https://embed.plnkr.co/7T4sbs)\ntoday | `false` | Highlights the current day. | [Plunker](https://embed.plnkr.co/YYbV4C)\nkeyboard | `false` | Allows using the keyboard to navigate the picker. | [Plunker](https://embed.plnkr.co/OdUhHx)\nshow-header | `true` | Shows the header in the view. | [Plunker](https://embed.plnkr.co/PCL4mh)\nadditions | `{ top: undefined, bottom: undefined }` | Template url for custom contents above and below each picker views (inside the dialog). | [Plunker](https://embed.plnkr.co/CXOH5U)\n\n## Methods\n\nAppend your method to your element and define its behavior in the controller.\n\n```html\n\u003cdiv moment-picker=\"ctrl.exhibition\" format=\"dddd D MMMM\" selectable=\"ctrl.isSelectable(date, type)\"\u003e\n    Next exhibition is on {{ ctrl.exhibition }}.\n\u003c/div\u003e\n```\n\n```javascript\nctrl.isSelectable = function (date, type) {\n    // disable all Sundays in the Month View\n    return type != 'day' || date.format('dddd') != 'Sunday';\n};\n```\n\nMethod | Parameters | Description | Sample\n---|---|---|---\nselectable | `date`, `type` | Return `true` if the given date can be selected in the current view. **Please note** that this method is called for every date in the view, every time a view is rendered, so be careful, it may affect performances. | [Plunker](https://embed.plnkr.co/6wxtMn)\n\n## Events\n\nAs for methods, to bind an event you only need to attach the right property to your picker.\n\n```html\n\u003cdiv moment-picker=\"ctrl.meeting\" format=\"HH:mm A\" change=\"ctrl.onChange(newValue, oldValue)\"\u003e\n    The meeting starts at {{ ctrl.meeting }}.\n\u003c/div\u003e\n```\n\n```javascript\nctrl.onChange = function (newValue, oldValue) {\n    $log.log('Meeting changed from ' + oldValue + ' to ' + newValue);\n};\n```\n\nEvent | Parameters | Description | Sample\n---|---|---|---\nchange | `newValue`, `oldValue` | Function fired upon change in picker value. | [Plunker](https://embed.plnkr.co/IIhjjv)\n\n## momentPickerProvider\n\nAngular Moment Picker comes out with its own provider, in order to define your own configuration for all the pickers in your app.\n\n```javascript\nangular\n    .module('myApp', ['moment-picker'])\n    .config(['momentPickerProvider', function (momentPickerProvider) {\n        momentPickerProvider.options({\n            /* ... */\n        });\n    }]);\n```\n\nProperty | Default | Description\n---|---|---\nlocale | `\"en\"` | Locale code. \u003csup\u003e1\u003c/sup\u003e\nformat | `\"L LTS\"` | Format of the output value and min/max date. \u003csup\u003e1\u003c/sup\u003e\nmin-view | `\"decade\"` | Minimum navigable view.\nmax-view | `\"minute\"` | Maximum navigable view.\nstart-view | `\"year\"` | Initial view after picker opening.\nposition | | Sets a fixed position for the picker. Available values are `\"top left\"`, `\"top right\"`, `\"bottom left\"`, `\"bottom right\"`.\ninline | `false` | Views the picker inline.\nvalidate | `true` | Forces picker value between the range `minDate` and `maxDate`.\nautoclose | `true` | Closes the picker after selecting a date.\nset-on-select | `false` | Updates picker model after selecting a date in each view.\ntoday | `false` | Highlights the current day.\nkeyboard | `false` | Allows using the keyboard to navigate the picker.\nshow-header | `true` | Shows the header in the view.\nleft-arrow | `\"\u0026larr;\"` | Left arrow string (HTML allowed).\nright-arrow | `\"\u0026rarr;\"` | Right arrow string (HTML allowed).\nadditions | `{ top: undefined, bottom: undefined }` | Template url for custom contents above and below each picker views (inside the dialog).\nyears-format | `\"YYYY\"` | Years format in `decade` view.\nmonths-format | `\"MMM\"` | Months format in `year` view.\ndays-format | `\"D\"` | Days format in `month` view.\nhours-format | `\"HH:[00]\"` | Hours format in `day` view.\nhours-start | `0` | First rendered hour in `day` view (24h format).\nhours-end | `23` | Last rendered hour in `day` view (24h format).\nminutes-format | \u003csup\u003e2\u003c/sub\u003e | Minutes format in `hour` view.\nminutes-step | `5` | Step between each visible minute in `hour` view.\nminutes-start | `0` | First rendered minute in `hour` view.\nminutes-end | `59` | Last rendered minute in `hour` view.\nseconds-format | `\"ss\"` | Seconds format in `minute` view.\nseconds-step | `1` | Step between each visible second in `minute` view.\nseconds-start | `0` | First rendered second in `minute` view.\nseconds-end | `59` | Last rendered second in `minute` view.\n\n## Notes\n\n1. Locale codes and format tokens are available at http://momentjs.com/.\n2. Locale format `LT` without meridiem part (AM/PM, am/pm).\n\n## Builder\n\nTry the online [Angular Moment Picker Builder](http://indrimuska.github.io/angular-moment-picker/#builder):\n\n[http://indrimuska.github.io/angular-moment-picker/#builder](http://indrimuska.github.io/angular-moment-picker/#builder).\n\n## Dev scripts\n\n - `npm run build`: compile sources and generate built files in `dist` folder.\n - `npm run minify`: generate built files and minified ones.\n - `npm run release`: increase package version and compile the project.\n - `npm run test`: run all tests in the `tests` folder.\n\n## License\nCopyright (c) 2015 Indri Muska. Licensed under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findrimuska%2Fangular-moment-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Findrimuska%2Fangular-moment-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findrimuska%2Fangular-moment-picker/lists"}