{"id":28740068,"url":"https://github.com/meteor-community-packages/meteor-autoform-bs-datetimepicker","last_synced_at":"2025-06-16T06:41:17.572Z","repository":{"id":24556326,"uuid":"27963424","full_name":"Meteor-Community-Packages/meteor-autoform-bs-datetimepicker","owner":"Meteor-Community-Packages","description":"Custom bootstrap-datetimepicker input type with timezone support for AutoForm ","archived":false,"fork":false,"pushed_at":"2022-12-31T08:19:13.000Z","size":15,"stargazers_count":17,"open_issues_count":1,"forks_count":30,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-05-01T13:23:16.944Z","etag":null,"topics":["autoform","blaze","hacktoberfest","meteor"],"latest_commit_sha":null,"homepage":"","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/Meteor-Community-Packages.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":"2014-12-13T14:42:50.000Z","updated_at":"2024-05-01T13:23:16.945Z","dependencies_parsed_at":"2023-01-14T01:11:01.679Z","dependency_job_id":null,"html_url":"https://github.com/Meteor-Community-Packages/meteor-autoform-bs-datetimepicker","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/Meteor-Community-Packages/meteor-autoform-bs-datetimepicker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Meteor-Community-Packages%2Fmeteor-autoform-bs-datetimepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Meteor-Community-Packages%2Fmeteor-autoform-bs-datetimepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Meteor-Community-Packages%2Fmeteor-autoform-bs-datetimepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Meteor-Community-Packages%2Fmeteor-autoform-bs-datetimepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Meteor-Community-Packages","download_url":"https://codeload.github.com/Meteor-Community-Packages/meteor-autoform-bs-datetimepicker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Meteor-Community-Packages%2Fmeteor-autoform-bs-datetimepicker/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260115279,"owners_count":22961027,"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":["autoform","blaze","hacktoberfest","meteor"],"created_at":"2025-06-16T06:41:16.496Z","updated_at":"2025-06-16T06:41:17.552Z","avatar_url":"https://github.com/Meteor-Community-Packages.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"aldeed:autoform-bs-datetimepicker\n=========================\n\nIMPORTANT: This repo is no longer maintained (but may still work for you). You can find forks and other alternatives that work better on [Atmosphere](https://atmospherejs.com/?q=autoform).\n\nAn add-on Meteor package for [aldeed:autoform](https://github.com/aldeed/meteor-autoform). Provides a single custom input type, \"bootstrap-datetimepicker\", which renders an input using the [bootstrap-datetimepicker](http://eonasdan.github.io/bootstrap-datetimepicker/) plugin.\n\n## Prerequisites\n\nBootstrap and the plugin library must be installed separately.\n\nIn a Meteor app directory, enter:\n\n```bash\n$ meteor add twbs:bootstrap\n$ meteor add tsega:bootstrap3-datetimepicker@=3.1.3_3\n$ meteor add aldeed:autoform\n```\n\nIf you need to use the `timezoneId` attribute to get the Date in some timezone other than the local client timezone, you must also add `moment-timezone`:\n\n```bash\n$ meteor add risul:moment-timezone\n```\n\nOr install and import the NPM package.\n\n## Installation\n\nIn a Meteor app directory, enter:\n\n```bash\n$ meteor add aldeed:autoform-bs-datetimepicker\n```\n\n## Usage\n\nSpecify \"bootstrap-datetimepicker\" for the `type` attribute of any input. This can be done in a number of ways:\n\nIn the schema, which will then work with a `quickForm` or `afQuickFields`:\n\n```js\n{\n  date: {\n    type: Date,\n    autoform: {\n      afFieldInput: {\n        type: \"bootstrap-datetimepicker\",\n        dateTimePickerOptions: {}\n      }\n    }\n  }\n}\n```\n\nOr on the `afFieldInput` component or any component that passes along attributes to `afFieldInput`:\n\n```js\n{{\u003e afQuickField name=\"typeTest\" type=\"bootstrap-datetimepicker\"}}\n\n{{\u003e afFormGroup name=\"typeTest\" type=\"bootstrap-datetimepicker\"}}\n\n{{\u003e afFieldInput name=\"typeTest\" type=\"bootstrap-datetimepicker\"}}\n```\n\n## Choosing a Timezone\n\nBy default, the field's value will be a `Date` object representing the selected date and time in the browser's timezone (i.e., based on the user's computer time settings). In most cases, you probably want the `Date` object relative to some other timezone that you have previously stored. For example, if the form is setting the start date of an event, you want the date to be relative to the event venue's timezone. You can specify a different IANA timezone ID by adding a `timezoneId` attribute.\n\n```js\n{\n  date: {\n    type: Date,\n    autoform: {\n      afFieldInput: {\n        type: \"bootstrap-datetimepicker\",\n        timezoneId: \"America/New_York\"\n      }\n    }\n  }\n}\n```\n\nOr:\n\n```js\n{{\u003e afFieldInput name=\"typeTest\" type=\"bootstrap-datetimepicker\" timezoneId=\"America/New_York\"}}\n```\n\n## Automatic Type Conversions\n\nThis input type is intended to be used with `type: Date` schema keys, but it also works with other schema types. Here's a list:\n\n* `Date`: Value is stored as a `Date` object representing the selected date and time in the timezone you specified with the `timezoneId` attribute. By default, the timezone is that of the browser (i.e., the user's computer time settings).\n* `String`: Value is stored as a string representation of the selected date in ISO format, e.g., \"2014-11-25T00:00:00\".\n* `Number`: Value is stored as the result of calling `getTime()` on the `Date` object (representing the selected date and time in the timezone you specified).\n* `Array`: If the schema expects an array of `Date` or `String` or `Number`, the value is converted to a one-item array and stored.\n\nTo provide bootstrap-datetimepicker options, set a `dateTimePickerOptions` attribute equal to a helper that returns the options object.\n\n## Customizing Appearance\n\nIf you want to customize the appearance of the input, for example to use an input group with date/time icons, use the [aldeed:template-extension](https://atmospherejs.com/aldeed/template-extension) package to replace the \"afBootstrapDateTimePicker\" template, like this:\n\n```html\n\u003ctemplate name=\"dpReplacement\"\u003e\n  \u003cdiv class='input-group date'\u003e\n    \u003cinput type=\"text\" value=\"\" {{atts}}/\u003e\n    \u003cspan class=\"input-group-addon\"\u003e\n      \u003cspan class=\"glyphicon glyphicon-calendar\"\u003e\u003c/span\u003e\n    \u003c/span\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n```js\nTemplate.dpReplacement.replaces(\"afBootstrapDateTimePicker\");\n```\n\n## Contributing\n\nAnyone is welcome to contribute. Fork, make your changes, and then submit a pull request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeteor-community-packages%2Fmeteor-autoform-bs-datetimepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeteor-community-packages%2Fmeteor-autoform-bs-datetimepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeteor-community-packages%2Fmeteor-autoform-bs-datetimepicker/lists"}