{"id":18767670,"url":"https://github.com/priyank-p/simplepicker","last_synced_at":"2025-08-21T20:32:30.544Z","repository":{"id":32932112,"uuid":"146808974","full_name":"priyank-p/simplepicker","owner":"priyank-p","description":"Simple date and time picker in vanilla javascript","archived":false,"fork":false,"pushed_at":"2022-12-29T21:40:52.000Z","size":636,"stargazers_count":54,"open_issues_count":23,"forks_count":22,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-12-09T10:03:41.608Z","etag":null,"topics":["css","datepicker","datetime-library","datetime-picker","datetimepicker","html","html5","javacript","lightweight","picker","simplepicker","vanilla-javascript","vanilla-js"],"latest_commit_sha":null,"homepage":"https://priyank-p.github.io/simplepicker/index.html","language":"TypeScript","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/priyank-p.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":"2018-08-30T21:34:38.000Z","updated_at":"2024-02-29T19:35:19.000Z","dependencies_parsed_at":"2023-01-14T22:44:01.451Z","dependency_job_id":null,"html_url":"https://github.com/priyank-p/simplepicker","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/priyank-p%2Fsimplepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/priyank-p%2Fsimplepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/priyank-p%2Fsimplepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/priyank-p%2Fsimplepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/priyank-p","download_url":"https://codeload.github.com/priyank-p/simplepicker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230532448,"owners_count":18240792,"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":["css","datepicker","datetime-library","datetime-picker","datetimepicker","html","html5","javacript","lightweight","picker","simplepicker","vanilla-javascript","vanilla-js"],"created_at":"2024-11-07T19:08:12.133Z","updated_at":"2024-12-20T04:07:37.931Z","avatar_url":"https://github.com/priyank-p.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# simplepicker\n\nSimple datetime picker in vanilla javascript.\nThis project is mostly based on [material-datetime-picker](https://github.com/ripjar/material-datetime-picker), but\nwithout it relying on external dependencies like `moment`,\n`rome`, and `materialize`.\n\n## Installation\n\nInstall from npm:\n```\nnpm install simplepicker\n```\n\nWe also started to [publish this package](https://github.com/priyank-p/simplepicker/packages/) (starting from v2.0.0) to GitHub's package registry.\nIf you prefer the installing it from there you will need to [follow GitHub's instructions](https://help.github.com/en/articles/configuring-npm-for-use-with-github-package-registry#installing-a-package).\n\n## Usage\n\nTo use simplepicker in your project you will need to include\nCSS and JavaScript files in `dist/` directory. CSS file `dist/simplepicker.css`\nis used to style the simplepicker and the JavaScript file required is in `dist/simplepicker.js`.\n\nIf you use build tools, therefore `require` or ES6 `import`, you can also\n`require` or `import` simplepicker; if you use typescript you'll need to do\n`import SimplePicker = require('simplepicker');`.\n\nIf you include the js file in dist folder, `SimplePicker` is defined using\n`var` declaration and is avalible as `SimplePicker`.\n\nFor typescript projects we provide the typescript declaration file\nwith the npm package.\n\n## API\n\nThis library is exported as a constructor, so you will need to create\nand instance of the simplepicker.\n\n#### `new SimplePicker([el, opts])`:\n  * `el` (optional, `string`, `Element`) - this parameter is optional\n  but if no selector or element is passed it defaults to `body`.\n\n  * `opts` (optional, `object`) - possible options:\n    - `zIndex` (`number`): sets the `z-index` for the simplepicker.\n    - `disableTimeSection` (`boolean`): If `true` disables the time picker section.\n    - `compactMode` (`boolean`): If `true` the simplepicker will be more compact; the large\n                                 display of the selected date, i.e. 25th will not be displayed.\n    - `selectedDate` (`Date`): initialize the simplepicker with this date, if not used then today\n                               will be used\n\nThe first argument passed could be `opts`.\n\nThis method creates new simplepicker instance, and inserts it into the dom.\nIt throws error only if the selector passed is not valid.\n```javascript\nconst simplepicker = new SimplePicker();\n```\n\n**Note:** You can have two `SimplePicker` instances but they both must have\ntwo diffrent element passed in to bind to otherwise they both will trigger the same\nevent; this is beacuse they both will respond to event triggred by the same element.\n\n```javascript\n// below both picker1 and picker2 are the same.\nconst picker1 = new SimplePicker();\nconst picker2 = new SimplePicker();\n\n// but to have to diffrent picker on same page\n// you will need to pass a diffrent selector as shown below.\nconst picker1 = new SimplePicker();\nconst picker2 = new SimplePicker('.some-element');\n```\n\n#### `simplepicker.open()`\n\nThis method opens the picker. The picker is hidden automatically\nwhen the `Cancel` button or the overlay is clicked.\n\nIf it closed due to an user action the `close` event is triggred whereas\nif the user selected an date the `submit` event it triggred. See `on` method\nbelow to listen to these events.\n\n#### `simplepicker.close()`\n\nThis method closes the picker without the user's action.\nMake sure you are not ruining user experience unnecessarily.\n\n#### `simplepicker.reset(date)`:\n  * `date` (optional, `Date`) - The date to select after reset. Default is current date (as in `new Date()`).\n\n**Note**: This method will overrride what the user may have already selected. Therefore,\nuse it with care considering user experience.\n\nThe example below sets resets to a date before showing the picker.\n```javascript\nconst sp = new SimplePicker();\nsp.reset(new Date(2019, 12, 31, 7, 0, 0));\nsp.open();\n```\n\n#### `simplepicker.on(event, handler)`:\n  - `event` (required, `string`): The name of the event, currently\n    `submit`, and `close` are supported.\n  - `handler` (required, `function`): This handler is called then\n    the event is triggred.\n\nThis function attaches a listener to simplepicker, which are called on sepecific events.\nThere could be multiple event listeners for a single event.\n\nEvents:\n  - `submit`: `handler(date, readableDate)` - Called\n    when user selects the date. It is called with two arguments:\n    `date` is first arguments that is a javascript date object, and\n    the second parameter is `readableDate` a string with date in format\n    `1st October 2018 12:00 AM`.\n  - `close`: `handler()` - It is called when due to user's action the\n    picker was close. It happens when user clicks the cancel button\n    or the picker overlay. Its handlers are called with no arguments.\n\n#### `simplepicker.disableTimeSection()`\n\nThis method disables the time picker section.\n\n#### `simplepicker.enableTimeSection()`\n\nThis method re-enables the time picker section if it was previously disabled.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpriyank-p%2Fsimplepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpriyank-p%2Fsimplepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpriyank-p%2Fsimplepicker/lists"}