{"id":13527888,"url":"https://github.com/angular-ui/ui-date","last_synced_at":"2025-04-01T10:32:58.258Z","repository":{"id":7124899,"uuid":"8419919","full_name":"angular-ui/ui-date","owner":"angular-ui","description":"jQuery UI Datepicker for AngularJS","archived":true,"fork":false,"pushed_at":"2017-04-26T18:11:16.000Z","size":2521,"stargazers_count":265,"open_issues_count":34,"forks_count":204,"subscribers_count":36,"default_branch":"master","last_synced_at":"2025-03-15T12:09:07.141Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://angular-ui.github.io/ui-date/","language":"JavaScript","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/angular-ui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-02-25T22:38:31.000Z","updated_at":"2025-02-22T09:39:18.000Z","dependencies_parsed_at":"2022-09-11T01:51:37.602Z","dependency_job_id":null,"html_url":"https://github.com/angular-ui/ui-date","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-ui%2Fui-date","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-ui%2Fui-date/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-ui%2Fui-date/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular-ui%2Fui-date/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angular-ui","download_url":"https://codeload.github.com/angular-ui/ui-date/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246625760,"owners_count":20807820,"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":[],"created_at":"2024-08-01T06:02:05.313Z","updated_at":"2025-04-01T10:32:57.898Z","avatar_url":"https://github.com/angular-ui.png","language":"JavaScript","readme":"# ui-date directive [![Build Status](https://travis-ci.org/angular-ui/ui-date.svg)](https://travis-ci.org/angular-ui/ui-date)\n\nThis directive allows you to add a date-picker to your form elements.\n\n# Alternatives\n\nWe recommend using the excellent [ui-bootstrap](https://angular-ui.github.io/bootstrap/) date-picker which is maintained by a larger team.  \n\nWARNING: Support for this module may eventually be phased out as angular 2.0 arrives as there are no plans to move this to angular 2 at this time.\n\n# Requirements\n\n- JQuery\n- JQueryUI\n- AngularJS\n\n# Bower Usage\n\nYou may use [bower](http://bower.io/) for dependency management but would recommend using webpack or browserify for modules.\n\nInstall and save to bower.json by running:\n\n    bower install angular-ui-date --save\n\nThis will copy the ui-date files into your `bower_components` folder, along with its dependencies.\n\nAdd the css:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"bower_components/jquery-ui/themes/smoothness/jquery-ui.css\"/\u003e\n```\n\nLoad the script files in your application:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"bower_components/jquery/jquery.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"bower_components/jquery-ui/jquery-ui.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"bower_components/angular/angular.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"bower_components/angular-ui-date/dist/date.js\"\u003e\u003c/script\u003e\n```\n\nAdd the date module as a dependency to your application module:\n\n```js\nangular.module('MyApp', ['ui.date'])\n```\n\nApply the directive to your form elements:\n\n```html\n\u003cinput ui-date\u003e\n```\n\n## Options\n\nAll the [jQueryUI DatePicker options](http://api.jqueryui.com/datepicker/) can be passed through the directive including minDate, maxDate, yearRange etc.\n\n```js\nmyAppModule.controller('MyController', function($scope) {\n  $scope.dateOptions = {\n    changeYear: true,\n    changeMonth: true,\n    yearRange: '1900:-0',    \n    };\n});\n```\n\nthen pass through your options:\n\n```html\n    \u003cinput ui-date=\"dateOptions\" name=\"DateOfBirth\"\u003e\n```\n\n## Static Inline Picker\n\nIf you want a static picker then simply apply the directive to a div rather than an input element.\n\n```html\n\u003cdiv ui-date=\"dateOptions\" name=\"DateOfBirth\"\u003e\u003c/div\u003e\n```\n\n## Working with ng-model\n\nThe ui-date directive plays nicely with ng-model and validation directives such as ng-required.\n\nIf you add the ng-model directive to same the element as ui-date then the picked date is automatically synchronized with the model value.\n\n_The ui-date directive stores and expects the model value to be a standard javascript Date object._\n\n## ui-date-format directive\n\nThe ui-date directive only works with Date objects.\nIf you want to pass date strings to and from the date directive via ng-model then you must use the ui-date-format directive.\nThis directive specifies the format of the date string that will be expected in the ng-model.\nThe format string syntax is that defined by the JQueryUI Date picker. For example\n\n```html\n\u003cinput ui-date ui-date-format=\"DD, d MM, yy\" ng-model=\"myDate\"\u003e\n```\n\nNow you can set myDate in the controller.\n\n```js\n$scope.myDate = \"Thursday, 11 October, 2012\";\n```\n\n## ng-required directive\n\nIf you apply the required directive to element then the form element is invalid until a date is picked.\n\nNote: Remember that the ng-required directive must be explictly set, i.e. to \"true\".  This is especially true on divs:\n\n```html\n\u003cdiv ui-date=\"dateOptions\" name=\"DateOfBirth\" ng-required=\"true\"\u003e\u003c/div\u003e\n```\n\n## focusing the next element for tabbing\n\nThere is a problem with IE that re-opens the datepicker on focus().  However, this breaks tabbing.  If tabbing is more\nimportant than IE for your use cases, pass in the onClose option.\n\n```javascript\nmyAppModule.controller('MyController', function($scope) {\n  $scope.dateOptions = {\n      onClose: (value, picker, $element) =\u003e {\n        $element.focus()\n      }\n    };\n});\n```\n\n## Usage with webpack\n\nInstall with npm:\n\n    npm install --save-dev jquery jquery-ui angular angular-ui-date\n\nUse in your app:\n\n```javascript\nimport angular from 'angular';\nimport uiDate from 'angular-ui-date';\n\nrequire('jquery-ui/themes/base/minified/jquery-ui.min.css');\n\nangular.module('MyTest', [uiDate.name])\n.controller('MyCtrl', ['$scope', function($scope) {\n    $scope.myDate = new Date('2015-11-17');\n}]);\n```\n\nIt is also good to ensure that jQuery is available so that angular and jquery ui can attach to it.\n\n```javascript\n    webpack: {\n      plugins: [\n        new webpack.ProvidePlugin({\n          'window.jQuery': 'jquery',\n        }),\n      ]\n    }\n```\n\nanother method of making jQuery recognized is to use the webpack expose-loader to expose it both as $ and jQuery\n\n```javascript\n    webpack: {\n      module: {\n        loaders: [\n                  // it helps angular to have jQuery exposed so that it uses $ instead of jqLite      \n                   {\n                     test: require.resolve('jquery'),\n                     loader: 'expose?$!expose?jQuery',\n                   },\n                ]\n              }\n            }\n```\n## Need help?\nNeed help using UI date?\n\n* Ask a question in [StackOverflow](http://stackoverflow.com/) under the [angular-ui-date](http://stackoverflow.com/questions/tagged/angular-ui-date) tag.\n\n**Please do not create new issues in this repository to ask questions about using UI date**\n\n## Found a bug?\nPlease take a look at [CONTRIBUTING.md](CONTRIBUTING.md#you-think-youve-found-a-bug).\n\n# Contributing to the project\n\nWe are always looking for the quality contributions! Please check the [CONTRIBUTING.md](CONTRIBUTING.md) for the contribution guidelines.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-ui%2Fui-date","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangular-ui%2Fui-date","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular-ui%2Fui-date/lists"}