{"id":23275858,"url":"https://github.com/abadi199/datetimepicker","last_synced_at":"2025-08-21T08:31:58.140Z","repository":{"id":14832933,"uuid":"77092730","full_name":"abadi199/datetimepicker","owner":"abadi199","description":"📅  Date and Time Picker","archived":false,"fork":false,"pushed_at":"2018-09-14T18:42:10.000Z","size":1083,"stargazers_count":94,"open_issues_count":14,"forks_count":22,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-08-15T23:58:57.401Z","etag":null,"topics":["datepicker","datetimepicker","elm","timepicker"],"latest_commit_sha":null,"homepage":"http://package.elm-lang.org/packages/abadi199/datetimepicker/latest","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/abadi199.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":"2016-12-21T23:08:10.000Z","updated_at":"2025-05-05T18:59:10.000Z","dependencies_parsed_at":"2022-08-07T08:00:38.995Z","dependency_job_id":null,"html_url":"https://github.com/abadi199/datetimepicker","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/abadi199/datetimepicker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abadi199%2Fdatetimepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abadi199%2Fdatetimepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abadi199%2Fdatetimepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abadi199%2Fdatetimepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abadi199","download_url":"https://codeload.github.com/abadi199/datetimepicker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abadi199%2Fdatetimepicker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271449332,"owners_count":24761659,"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-08-21T02:00:08.990Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","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":["datepicker","datetimepicker","elm","timepicker"],"created_at":"2024-12-19T21:16:48.645Z","updated_at":"2025-08-21T08:31:57.839Z","avatar_url":"https://github.com/abadi199.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Date and Time Picker\n\n## Demo\n\n### [Live Demo](https://abadi199.github.io/datetimepicker/)\n\n### Date Time Picker\n\nThe date and time picker can be used in two modes:\n\n* Analog Time Picker\n* Digital Time Picker\n\n#### Analog time picker\n\n![alt text](https://github.com/abadi199/datetimepicker/raw/master/images/datetimepicker-analog.gif \"Date Time Picker with Analog Time Picker Preview\")\n\nCode:\n\n```elm\nview model =\n    DateTimePicker.dateTimePickerWithConfig\n        { defaultDateTimeConfig | timePickerType = DateTimePicker.Config.Analog }\n        [ class \"my-datetimepicker\" ]\n        model.state\n        model.value\n```\n\n### Digital time picker\n\n![alt text](https://github.com/abadi199/datetimepicker/raw/master/images/datetimepicker-digital.gif \"Date Time Picker with Digital Time Picker Preview\")\n\nCode:\n\n```elm\nview model =\n    DateTimePicker.dateTimePickerWithConfig\n        { defaultDateTimeConfig | timePickerType = DateTimePicker.Config.Digital }\n        [ class \"my-datetimepicker\" ]\n        model.state\n        model.value\n```\n\n### Date Picker\n\nJust the date picker without the time.\n\n![alt text](https://github.com/abadi199/datetimepicker/raw/master/images/datepicker.gif \"Date Picker Preview\")\n\nCode:\n\n```elm\ntype Msg = DateChange DateTimePicker.State (Maybe Date)\n\ntype alias Model = { value : Maybe Date, state : DateTimePicker.State }\n\nview model =\n    DateTimePicker.datePicker\n        DateChange\n        [ class \"my-datepicker\" ]\n        model.state\n        model.value\n```\n\n### Time Picker\n\nJust the time picker without the date.\n\n![alt text](https://github.com/abadi199/datetimepicker/raw/master/images/timepicker.gif \"Time Picker Preview\")\n\nCode:\n\n```elm\ntype Msg = TimeChange DateTimePicker.State (Maybe Date)\n\ntype alias Model = { value : Maybe Date, state : DateTimePicker.State }\n\nview model =\n    DateTimePicker.timePicker\n        TimeChange\n        [ class \"my-timepicker\" ]\n        model.state\n        model.value\n```\n\n## Documentation\n\nThis package follows the `evancz\\sortable-table` package approach where it's not\na nested elm architecture 'component'. It's just view functions where you feed\nthe data and the message constructor to the function. It does use an opaque\n`State` to maintain its internal state.\n\nThe picker requires the initial value of the date (usually today) to set the\ninitial position of the calendar. To feed this date to the picker's internal\nstate, you can use 2 approaches\n\n* By passing a `Date` value to the `DateTimePicker.initialStateWithToday`\n  function when initialing the picker's State.\n* By calling the `DateTimePicker.initialCmd` as part of your `init` commands.\n\n### Views\n\nThe date time picker package provides multiple view functions, depending on how\nyou want to use the picker.\n\n* `datePicker` is a simple date picker view, with no time picker, and comes with\n  all default configuration.\n* `timePicker` is a simple time picker view, with no date picker, and comes with\n  all default configuration.\n* `dateTimePicker` is a simple date and time picker view, comes with all default\n  configuration.\n* `datePickerWithConfig` is a configurable date picker view.\n* `timePickerWithConfig` is a configurable time picker view.\n* `dateTimePickerWithConfig` is a configurable date and time picker view.\n\n### Config\n\nYou customize the date picker configuration by passing a\n`DateTimePicker.Config.Config` value to the picker's view function. The\nDateTimePicker.Config module provides some default configurations for both date\npicker and date time picker.\n\n## Internationalization\n\nIn order to localize your date format, you need to provide the date time picker\nwith a `Date` to `String` formatter and `String` to `Maybe Date` parser. The\nauthor recommends using\n[rluiten/elm-date-extra](package.elm-lang.org/packages/rluiten/elm-date-extra/latest)\nfor the formatter, and\n[abadi199/dateparser](http://package.elm-lang.org/packages/abadi199/dateparser/latest)\nfor the parser.\n\n### CSS\n\nThe\n[rtfeldman/elm-css](http://package.elm-lang.org/packages/rtfeldman/elm-css/latest)\ncode for this package is available as separate package as\n[abadi199/datetimepicker-css](http://package.elm-lang.org/packages/abadi199/datetimepicker-css/latest),\nthat way, you can still use package without having to have dependency to elm-css\nor if your project is using different version of `elm-css`. Just the download\ncompiled\n[`styles.css`](https://raw.githubusercontent.com/abadi199/datetimepicker-css/master/styles.css)\nin include it in your `html`. If you're using `elm-css` in your project, and you\nwant to bundle the DateTimePicker's css along with our project css, please refer\nto\n[abadi199/datetimepicker-css](http://package.elm-lang.org/packages/abadi199/datetimepicker-css/latest)\n\n### Example\n\nHere's a snippet of typical Elm application:\n\n```elm\nmain =\n    Html.program\n        { init = init\n        , view = view\n        , update = update\n        , subscriptions = subscriptions\n        }\n\ntype Msg\n    = DateChange DateTimePicker.State (Maybe Date)\n\ntype alias Model =\n    { selectedDate : Maybe Date\n    , datePickerState : DateTimePicker.State\n    }\n\ninit =\n    ( { selectedDate = Nothing, datePickerState = DateTimePicker.initialState }\n    , DateTimePicker.initialCmd DateChange DateTimePicker.initialState\n    )\n\nview model =\n    DateTimePicker.dateTimePickerWithConfig\n        DateChange\n        [ class \"my-datetimepicker\" ]\n        model.datePickerState\n        model.selectedDate\n\nupdate msg model =\n    case msg of\n        DateChange datePickerState selectedDate -\u003e\n            ( { model | selectedDate = selectedDate, datePickerState = datePickerState }, Cmd.none )\n\nsubscriptions =\n    ...\n```\n\nFor a complete sample code, please see the\n[demo](https://github.com/abadi199/datetimepicker/tree/master/demo) folder of\nthe source code.\n\n## Contributing\n\n* [Submit a pull request](https://github.com/abadi199/datetimepicker)! If you're\n  missing a feature you want to have, or just found a bug, or found an error in\n  the docs, please submit a pull request.\n* [Create an issue](https://github.com/abadi199/datetimepicker/issues)! If you\n  found a bug or want a new feature that you think will make the library better,\n  but don't have time to do it yourself, please submit an issue.\n* Message me on slack or [twitter](https://twitter.com/abadikurniawan) if you\n  just want to give me a feedback or thank me. I'm\n  [abadi199](https://elmlang.slack.com/team/abadi199) on\n  [elm-lang](https://elmlang.herokuapp.com/) slack channel.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabadi199%2Fdatetimepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabadi199%2Fdatetimepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabadi199%2Fdatetimepicker/lists"}