{"id":14956055,"url":"https://github.com/nikhithagracejosh/date_n_time_picker_activeadmin","last_synced_at":"2025-10-06T09:31:14.601Z","repository":{"id":62556794,"uuid":"429419103","full_name":"NikhithaGraceJosh/date_n_time_picker_activeadmin","owner":"NikhithaGraceJosh","description":"A completely customizable date and time picker for ActiveAdmin.","archived":false,"fork":false,"pushed_at":"2025-02-10T14:03:35.000Z","size":262,"stargazers_count":1,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-28T23:16:32.746Z","etag":null,"topics":["css","customise","customizable","customize","date-and-time-picker-activeadmin","date-picker-range","datentimepickeractiveadmin","datepicker","datetime","datetime-format","datetime-picker","datetimepicker","hacktoberfest","hacktoberfest2022","rails","ruby","rubygem","rubyonrails","time-picker","timepicker"],"latest_commit_sha":null,"homepage":"","language":"Ruby","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/NikhithaGraceJosh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-11-18T12:21:03.000Z","updated_at":"2025-02-10T14:03:39.000Z","dependencies_parsed_at":"2022-11-03T06:00:55.830Z","dependency_job_id":null,"html_url":"https://github.com/NikhithaGraceJosh/date_n_time_picker_activeadmin","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/NikhithaGraceJosh/date_n_time_picker_activeadmin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NikhithaGraceJosh%2Fdate_n_time_picker_activeadmin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NikhithaGraceJosh%2Fdate_n_time_picker_activeadmin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NikhithaGraceJosh%2Fdate_n_time_picker_activeadmin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NikhithaGraceJosh%2Fdate_n_time_picker_activeadmin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NikhithaGraceJosh","download_url":"https://codeload.github.com/NikhithaGraceJosh/date_n_time_picker_activeadmin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NikhithaGraceJosh%2Fdate_n_time_picker_activeadmin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278586057,"owners_count":26011102,"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-10-06T02:00:05.630Z","response_time":65,"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":["css","customise","customizable","customize","date-and-time-picker-activeadmin","date-picker-range","datentimepickeractiveadmin","datepicker","datetime","datetime-format","datetime-picker","datetimepicker","hacktoberfest","hacktoberfest2022","rails","ruby","rubygem","rubyonrails","time-picker","timepicker"],"created_at":"2024-09-24T13:12:14.638Z","updated_at":"2025-10-06T09:31:14.111Z","avatar_url":"https://github.com/NikhithaGraceJosh.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DateNTimePickerActiveadmin\nA datetimepicker, tailored for [ActiveAdmin](https://github.com/activeadmin/activeadmin).\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003cimg src=\"https://user-images.githubusercontent.com/64245213/142817365-32fe4cd8-2314-4139-9fdc-4a0dd6c3f266.png\"\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n            \u003cimg src=\"https://user-images.githubusercontent.com/64245213/142817454-b2f3a0ef-6ac8-48ef-90a7-22ece0220372.png\"\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\u003cbr/\u003e\u003cbr/\u003e\n\n## Installation\n\nAdd this line to your application's Gemfile:\n\n```ruby\ngem 'date_n_time_picker_activeadmin'\n```\n\nAnd then execute:\n\n    $ bundle install\n\nOr install it yourself as:\n\n    $ gem install date_n_time_picker_activeadmin\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n## Usage\n\nCode Sample\n\n```ruby\nf.input :column_name, as: :datetimepicker\n```\n\nCSS\nIn active_admin.scss, add the line,\n\n```css\n@import date_n_time_picker_activeadmin\n```\nJS\nIn active_admin.js, add the line,\n\n```js\n//= require date_n_time_picker_activeadmin\n```\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n## Customisations\n\n##### Add a Minimum Date\nDisables all dates before the specified minimum date.\n```ruby\nf.input :column_name, as: :datetimepicker, datetimepicker_options: { min_date: Date.today }\n```\n##### Add a Maximum Date\nDisables all dates after the specified minimum date.\n```ruby\nf.input :column_name, as: :datetimepicker, datetimepicker_options: { max_date: Date.today }\n```\n##### Specify a date format\nDisplays selected datetime in the specified format.\n```ruby\nf.input :column_name, as: :datetimepicker, datetimepicker_options: { format: \"%mm-%dd-%yyyy %HH:%MM:%SS %P\"}\n```\n###### Example\n\u003csub\u003eConsider selected date is ```09 August 2021, 05:07:08 pm```, then format would be ```%dd %B %yyyy, %hh:%MM:%SS %p```\u003c/sub\u003e\n\n| \u003csub\u003e Format Options \u003c/sub\u003e | \u003csub\u003e Meaning  \u003c/sub\u003e                            | \u003csub\u003e Example \u003c/sub\u003e  |\n| ---------------------------:|:------------------------------------------------:|:---------------------:|\n| \u003csub\u003e '%d' \u003c/sub\u003e           | \u003csub\u003e day (single digit) \u003c/sub\u003e                  | \u003csub\u003e 9 \u003c/sub\u003e        |\n| \u003csub\u003e '%dd' \u003c/sub\u003e          | \u003csub\u003e day (2 digits) \u003c/sub\u003e                      | \u003csub\u003e 09 \u003c/sub\u003e       |\n| \u003csub\u003e '%m' \u003c/sub\u003e           | \u003csub\u003e month (single digit) \u003c/sub\u003e                | \u003csub\u003e 8 \u003c/sub\u003e        |\n| \u003csub\u003e '%mm' \u003c/sub\u003e          | \u003csub\u003e month (2 digits) \u003c/sub\u003e                    | \u003csub\u003e 08 \u003c/sub\u003e       |\n| \u003csub\u003e '%yy' \u003c/sub\u003e          | \u003csub\u003e year (2 digits)  \u003c/sub\u003e                    | \u003csub\u003e 21 \u003c/sub\u003e       |\n| \u003csub\u003e '%yyyy' \u003c/sub\u003e        | \u003csub\u003e year (4 digits)  \u003c/sub\u003e                    | \u003csub\u003e 2021 \u003c/sub\u003e     |\n| \u003csub\u003e '%h' \u003c/sub\u003e           | \u003csub\u003e hour (12hr format, single digit) \u003c/sub\u003e    | \u003csub\u003e 5 \u003c/sub\u003e        |\n| \u003csub\u003e '%hh' \u003c/sub\u003e          | \u003csub\u003e hour (12hr format, 2 digits) \u003c/sub\u003e        | \u003csub\u003e 05 \u003c/sub\u003e       |\n| \u003csub\u003e '%H' \u003c/sub\u003e           | \u003csub\u003e hour (24hr format, single digit) \u003c/sub\u003e    | \u003csub\u003e 13 \u003c/sub\u003e       |\n| \u003csub\u003e '%HH' \u003c/sub\u003e          | \u003csub\u003e hour (24hr format, 2 digits) \u003c/sub\u003e        | \u003csub\u003e 13 \u003c/sub\u003e       |\n| \u003csub\u003e '%M' \u003c/sub\u003e           | \u003csub\u003e minutes (single digit) \u003c/sub\u003e              | \u003csub\u003e 7 \u003c/sub\u003e        |\n| \u003csub\u003e '%MM' \u003c/sub\u003e          | \u003csub\u003e minutes (2 digits) \u003c/sub\u003e                  | \u003csub\u003e 07 \u003c/sub\u003e       |\n| \u003csub\u003e '%S'  \u003c/sub\u003e          | \u003csub\u003e seconds (single digit) \u003c/sub\u003e              | \u003csub\u003e 8 \u003c/sub\u003e        |\n| \u003csub\u003e '%SS' \u003c/sub\u003e          | \u003csub\u003e seconds (2 digits) \u003c/sub\u003e                  | \u003csub\u003e 08 \u003c/sub\u003e       |\n| \u003csub\u003e '%P' \u003c/sub\u003e           | \u003csub\u003e time period in upper case \u003c/sub\u003e           | \u003csub\u003e AM/PM \u003c/sub\u003e    |\n| \u003csub\u003e '%p' \u003c/sub\u003e           | \u003csub\u003e time period in lower case \u003c/sub\u003e           | \u003csub\u003e am/pm \u003c/sub\u003e    |\n| \u003csub\u003e '%a' \u003c/sub\u003e           | \u003csub\u003e Day in words (short) \u003c/sub\u003e                | \u003csub\u003e Thu \u003c/sub\u003e      |\n| \u003csub\u003e '%A' \u003c/sub\u003e           | \u003csub\u003e Day in words \u003c/sub\u003e                        | \u003csub\u003e Thursday \u003c/sub\u003e |\n| \u003csub\u003e '%b' \u003c/sub\u003e           | \u003csub\u003e Month in words (short) \u003c/sub\u003e              | \u003csub\u003e Aug \u003c/sub\u003e      |\n| \u003csub\u003e '%B' \u003c/sub\u003e           | \u003csub\u003e Month in words \u003c/sub\u003e                      | \u003csub\u003e August \u003c/sub\u003e   |\n\n##### Exclude Timepicker\nHides the timepicker.\n```ruby\nf.input :column_name, as: :datetimepicker, datetimepicker_options: { only_datepicker: true }\n```\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n## Customize CSS\nTo change the major colors, you can use the following SASS variables:\n\n|Variable Name                              |Default Value  | Description   |\n|:------------------------------------------|:--------------|:--------------|\n|$date-n-time-picker-primary-color          |![#339AF0](https://via.placeholder.com/15/339AF0/000000?text=+) #339AF0    |Header and Hover background color  |\n|$date-n-time-picker-primary-text-color     |![#FFF](https://via.placeholder.com/15/FFF/000000?text=+) #FFF    |Header and Hover text color        |\n|$date-n-time-picker-container-color        |![#FFF](https://via.placeholder.com/15/FFF/000000?text=+) #FFF    |DatetimePicker Container Background color  |\n|$date-n-time-picker-container-text-color   |![#323537](https://via.placeholder.com/15/323537/000000?text=+) #323537    |Datetimepicker container Text Color    |\n\n**Please make sure to define these variables before importing the datetimepicker's stylesheet.**\n\nFor Example,\n\n\u003e // active_admin.scss\n\u003e\n\u003e ```\n\u003e $date-n-time-picker-primary-color: red; //make sure this comes first, before importing datetimepicker's stylesheet\n\u003e @import \"date_n_time_picker_activeadmin\"\n\u003e ```\n\u003cbr/\u003e\n\n_Note: All the CSS classes used for the datetimepicker elements can be overridden in your stylesheet. To know more, check the default stylesheet [here](https://github.com/NikhithaGraceJosh/date_n_time_picker_activeadmin/blob/master/vendor/assets/stylesheets/datetimepicker.scss)._\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n## Customise the Toggle Icon\nTo customize the toggle icon, create a .js file to store the following variables and require it before requiring datetimepicker's javascript file:\n\n|Variable Name                              |Default Value  | Description   |\n|:------------------------------------------|:--------------|:--------------|\n|toggleTimeIcon          |```\u003ci class=\"far fa-clock\"\u003e\u003c/i\u003e``` |Stores the element to be displayed as the toggle time icon  |\n|toggleCalendarIcon    |```\u003ci class=\"far fa-calendar-alt\"\u003e\u003c/i\u003e``` |Stores the element to be displayed as the toggle time icon       |\n\n\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003cimg src=\"https://user-images.githubusercontent.com/64245213/142817888-c7163a42-a203-4d82-a960-3064006f0a19.png\"\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n            \u003cimg src=\"https://user-images.githubusercontent.com/64245213/142817898-7d17427f-4637-46ef-bfee-d2e18437401e.png\"\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\nFor Example,\n\n\u003e // var.js\n\u003e \n\u003e ```\n\u003e var toggleTimeIcon = '\u003cdiv\u003eTIME\u003c/div'\n\u003e var toggleCalendarIcon = '\u003cdiv\u003eCALENDAR\u003c/div\u003e'\n\u003e ```\n\n\u003e // active_admin.js\n\u003e\n\u003e ```\n\u003e //= require var.js //make sure this comes first, before requiring datetimepicker's javascript file\n\u003e //= require date_n_time_picker_activeadmin.js\n\u003e ```\n\n**Please make sure to define these variables before requiring the datetimepicker's javascript file.**\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n## Testing\nTo run tests,\n```ruby\nRAILS_ENV=test rspec spec\n```\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n## Patches/Pull Requests\nBug reports and pull requests are welcome on GitHub at https://github.com/NikhithaGraceJosh/date_n_time_picker_activeadmin. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/NikhithaGraceJosh/date_n_time_picker_activeadmin/blob/master/CODE_OF_CONDUCT.md).\n\n1. Clone the project\n2. Checkout your own feature (or bug fix) branch from the `master` branch (git checkout -b my-new-proposed-feature)\n3. Commit the changes (git commit -m 'New Proposed feature')\n4. Push the changes to the `my-new-proposed-feature` branch (git push origin my-new-proposed-feature)\n5. Create new Pull Request\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n## Code of Conduct\nEveryone interacting in the DateNTimePickerActiveadmin project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/NikhithaGraceJosh/date_n_time_picker_activeadmin/blob/master/CODE_OF_CONDUCT.md).\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n## Copyright\nCopyright (c) 2021 Nikhitha Grace Josh. See [LICSENCE](https://github.com/NikhithaGraceJosh/date_n_time_picker_activeadmin/blob/master/LICENSE) for more details.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikhithagracejosh%2Fdate_n_time_picker_activeadmin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnikhithagracejosh%2Fdate_n_time_picker_activeadmin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikhithagracejosh%2Fdate_n_time_picker_activeadmin/lists"}