{"id":21721631,"url":"https://github.com/polydile/dile-date-without-calendar","last_synced_at":"2026-05-19T10:36:07.417Z","repository":{"id":35065015,"uuid":"197928033","full_name":"Polydile/dile-date-without-calendar","owner":"Polydile","description":"Web component that shows a date without calendar to a date based on LitElement","archived":false,"fork":false,"pushed_at":"2023-01-07T08:44:54.000Z","size":4416,"stargazers_count":2,"open_issues_count":23,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-01T17:59:23.129Z","etag":null,"topics":["calendar","date","input","litelement","webcomponents"],"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/Polydile.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":"2019-07-20T12:34:56.000Z","updated_at":"2021-04-29T11:57:10.000Z","dependencies_parsed_at":"2023-01-15T13:04:54.231Z","dependency_job_id":null,"html_url":"https://github.com/Polydile/dile-date-without-calendar","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/Polydile/dile-date-without-calendar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-date-without-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-date-without-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-date-without-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-date-without-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Polydile","download_url":"https://codeload.github.com/Polydile/dile-date-without-calendar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polydile%2Fdile-date-without-calendar/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266779249,"owners_count":23982891,"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","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["calendar","date","input","litelement","webcomponents"],"created_at":"2024-11-26T02:18:08.453Z","updated_at":"2026-05-19T10:36:05.443Z","avatar_url":"https://github.com/Polydile.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dile-date-without-calendar\n\nWeb component that shows a date without calendar to a date based on LitElement\n\nGo to [DEMOS page](https://dile-date-without-calendar.polydile.com)!\n\n\n\u003cbr\u003e\n\n![Presentation](https://raw.githubusercontent.com/Polydile/dile-date-without-calendar/asset/presentation.jpg)\n\n\n## Install\n\n```\nnpm install dile-date-without-calendar\n```\n## Usage\n\n#### Import the component\n\n###### Into your HTML page\n\n```html\n\u003cscript src=\"./node_modules/dile-date-without-calendar/dist/dile-date-without-calendar.min.js\"\u003e\u003c/script\u003e\n```\n###### into your module script\n\n```html\nimport 'dile-date-without-calendar/dile-date-without-calendar';\n```\n\n**Default**\n\n```html\n\u003cdile-date-without-calendar \n    value=\"1977-11-15\"\u003e\u003c/dile-date-without-calendar\u003e\n```\n**Disabled**\n```html\n\u003cdile-date-without-calendar \n    value=\"1977-11-15\" \n    disabled\u003e\u003c/dile-date-without-calendar\u003e\n```\n\n**Readonly**\n```html\n\u003cdile-date-without-calendar \n    value=\"1977-11-15\" \n    readonly\u003e\u003c/dile-date-without-calendar\u003e\n```\n\n**Show months names in Popup**\n\n```html\n\u003cdile-date-without-calendar \n    value=\"1977-11-15\" \n    options='{\"monthsNames\":true}'\u003e\u003c/dile-date-without-calendar\u003e\n```\n\n**Different language**\n\n```html\n\u003cdile-date-without-calendar \n    value=\"1977-11-15\" \n    options='{\n        \"locale\":{\n            \"months\":[\"Enero\",\"Febrero\",\"Marzo\",\"Abril\",\n            \"Mayo\",\"Junio\",\"Julio\",\"Agosto\",\"Septiembre\",\n            \"Octubre\",\"Noviembre\",\"Diciembre\"],\n            \"daysTag\":\"D\u0026iacute;as\",\n            \"monthsTag\":\"Meses\",\n            \"yearsTag\":\"Años\"\n        }\n    }'\u003e\u003c/dile-date-without-calendar\u003e\n```\n**Customized**\n\n```html\n \u003cstyle\u003e\n    .date1 {\n      /*Input*/\n    \n      --dileDateWithoutCalendar-InputboxFocus-border-color: #000;\n      --dileDateWithoutCalendar-InputboxFocus-box-shadow: rgba(43, 58, 66, 0.25);\n      --dileDateWithoutCalendar-Inputbox-border-width: 2px;\n      --dileDateWithoutCalendar-Inputbox-border-color: #00c000;\n      --dileDateWithoutCalendar-Inputbox-background-color: #000;\n      --dileDateWithoutCalendar-Inputbox-text-color: #00c000;\n      --dileDateWithoutCalendar-field-background-color: #00ff00;\n      --dileDateWithoutCalendar-field-text-color: #000;\n      --dileDateWithoutCalendar-field-color: #00ff00;\n      --dileDateWithoutCalendar-buttons-color: #00ff00;\n      --dileDateWithoutCalendar-InputboxFocus-box-shadow-width: 0.2rem;\n      --dileDateWithoutCalendar-InputboxErr-box-shadow-width: 0.3rem;\n    \n      /*Popup*/\n    \n      --dileDateWithoutCalendar-PopupFieldMonth-text-align: left;\n      --dileDateWithoutCalendar-Popup-background-color: #000;\n      --dileDateWithoutCalendar-Popupfield-text-color: #00c000;\n      --dileDateWithoutCalendar-PopupButtons-color: #00ff00;\n      --dileDateWithoutCalendar-Popupfield-hover-background-color: #00c000;\n      --dileDateWithoutCalendar-Popupfield-hover-text-color: #000;\n      --dileDateWithoutCalendar-Popupfield-active-background-color: #00ff00;\n      --dileDateWithoutCalendar-Popupfield-active-text-color: #000;\n      --dileDateWithoutCalendar-PopupFieldBox-hover-border-color: #00ff00;\n      --dileDateWithoutCalendar-PopupFieldBox-hover-box-shadow: rgba(0, 192, 0, 0.25);\n      --dileDateWithoutCalendar-PopupfieldTag-text-color: #00ff00;\n      --dileDateWithoutCalendar-PopupFieldMonth-min-width: 87px;\n      --dileDateWithoutCalendar-PopupFieldDay-min-width: 40px;\n    }\n    \u003c/style\u003e\n\n    \u003cdile-date-without-calendar \n        class=\"date1\" \n        value=\"1977-11-15\" \n        options='{\"monthsNames\":true}'\n    \u003e\u003c/dile-date-without-calendar\u003e\n```\n\n**Events, Change and Error**\n\n###### **_LitElement emits events_**\n\n```html\n\u003cdile-date-without-calendar \n    value=\"1977-11-15\" \n    options='{\"monthsNames\":true}' \n    @dileDateWithoutCalendar-change=${event =\u003e {\n          \n          console.log(event.detail);\n\n    }}\n    \n    @dileDateWithoutCalendar-error=${event =\u003e {\n        \n        console.log(event.detail);\n\n    }}\u003e\u003c/dile-date-without-calendar\u003e\n```\n\n###### **_window cash events_**\n\n```html\n\u003cdile-date-without-calendar id=\"date\"\n    value=\"1977-11-15\"\u003e\u003c/dile-date-without-calendar\u003e\n\n\u003cscript\u003e\n    \n    var date = document.getElementById('date');\n\n    date.addEventListener('dileDateWithoutCalendar-error', (event)=\u003e{\n        \n        console.log(event.detail)\n    \n    }, false);\n\n    document.addEventListener('dileDateWithoutCalendar-change', (event)=\u003e{\n    \n        console.log(event.detail)\n    \n    }, false);\n\n\u003c/script\u003e\n\n```\n## Properties\n\n| Prop     | Default      | Description                                                                                                               |\n|----------|--------------|---------------------------------------------------------------------------------------------------------------------------|\n| value    | Date current | Set date, format valid: \"YYYY-MM-DD\" or \"YYYYY-MM-DD\"                                                                     |\n| disabled | false        | The disabled attribute can be set to keep a user from using the \u003cdile-date-without-calendar\u003e\u003cdile-date-without-calendar\u003e  |\n| readonly | false        | The readonly attribute can be set to keep a user from changing the value until some other conditions                      |\n                   \n\n\n## Special Properties\n\n| options |\n|---------|\n\nA json string, sets the configuration for the languages, determines if the names of the months are displayed in the Popup\n\n```json \n{\n   \n   \"monthsNames\": false,\n   \"locale\": {\n     \"months\": [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\",\n       \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"\n     ],\n     \"daysTag\": \"Days\",\n     \"monthsTag\": \"Months\",\n     \"yearsTag\": \"Years\"\n   }\n }\n ```\n\n## Styling\n\n| Custom property                                              | Default                | Description                         |\n|--------------------------------------------------------------|------------------------|-------------------------------------|\n| --dileDateWithoutCalendar-Inputbox-border-width              | 1px                    | Input box border width              |\n| --dileDateWithoutCalendar-Inputbox-border-color              | #7A7A7A                | Input box border color              |\n| --dileDateWithoutCalendar-Inputbox-background-color          | transparent            | Input box background color          |\n| --dileDateWithoutCalendar-Inputbox-text-color                | currentColor           | Input box text color                |\n| --dileDateWithoutCalendar-InputboxFocus-border-color         | rgba(43,58,66,0.17)    | Input box Focus border color        |\n| --dileDateWithoutCalendar-InputboxFocus-box-shadow-width     | .1rem                  | Input box Focus box shadow width    |\n| --dileDateWithoutCalendar-InputboxFocus-box-shadow           | rgba(43,58,66,0.25)    | Input box Focus box shadow          |\n| --dileDateWithoutCalendar-InputboxErr-border-color           | rgba(244,67,54)        | Input box Err border color          |\n| --dileDateWithoutCalendar-InputboxErr-box-shadow-width       | .1rem                  | Input box Err box shadow width      |\n| --dileDateWithoutCalendar-InputboxErr-shadow                 | rgba(244,67,54,.25)    | Input box Err shadow                |\n| --dileDateWithoutCalendar-field-color                        | currentColor           | Field color                         |\n| --dileDateWithoutCalendar-field-background-color             | #2792FF                | Field background color              |\n| --dileDateWithoutCalendar-field-text-color                   | #FFFFFF                | Field text color                    |\n| --dileDateWithoutCalendar-Buttons-color                      | currentColor           | Buttons color                       |\n| --dileDateWithoutCalendar-PopupButtons-color                 | currentColor           | Buttons color of Popup              |\n| --dileDateWithoutCalendar-Popup-background-color             | #FFFFFF                | Popup background color              |\n| --dileDateWithoutCalendar-PopupFieldDay-min-width            | auto                   | Popup Field Day min width           |\n| --dileDateWithoutCalendar-PopupFieldDay-text-align           | center                 | Popup Field Day text align          |\n| --dileDateWithoutCalendar-PopupFieldMonth-min-width          | auto                   | Popup Field Month min width         |\n| --dileDateWithoutCalendar-PopupFieldMonth-text-align         | center                 | Popup Field Month text align        |\n| --dileDateWithoutCalendar-PopupFieldYear-min-width           | auto                   | Popup Field Year min width          |\n| --dileDateWithoutCalendar-PopupFieldYear-text-align          | center                 | Popup Field Year text align         |\n| --dileDateWithoutCalendar-PopupFieldBox-hover-border-color   | rgba(130,190,255,0.17) | Popup Field Box hover border color  |\n| --dileDateWithoutCalendar-PopupFieldBox-shadow-width         | .1rem                  | Popup Field Box shadow width        |\n| --dileDateWithoutCalendar-PopupFieldBox-hover-box-shadow     | rgba(0,123,255,.25)    | Popup Field Box hover box shadow    |\n| --dileDateWithoutCalendar-PopupfieldTag-font-weight          | bold                   | Popup field Tag font weight         |\n| --dileDateWithoutCalendar-PopupfieldTag-text-color           | currentColor           | Popup field Tag text color          |\n| --dileDateWithoutCalendar-Popupfield-font-size               | 12px                   | Popup field font size               |\n| --dileDateWithoutCalendar-Popupfield-text-color              | #00C000                | Popup field text color              |\n| --dileDateWithoutCalendar-Popupfield-hover-background-color  | #2792FF                | Popup field hover background color  |\n| --dileDateWithoutCalendar-Popupfield-hover-text-color        | #FFFFFF                | Popup field hover text color        |\n| --dileDateWithoutCalendar-Popupfield-active-background-color | #2792FF                | Popup field active background color |\n| --dileDateWithoutCalendar-Popupfield-active-text-color       | #FFFFFF                | Popup field active text color       |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolydile%2Fdile-date-without-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolydile%2Fdile-date-without-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolydile%2Fdile-date-without-calendar/lists"}