{"id":21338888,"url":"https://github.com/cybertoothca/ember-cli-date-textbox","last_synced_at":"2025-07-12T14:31:16.352Z","repository":{"id":37270317,"uuid":"82606246","full_name":"cybertoothca/ember-cli-date-textbox","owner":"cybertoothca","description":"A textbox that will guess the date you want and assign it to your model or query-params.","archived":false,"fork":false,"pushed_at":"2023-02-27T08:18:26.000Z","size":2212,"stargazers_count":5,"open_issues_count":25,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-16T10:36:35.851Z","etag":null,"topics":["datejs","datepicker","datepicker-component","momentjs","parse","textbox"],"latest_commit_sha":null,"homepage":"http://ember-cli-date-textbox.cybertooth.io","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/cybertoothca.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-20T21:50:03.000Z","updated_at":"2022-04-06T18:24:24.000Z","dependencies_parsed_at":"2023-02-17T03:01:19.629Z","dependency_job_id":null,"html_url":"https://github.com/cybertoothca/ember-cli-date-textbox","commit_stats":null,"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cybertoothca%2Fember-cli-date-textbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cybertoothca%2Fember-cli-date-textbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cybertoothca%2Fember-cli-date-textbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cybertoothca%2Fember-cli-date-textbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cybertoothca","download_url":"https://codeload.github.com/cybertoothca/ember-cli-date-textbox/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225825236,"owners_count":17529905,"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":["datejs","datepicker","datepicker-component","momentjs","parse","textbox"],"created_at":"2024-11-22T00:41:06.824Z","updated_at":"2024-11-22T00:41:07.385Z","avatar_url":"https://github.com/cybertoothca.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-cli-date-textbox\n\n[![npm version](http://badge.fury.io/js/ember-cli-date-textbox.svg)](http://badge.fury.io/js/ember-cli-date-textbox) ![downloads](https://img.shields.io/npm/dy/ember-cli-date-textbox.svg) [![Code Climate](http://codeclimate.com/github/cybertoothca/ember-cli-date-textbox/badges/gpa.svg)](http://codeclimate.com/github/cybertoothca/ember-cli-date-textbox)\n\n[![ember-observer-badge](http://emberobserver.com/badges/ember-cli-date-textbox.svg)](http://emberobserver.com/addons/ember-cli-date-textbox)\n\nA textbox that will guess the date you want and assign it to your model or query-params.\n\n## Compatibility\n\n- Ember.js v3.12 or above\n- Ember CLI v2.13 or above\n- Node.js v10 or above\n- Requires `ember-auto-import` \u003e= 2 \u0026 the latest `webpack`\n\n## Installation\n\nThe following will install this add-on:\n\n```bash\nember install ember-cli-date-textbox\n\nyarn add -D ember-auto-import webpack\n```\n\n### Dependencies\n\nThe following dependencies are used with this addon and may collide with dependencies in your app/addon:\n\n- `ember-cli-text-support-mixins`\n- `moment`\n- `moment-timezone`\n- `sugar`\n\n## Demo\n\nThe demonstration web application can be found here:\n[http://ember-cli-date-textbox.cybertooth.io/](http://ember-cli-date-textbox.cybertooth.io/).\n\n## Usage\n\nAs mentioned above there are several examples on the demonstration site:\n[http://ember-cli-date-textbox.cybertooth.io/](http://ember-cli-date-textbox.cybertooth.io/)\n\n### What Does This Add-on Do?\n\nThis add-on supplies the following _components_:\n\n- `input-date` - a basic HTML textbox that will take your input and try to parse it to a date. If the parse succeeds,\n  the date will be formatted according to your preference. Ideal for binding to your model's date fields (e.g.\n  `DS.attr('date')`) or to your component or controller's properties.\n- `input-iso8601` - another basic HTML textbox that will once again take your input, parse it to a date, and then\n  store the [ISO8601](https://en.wikipedia.org/wiki/ISO_8601) representation of the date. This is a\n  great way for binding your date to Ember's query parameters.\n\n_Further information about these items can be found in the Usage section below and in the\n[demo (dummy) application](http://ember-cli-date-textbox.cybertooth.io/)._\n\n### Some Bootstrap Love...\n\nIf the supplied value can't be parsed to a date, we add the `has-error` style class to the `.form-group` that the\n\u0026#123;\u0026#123;input-date\u0026#125;\u0026#125; and/or \u0026#123;\u0026#123;input-iso8601\u0026#125;\u0026#125; belongs to. This visualizes that the date parse was rejected.\n\n### Components\n\n#### \u0026#123;\u0026#123;input-date\u0026#125;\u0026#125;\n\nThis component makes a textbox. It takes in user input in the form of a date that is swiftly parsed and formatted.\nThe parsed date object is assigned to the component's `date` property.\n\n##### Arguments\n\n- `date` - **REQUIRED**. Rather than binding to the `value` property, this textbox input will be binding to\n  the `date` attribute.\n- `value` - **DO NOT USE**. I mention the `value` property because you shouldn't bind anything to it. Users\n  type in the textbox, the date they settle on will be formatted in the textbox which is assigned to the `value`\n  property. In addition...if you supply a valid `date` attribute to this textbox, it will be formatted for you. Don't\n  go being all clever trying to do things that are already taken care of for you.\n- `afterParseFail` - OPTIONAL, default `undefined`. Use this argument to bind an action that accepts this\n  component as an argument. This action will be triggered only when the date parsing fails.\n- `afterParseSuccess` - OPTIONAL, default `undefined`. Use this argument to bind an action that accepts this\n  component as an argument. This action will be triggered only when the date parsing succeeds.\n- `beforeParse` - OPTIONAL, default `undefined`. Use this argument to bind an action that accepts this\n  component as an argument. This action will be triggered prior to every parsing action.\n- `displayFormat` - OPTIONAL, DEFAULT `LL`. Formatting is done using moment.js. The default format of your\n  dates is the localized `LL`. You can change this however you want. See the demo.\n- `endOfDay?` - OPTIONAL, DEFAULT `false`.. When parsing dates, always set them to the last\n  second of the day.\n- `future?` - OPTIONAL, DEFAULT `false`. If `true`, ambiguous dates like `Sunday` will be\n  parsed as `next Sunday`. Note that non-ambiguous dates are not guaranteed to be in the\n  future. Default is `false`.\n- `past?` - OPTIONAL, DEFAULT `false`. If `true`, ambiguous dates like `Sunday` will be parsed\n  as `last Sunday`. Note that non-ambiguous dates are not guaranteed to be in the past. Default\n  is `false`.\n- `startOfDay?` - OPTIONAL, DEFAULT `false`. When parsing dates, always set them to the start\n  of the day. If set to `true`, this will take precedence over the `endOfDay` property.\n- `timezone` - OPTIONAL, DEFAULT `moment.tz.guess()`. Dates will be parsed and formatted in the specified\n  timezone.\n- _All the attributes from `ember-cli-text-support-mixins`' \u0026#123;\u0026#123;input-text\u0026#125;\u0026#125;._\n  See https://github.com/cybertoothca/ember-cli-text-support-mixins#arguments\n- _All the standard input attributes that apply to text boxes._\n\n#### Examples\n\n```handlebars\n{{input-date date=myModel.createdOn displayFormat='llll'}}\n\n{{input-date date=someComponentProperty}}\n\n\u003cdiv class='form-group'\u003e\n  \u003clabel for='js-updated-on' class='control-label'\u003eUpdated\u003c/label\u003e\n  {{input-date classNames='form-control' elementId='js-updated-on' date=anotherModel.updatedOn}}\n  \u003cp class='help-block'\u003eUse with bootstrap!\u003c/p\u003e\n\u003c/div\u003e\n```\n\n([Check out the demo...](http://ember-cli-date-textbox.cybertooth.io/))\n\n#### \u0026#123;\u0026#123;input-iso8601\u0026#125;\u0026#125;\n\nWhat's iso8601? Go read: https://en.wikipedia.org/wiki/ISO_8601\n\nJust like \u0026#123;\u0026#123;input-date\u0026#125;\u0026#125;, \u0026#123;\u0026#123;input-iso8601\u0026#125;\u0026#125; also makes a simple textbox. It takes in user input\nin the form of a date that is swiftly parsed and formatted.\n\n##### Arguments\n\n- `iso8601` - **REQUIRED \u0026 MUST BE A STRING**. Like the \u0026#123;\u0026#123;input-date\u0026#125;\u0026#125; component we do not use the textbox's\n  `value` property and instead bind to the `iso8601` attribute. This `iso8601` attribute expects a String and it\n  should be in ISO format (e.g. `yyyy-MM-ddTHH:mm:ssZ`).\n- `value` - **DO NOT USE**. I mention the `value` property because you shouldn't bind anything to it. Users\n  type in the textbox, the date they settle on will be formatted in the textbox which is assigned to the `value`\n  property. In addition...if you supply a valid `date` attribute to this textbox, it will be formatted for you. Don't\n  go being all clever trying to do things that are already taken care of for you.\n- `afterParseFail` - OPTIONAL, default `undefined`. Use this argument to bind an action that accepts this\n  component as an argument. This action will be triggered only when the date parsing fails.\n- `afterParseSuccess` - OPTIONAL, default `undefined`. Use this argument to bind an action that accepts this\n  component as an argument. This action will be triggered only when the date parsing succeeds.\n- `beforeParse` - OPTIONAL, default `undefined`. Use this argument to bind an action that accepts this\n  component as an argument. This action will be triggered prior to every parsing action.\n- `displayFormat` - OPTIONAL, DEFAULT `LL`. Formatting is done using moment.js. The default format of your dates is the localized\n  `LL`. You can change this however you want. See the demo.\n- `endOfDay?` - OPTIONAL, DEFAULT `false`.. When parsing dates, always set them to the last\n  second of the day.\n- `future?` - OPTIONAL, DEFAULT `false`. If `true`, ambiguous dates like `Sunday` will be\n  parsed as `next Sunday`. Note that non-ambiguous dates are not guaranteed to be in the\n  future. Default is `false`.\n- `past?` - OPTIONAL, DEFAULT `false`. If `true`, ambiguous dates like `Sunday` will be parsed\n  as `last Sunday`. Note that non-ambiguous dates are not guaranteed to be in the past. Default\n  is `false`.\n- `startOfDay?` - OPTIONAL, DEFAULT `false`. When parsing dates, always set them to the start\n  of the day. If set to `true`, this will take precedence over the `endOfDay` property.\n- `timezone` - OPTIONAL, DEFAULT `moment.tz.guess()`. Dates will be parsed and formatted\n  in the specified timezone.\n- _All the attributes from `ember-cli-text-support-mixins`' \u0026#123;\u0026#123;input-text\u0026#125;\u0026#125;._\n  See https://github.com/cybertoothca/ember-cli-text-support-mixins#arguments\n- _All the standard input attributes that apply to text boxes._\n\n#### Examples\n\n```handlebars\n{{input-iso8601 iso8601=myControllerProperty displayFormat='llll'}}\n\n\u003cdiv class='form-group'\u003e\n  \u003clabel for='js-from' class='control-label'\u003eDate From\u003c/label\u003e\n  {{input-iso8601 classNames='form-control' elementId='js-from' iso8601=anotherControllerProperty}}\n  \u003cp class='help-block'\u003eUse with bootstrap!\u003c/p\u003e\n\u003c/div\u003e\n```\n\n([Check out the demo...](http://ember-cli-date-textbox.cybertooth.io/))\n\n## Contributing\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcybertoothca%2Fember-cli-date-textbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcybertoothca%2Fember-cli-date-textbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcybertoothca%2Fember-cli-date-textbox/lists"}