{"id":13596302,"url":"https://github.com/RickStrahl/datepicker-native","last_synced_at":"2025-04-09T16:32:07.714Z","repository":{"id":66331185,"uuid":"576542362","full_name":"RickStrahl/datepicker-native","owner":"RickStrahl","description":"JavaScript and Vue helper components to make it easier to bind dates to the input/date control and a date button picker.","archived":false,"fork":false,"pushed_at":"2023-02-07T01:03:06.000Z","size":55,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T17:12:56.641Z","etag":null,"topics":["javascript","vue3","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RickStrahl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-12-10T06:57:44.000Z","updated_at":"2024-01-08T21:13:35.000Z","dependencies_parsed_at":"2023-02-20T19:45:43.113Z","dependency_job_id":null,"html_url":"https://github.com/RickStrahl/datepicker-native","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RickStrahl%2Fdatepicker-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RickStrahl%2Fdatepicker-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RickStrahl%2Fdatepicker-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RickStrahl%2Fdatepicker-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RickStrahl","download_url":"https://codeload.github.com/RickStrahl/datepicker-native/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248067861,"owners_count":21042364,"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":["javascript","vue3","vuejs"],"created_at":"2024-08-01T16:02:16.824Z","updated_at":"2025-04-09T16:32:02.705Z","avatar_url":"https://github.com/RickStrahl.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# DatePicker Native Helpers and Button Only Date Picker\nThis repo holds a couple of HTML date helpers to make it easier to bind and unbind date values to `\u003cinput type='date' /\u003e` controls. It also includes an example on how to pop up a date button. \n\n* Assign dates directly to any `\u003cinput type=\"date\" /\u003e`\n* Fixes up date values for the local timezone  \npass in a local date, get back a local date\n* Allows options for easy limiting min/max date inputs\n* Button only date popups (ie. no input box)\n* **date-picker-button** Vue Component\n\nWhy this library? The way the date input controls natively works is a pain, as dates have to be formatted as a string in `ISO8601` format without a time component:\n\n```html\n\u003cinput type=\"date\" \n       value=\"2022-11-29\" \n       min=\"\" max=\"2022-12-05\"/\u003e\n```\n\nThis process is further complicated by the fact that the date has to be a UTC date (no time zone), while time values like `new Date()` tend to be local time values which have a time zone applied. In order to reliably bind a date, the time component has to be adjusted to reflect the time zone offset. This small library adjusts the date and spits out the correct format for binding both for the `value` and `min`/`max` values.\n\nAdditionally there's a Vue component that provides a button based date picker that uses a button without the input control. An HTML/CSS example how to create button date picker behavior is also provided below.\n\n## Basic JavaScript Usage\nThis component works as a very simple control binder. You call a function and pass in an element, date and callback for notification when the date value is changed.\n\n### Loading the library\nThere are two versions:\n\n* Using ESM Module - datepicker-native.esm.js\n* Global declares - datepicker-native.js\n\n#### Using ESM Module\nYou can use ES 2015+ syntax to load via ESM module loading and then access `DatePickerNative`:\n\n```html\n \u003cscript type=\"module\"\u003e\n   import  DatePickerNative from \"./datepicker-native.esm.js\";\n       \n   var callback = function(dt, event, instance) {\n    console.log(dt);  // changed date\n   }\n\n   // parameters\n   var dateControl = DatePickerNative(el, startDate, callback);\n   \n   // or Options\n   var dateControl2 = DatePickerNative({ \n       element: el,\n       activeDate: startDate,\n       onDateChanged: callback,\n       min: 5, max: 5\n   });\n   ...\n\u003c/script\u003e   \n```\n\n#### Global Declarations\nIf you're not using ESM module you can use global access to the `DatePickerNative` instance by importing the script:\n\n```html\n\u003cscript src=\"datepicker-native.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n   // parameters\n   var dateControl = DatePickerNative(el, startDate, callBack);\n   \n   // or Options\n   var dateControl2 = DatePickerNative({ \n       element: el,\n       activeDate: startDate,\n       onDateChanged: callback,\n       min: 5, max: 5\n   });\n   ...\n\u003c/script\u003e\n```\n\n### Usage\nThe idea with this component is that you can use JavaScript code to assign a date via code to an input element:\n\n```js\nvar el = document.getElementById(\"StartDate\");\nvar startDate = new Date();\n\n// assign date and get notified on changes\nvar dateControl = DatePickerNative(el, startDate, \n   function(dt, event, instance) {\n       // ... do something with changed `dt` value\n   });\n```\n\nYou can also use the *Options Syntax* instead:\n\n```js\nvar elInput = document.getElementById(\"DatePickerInput\");\n\n// parameter syntax - Standard Date Input control\nvar dateControl = new DatePickerNative({ \n    element: elInput, \n    activeDate: startDate, \n    // + or - 5 days min date restriction\n    // optional. date, or string date also work\n    min: 5,             \n    max: 5, \n    onDateChanged: function(dt, event, instance) {\n        // do something with the update `dt` date\n    } \n});\n```\n\n##  DatePicker Input and DatePicker Button\nThe native date picker control only works with a full input control that displays both the date input with a button to pop up the selection calendar which looks like this:\n\n![](images/DatePickerInput.png)\n\nIf you would rather display a just a button and pop up the calendar without displaying the input box you can use some custom CSS and HTML layout to accomplish a button only display like this:\n\n![](images/DatePickerButton.png)\n\nThe `date-picker-button.vue` component provides this button as a drop in component. If you're using plain HTML/CSS/JavaScript the following describes how to create a DatePicker button that effectively hides the input control.\n\n## A DatePicker Button with plain HTML/CSS\nA few steps are involved in creating a DatePicker Button:\n\n* Add the button HTML\n* Add `DatePickerNative.js` library\n* Add `DatePickerNative.css` styles (small so you can inline these)\n\nWe'll start with the HTML which basically wraps a `\u003cinput type=\"date\" /\u003e` control into an HTML button:\n\n```html\n\u003cbutton id=\"DatePicker\" class=\"datepicker-native btn btn-secondary btn-sm\"\u003e\n    \u003ci class=\"far fa-calendar-alt\"\u003e\u003c/i\u003e\n    \u003cinput type=\"date\" class=\"datepicker-native-input\" /\u003e\n\u003c/button\u003e\n```\n\nI'm using **font-awesome** for the icon here, but you can use whatever you like for the content for the button - text, image, icon, it doesn't matter. The `btn` styles are **bootstrap** but again, you can use whatever you want or no styling at all for the button.\n\nThe important, **required pieces are the two styles**:  \n\n* **datepicker-native** on the button\n* **datepicker-native-input** on the embedded `\u003cinput type=\"date\" /\u003e` control\n\nThe trick to making the button work without the input control is to effectively making it invisible, but still active and overlaying the button content over it. The key to this is the CSS ([datepicker-native.css](datepicker-native.css)):\n\n```css\n.datepicker-native-button {\n    position: relative;\n}\n.datepicker-native-button-input {\n    position: absolute;\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n    right: 0;\n    top: 0;\n    opacity: 0;\n}\n.datepicker-native-button-input::-webkit-calendar-picker-indicator {\n    position: absolute;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    opacity: 0;\n    cursor: pointer;\n}\n```\n\nThe button is marked as `position:relative` width the input made full width and height of the button, but effectively invisible. The `opacity` is 0 so the control is not visible, but because the `position: absolute` it sits ontop of the button content and is still responsive. So now when you click the date control is activated.\n\nOne more important piece to this is the `.datepicker-native-input::-webkit-calendar-picker-indicator` style which effectively makes the entire date control clickable instead of just the calendar button of the native control.\n\nThe script operation then activates the initial date binding which adjusts the date appropriately and allows any changes to fire a callback:\n\n```js\nvar startDate = new Date(2022,10,10);\n\nvar el = document.getElementById(\"DatePicker\");\n \n// *** Create the component and handle the callback\nDatePickerNative(el, startDate, function(dt, event) {\n    // updated date is returned\n    showDate(dt,\"ActiveDate\");\n});\nshowDate(startDate,\"ActiveDate\");\n```\n\nYou can look at the examples in [index.html](index.html) (ESM Modules) and [index-globals.html](index-globals.html) (global declare).\nerface. \n\n## Vue Component\nFor good measure I ran into all of this originally within a Vue application and I initially build a Vue component for a drop-in `data-button` component only later back-fitting the plain JS component. \n\nThe Vue version is a bit less generic as it uses bootstrap and font-awesome in the template, but you can customize the template as you see fit.\n\nThe component can directly bind dates and min/max values:\n\n```html\n\u003cdate-picker-button\n    v-bind:date-value=\"activeDate\"\n    v-on:update:dateValue=\"dateUpdated($event)\"\n    v-bind:min=\"7\"\n    v-bind:max=\"7\"\n\u003e\u003c/date-picker-button\u003e\n```       \n\nDate value binding is one way only, and instead you have to handle an event to capture and update the new date value - `dateUpdated()` in the code below:\n\n```js\nexport default {\n    name: \"ServiceOrderListView\",\n    components: { DatePickerButton },\n    data() {\n        vm = this; // hang on to proxy reference\n        return {\n            // this is our date binding value\n            activeDate: mdApp.global.lastAssignedServiceSearchDate,\n        };\n    },\n    methods: {\n        // Date Update Handler \n        dateUpdated(newDate){\n            if (vm.activeDate === newDate) return;\n            \n            // this updates the model\n            vm.activeDate = newDate;\n            \n            // now re-run the filtered list with the new date\n            vm.getServiceOrders();\n        }\n    }\n}    \n```  \n\n\u003e **Note:** The event does not fire if you select the currently selected date - the value has to actually change for the event to fire.\n\nThe  [date-picker-button.vue](vue/datepicker-button.vue) component is tiny and you can copy and drop it into your project as needed.\n\n\n## License\n\nLicensed under the MIT License. There's no charge to use, integrate or modify the code for this project. You are free to use it in personal, commercial, government and any other type of application.\n\n### Warranty Disclaimer: No Warranty!\n\nIN NO EVENT SHALL THE AUTHOR, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR REDISTRIBUTE THIS PROGRAM AND DOCUMENTATION, BE LIABLE FOR ANY COMMERCIAL, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM INCLUDING, BUT NOT LIMITED TO, LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR LOSSES SUSTAINED BY THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS, EVEN IF YOU OR OTHER PARTIES HAVE BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRickStrahl%2Fdatepicker-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRickStrahl%2Fdatepicker-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRickStrahl%2Fdatepicker-native/lists"}