{"id":16163457,"url":"https://github.com/marianfoo/ui5-dayjs","last_synced_at":"2025-04-07T04:28:33.865Z","repository":{"id":43354218,"uuid":"461552339","full_name":"marianfoo/ui5-dayjs","owner":"marianfoo","description":null,"archived":false,"fork":false,"pushed_at":"2022-06-15T18:33:48.000Z","size":479,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-13T08:52:39.045Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@marianfoo/ui5-cc-dayjs","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marianfoo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-20T16:51:23.000Z","updated_at":"2022-06-15T19:21:53.000Z","dependencies_parsed_at":"2022-08-20T00:40:21.978Z","dependency_job_id":null,"html_url":"https://github.com/marianfoo/ui5-dayjs","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marianfoo%2Fui5-dayjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marianfoo%2Fui5-dayjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marianfoo%2Fui5-dayjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marianfoo%2Fui5-dayjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marianfoo","download_url":"https://codeload.github.com/marianfoo/ui5-dayjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247592137,"owners_count":20963463,"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-10-10T02:35:44.989Z","updated_at":"2025-04-07T04:28:33.848Z","avatar_url":"https://github.com/marianfoo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# UI5 custom control `ui5-cc-dayjs`\n\nUsage of dayjs directly in a UI5 custom control.\n\n## Features\n\nDayjs is a JavaScript library for parsing, validating, and formatting dates.  \nWith this custom control, you can use dayjs in your UI5 App.\n * use custom input and output formats (i.e. input format `YYYY-MM-DD` and output format `We/May/2022`)\n * manipulate your dates (i.e. add/remove days, months, years, etc.)\n * get start/end of the week, month, year, etc.\n * automatic translation, if present use locale of Fiori Launchpad, if not present use browser language\n\n### Sample App with usage\n\nhttps://github.com/marianfoo/ui5-dayjs-sample/blob/main/uimodule/webapp/view/MainView.view.xml\n\n## Install\n\n```bash\n$\u003e yarn add @marianfoo/ui5-cc-dayjs\n# or\n$\u003e npm install @marianfoo/ui5-cc-dayjs\n```\n\n## Usage\n\n1. define the dependeny in `$yourapp/package.json`\n\n   ```json\n   // it is already in \"dependencies\" after installation\n   \"ui5\": {\n     \"dependencies\": [\n       // ...\n       \"ui5-cc-dayjs\",\n       // ...\n     ]\n   }\n   ```\n\n2. declare the namespace in your XML view and use the custom control from that namespace\n\n   ```xml\n   \u003cmvc:View ... \n           xmlns:datejs=\"ui5-community.dayjs\"\n           ...\u003e\n      \u003cdatejs:DayjsText id=\"dayjsControl\" value=\"2014/12/30\" inputFormat=\"yyyy/MM/dd\" outputFormat=\"dd.MM.YYYY\"/\u003e\n   \u003c/mvc:View\u003e\n   ```\n\n## How it works\n\nControl is using dayjs behind the scenes.\nMore interfaces from dayjs are coming.\n\n## Api\n\nControl is inheriting from [`sap.m.Text`](https://ui5.sap.com/#/api/sap.m.Text). So you can use all of the properties and methods of `sap.m.Text`.\n\n### Properties DayjsText\n - value\n   - Input of date Format\n   - If it´s not ISO 8601, you have to use the inputFormat property\n - inputFormat\n   - List of all available formats from dayjs [here](https://day.js.org/docs/en/parse/string-format)\n - outputFormat\n   - List of all available formats from dayjs [here](https://day.js.org/docs/en/parse/string-format)\n - manipulate\n   - currently support is only `Add`,`Subtract`, `Start of Time` and `End of Time`\n```xml\n   \u003cmvc:View ... \n           xmlns:datejs=\"ui5-community.dayjs\"\n           ...\u003e\n          \u003cLabel text=\"Add 1 Day\" /\u003e\n          \u003cdatejs:DayjsText value=\"{path: '/date'}\" inputFormat=\"{path: '/inputFormat'}\" outputFormat=\"{path: '/outputFormat'}\"\n          manipulate=\"{method: 'add',unit: 'day',amount: 1}\"/\u003e\n\n          \u003cLabel text=\"Substract 2 Month \" /\u003e\n          \u003cdatejs:DayjsText value=\"{path: '/date'}\" inputFormat=\"{path: '/inputFormat'}\" outputFormat=\"{path: '/outputFormat'}\"\n          manipulate=\"{method: 'subtract',unit: 'month',amount: 2}\"/\u003e\n\n          \u003cLabel text=\"Begin of Year\" /\u003e\n          \u003cdatejs:DayjsText value=\"{path: '/date'}\" inputFormat=\"{path: '/inputFormat'}\" outputFormat=\"{path: '/outputFormat'}\"\n          manipulate=\"{method: 'startOf',unit: 'year'}\"/\u003e\n\n          \u003cLabel text=\"End of Quarter\" /\u003e\n          \u003cdatejs:DayjsText value=\"{path: '/date'}\" inputFormat=\"{path: '/inputFormat'}\" outputFormat=\"{path: '/outputFormat'}\"\n          manipulate=\"{method: 'endOf',unit: 'quarter'}\"/\u003e\n   \u003c/mvc:View\u003e\n   ```\n\n### Properties DayjsDiff\n - date1\n   - Input of date1\n - date2\n   - Input of date1\n   - If it´s not ISO 8601, you have to use the inputFormat property\n - inputFormat\n   - List of all available formats from dayjs [here](https://day.js.org/docs/en/parse/string-format)\n - unit (default: `millisecond`)\n   - list of available unit [here](https://day.js.org/docs/en/display/difference#list-of-all-available-units)\n - integer (default integer = true)\n   - show difference as integer or float\n - absolut (default absolut = false)\n   - show value as absolute value\n```xml\n   \u003cmvc:View ... \n           xmlns:datejs=\"ui5-community.dayjs\"\n           ...\u003e\n          \u003cLabel text=\"Difference in Days\" /\u003e\n          \u003cdatejs:DayjsDiff date1=\"{path: '/date1'}\" date2=\"{path: '/date2'}\" inputFormat=\"{path: '/inputFormat'}\" unit=\"day\" integer=\"false\"/\u003e\n          \n          \u003cLabel text=\"Difference in Milliseconds\" /\u003e\n          \u003cdatejs:DayjsDiff date1=\"{path: '/date1'}\" date2=\"{path: '/date2'}\" inputFormat=\"{path: '/inputFormat'}\"/\u003e\n\n          \u003cLabel text=\"Difference in Milliseconds and absolute\" /\u003e\n          \u003cdatejs:DayjsDiff date1=\"{path: '/date1'}\" date2=\"{path: '/date2'}\" inputFormat=\"{path: '/inputFormat'}\" absolute=\"true\"/\u003e\n   \u003c/mvc:View\u003e\n   ```\n### Methods\n\n- getDayjsObject\n  - returns dayjs Object\n\n## License\n\nThis work is [dual-licensed](./LICENSE) under Apache 2.0 and the Derived Beer-ware License. The official license will be Apache 2.0, but ultimately you can choose between one of them if you use this work.\n\nWhen you like this stuff, buy [you](https://you) a drink when you see the person.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarianfoo%2Fui5-dayjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarianfoo%2Fui5-dayjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarianfoo%2Fui5-dayjs/lists"}