{"id":18369651,"url":"https://github.com/forms-angular/fng-bootstrap-datetime","last_synced_at":"2025-07-07T02:40:20.661Z","repository":{"id":40513137,"uuid":"106436226","full_name":"forms-angular/fng-bootstrap-datetime","owner":"forms-angular","description":"Date time input plugin based on github.com/zhaber/angular-js-bootstrap-datetimepicker","archived":false,"fork":false,"pushed_at":"2025-04-06T11:57:46.000Z","size":92,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-10T21:52:41.827Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/forms-angular.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-10-10T15:32:08.000Z","updated_at":"2025-04-06T11:57:50.000Z","dependencies_parsed_at":"2024-03-01T19:45:44.664Z","dependency_job_id":"c727b9db-9c84-41ee-a1c1-6983b692aa1a","html_url":"https://github.com/forms-angular/fng-bootstrap-datetime","commit_stats":{"total_commits":227,"total_committers":2,"mean_commits":113.5,"dds":0.03083700440528636,"last_synced_commit":"f629dc667de7e39605f149d6b5d7541bd234053a"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/forms-angular/fng-bootstrap-datetime","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forms-angular%2Ffng-bootstrap-datetime","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forms-angular%2Ffng-bootstrap-datetime/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forms-angular%2Ffng-bootstrap-datetime/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forms-angular%2Ffng-bootstrap-datetime/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/forms-angular","download_url":"https://codeload.github.com/forms-angular/fng-bootstrap-datetime/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forms-angular%2Ffng-bootstrap-datetime/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264003265,"owners_count":23542594,"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-11-05T23:30:19.296Z","updated_at":"2025-07-07T02:40:20.640Z","avatar_url":"https://github.com/forms-angular.png","language":"JavaScript","readme":"# fng-bootstrap-datetime\n\nPlugin for forms-angular that adds datetime picker support.\n\n## Usage\n\n    bower install fng-bootstrap-datetime\n\n\nAdd the following lines to your index.html (or equivalent) file.\n\n    \u003clink rel=\"stylesheet\" href=\"fng-bootstrap-datetime/fng-bootstrap-datetime.css\"\u003e\n    \u003cscript src=\"fng-bootstrap-datetime/fng-bootstrap-datetime.js\"\u003e\u003c/script\u003e\n\nAdd `fng.uiBootstrapDatetime` to the list of servies your Angular module depends on. \n\nIn your Mongoose schemas you can set up fields like this:\n\n    interviewDate: {type: Date, form:{\n      directive: 'fng-ui-bootstrap-datetime-picker', \n      fngUiBootstrapDatetimePicker:{\n        'date-format': 'dd-MMM-yyyy',\n        'date-options':\"{'show-weeks':true}\"}\n        }\n      }\n    },\n\nOptions can be added to a fngUiBootstrapDatetimePicker object within the form object as illustrated by the examples above.\nA complete list of setting options can be found in the Settings section below.  Any setting\nDate options (see [uib-datepicker](https://angular-ui.github.io/bootstrap/#!#datepicker) settings can be added as a JSON string as shown above.\n\nFor (my) convenience, the following defaults have been changed from the defaults shown below:\n\n    show-button-bar: false, \n    show-meridian: false,\n    date-format: 'dd/MM/yyyy'\n    showWeeks: false\n\n###Known Limitations:\n\nStyling in (unsupported) Bootstrap 2 applications (such as the forms-angular.org website at the time of writing) has a few issues,\nincluding inline help placing and the width of the first columnof the dropdown when weeks are not shown. \n\n##Readme from github.com/zhaber/angular-js-bootstrap-datetimepicker (now Angular 4+ only)\n\nThe plugin is based on AngularUI [Datepicker](https://github.com/angular-ui/bootstrap/tree/master/src/datepicker) and [Timepicker](https://github.com/angular-ui/bootstrap/tree/master/src/timepicker).\n\nDemo: [Plunker](http://plnkr.co/edit/qRhNlfTWlt9wIexa3WbB?p=preview)\n\nDate is formatted using the [date filter](http://docs.angularjs.org/api/ng.filter:date) and is localized.\n\n## Install\n\n### NPM\nRun `npm install angular-ui-bootstrap-datetimepicker` to install. Use the `--save` option to add it to your package.json's dependencies.\n\nIf you're using browserify, you can simply `require('angular-ui-bootstrap-datetimepicker')` to make it available in your angular project. Ensure that your angular module depends on `ui.bootstrap.datetimepicker`. You must be using the `ui.bootstrap` module as well - also availbe via npm.\n\nAlso include the stylesheet `datetimepicker.css` in your html. Note that this is the same stylesheet that the package.json's `style` declaration has.\n\n### Bower\n\nRun `bower install angular-ui-bootstrap-datetimepicker --save` to persist it to `bower.json`\n\nInclude the `ui.bootstrap.datetimepicker` module in your `app.js` file. You must be using the `ui.bootstrap` module as well.\n\n### NuGet\n\nSee https://www.nuget.org/packages/Angular-js-bootstrap-datetimepicker/\n\n## Usage Sample\n~~~javascript\n// Disable weekend selection\n$scope.isDisabledDate = function(currentDate, mode) {\n  return mode === 'day' \u0026\u0026 (currentDate.getDay() === 0 || currentDate.getDay() === 6);\n};\n~~~\n~~~html\n\u003cdatetimepicker ng-model=\"date\" \n                date-format=\"dd-MMM-yyyy\" \n                date-options=\"dateOptions\" \n                date-disabled=\"isDisabledDate(date, mode)\"\u003e\n\u003c/datetimepicker\u003e\n~~~\n\n## Datetimepicker Settings \n\n * `clear-text`\n _(Default: 'Clear')_ : \n The text to display for the clear button.\n\n * `close-text`\n _(Default: 'Done')_ : \n The text to display for the close popup button.\n\n * `current-text` \n _(Default: 'Today')_ : \n The text to display for the current day button.\n\n * `datepicker-append-to-body`\n \t_(Default: false)_ :\n \tAppend the datepicker popup element to body, rather than inserting after datepicker-popup.\n\n * `datepicker-popup-template-url`\n  _(Default: uib/template/datepickerPopup/popup.html)_ :\n  Add the ability to override the template used on the component.\n\n * `datepicker-template-url`\n  _(Default: uib/template/datepicker/datepicker.html)_ :\n  Add the ability to override the template used on the component (inner uib-datepicker).\n\n * `date-disabled (date, mode)`\n \t_(Default: null)_ :\n \tAn optional expression to disable visible options based on passing date and current mode _(day|month|year)_.\n\n * `date-format`\n \t_(Default: 'yyyy-MM-dd')_ :\n \tThe format for displayed dates.\n\n * `date-ng-click`\n \t_(Default: null)_ :\n \tA function called when a date input is clicked.\n\n * `date-opened`\n        _(Default: false)_ :\n        Whether or not to show the datepicker.\n\n * `date-options` attribute.\n  \t_(Default: {})_ :\n   Options for datepicker in JSON format. E.g. minDate and maxDate, which define the minimum and maximum available date and time.\n\n * `day-format`\n \t_(Default: 'dd')_ :\n \tFormat of day in month.\n\n * `day-header-format`\n \t_(Default: 'EEE')_ :\n \tFormat of day in week header.\n\n * `day-title-format`\n \t_(Default: 'MMMM yyyy')_ :\n \tFormat of title when selecting day.\n\n * `disabled-date`\n \t_(Defaults: false)_ :\n \t Whether the date input is disabled.\n\n * `hidden-date`\n\t_(Defaults: false)_ :\n \t Whether a user can see the date input.\n\n * `hidden-time`\n \t_(Defaults: false)_ :\n \t Whether a user can see the hours \u0026 minutes input.\n\n * `hour-step` \u003ci class=\"icon-eye-open\"\u003e\u003c/i\u003e\n \t_(Defaults: 1)_ :\n \t Number of hours to increase or decrease when using a button.\n\n * `max-time`\n        _(Defaults: ['12:59 PM'])_ :\n        Maximum time for time picker (Date).\n\n * `meridians`\n \t_(Defaults: ['AM', 'PM'])_ :\n \t Meridian labels\n\n * `min-time`\n        _(Defaults: ['0:00 AM'])_ :\n        Minumum time for time picker (Date).\n\n * `minute-step` \u003ci class=\"icon-eye-open\"\u003e\u003c/i\u003e\n \t_(Defaults: 1)_ :\n \t Number of minutes to increase or decrease when using a button.\n\n * `month-format`\n \t_(Default: 'MMMM')_ :\n \tFormat of month in year.\n\n * `month-title-format`\n \t_(Default: 'yyyy')_ :\n \tFormat of title when selecting month.\n\n * `mousewheel`\n \t_(Defaults: true)_ :\n \t Whether user can scroll inside the hours \u0026 minutes input to increase or decrease it's values.\n\n * `ng-model` \n \t:\n \tThe date and time object.\n\n * `readonly-date`\n \t_(Defaults: false)_ :\n \t Whether a user can type inside the date input.\n\n * `readonly-time`\n \t_(Defaults: false)_ :\n \t Whether a user can type inside the hours \u0026 minutes input.\n\n * `required`\n \t_(Defaults: false)_ :\n \t Whether a non-empty value is required.\n\n * `show-button-bar`\n \t_(Defaults: true)_ :\n \t Whether or not to display a button bar underneath the uib-datepicker..\n\n * `show-meridian` \u003ci class=\"icon-eye-open\"\u003e\u003c/i\u003e\n \t_(Defaults: true)_ :\n \tWhether to display 12H or 24H mode.\n\n * `show-spinners`\n \t_(Defaults: true)_ :\n \t Shows spinner arrows above and below the inputs.\n \n * `timepicker-template-url`\n  _(Defaults: uib/template/timepicker/timepicker.html)_ :\n   Add the ability to override the template used on the component.\n\n * `year-format`\n \t_(Default: 'yyyy')_ :\n \tFormat of year in year range.\n\n * `year-range`\n \t_(Default: 20)_ :\n \tNumber of years displayed in year selection.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforms-angular%2Ffng-bootstrap-datetime","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fforms-angular%2Ffng-bootstrap-datetime","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforms-angular%2Ffng-bootstrap-datetime/lists"}