Repository files navigation

A datetimepicker, tailored forActiveAdmin.

Add this line to your application's Gemfile:

gem'date_n_time_picker_activeadmin'

And then execute:

$ bundle install

Or install it yourself as:

$ gem install date_n_time_picker_activeadmin

Code Sample

f.input:column_name,as::datetimepicker

CSSIn active_admin.scss, add the line,

@import date_n_time_picker_activeadmin

JSIn active_admin.js, add the line,

//= require date_n_time_picker_activeadmin

Disables all dates before the specified minimum date.

f.input:column_name,as::datetimepicker,datetimepicker_options:{min_date:Date.today}

Disables all dates after the specified minimum date.

f.input:column_name,as::datetimepicker,datetimepicker_options:{max_date:Date.today}

Displays selected datetime in the specified format.

f.input:column_name,as::datetimepicker,datetimepicker_options:{format:"%mm-%dd-%yyyy %HH:%MM:%SS %P"}

_{Consider selected date is09 August 2021, 05:07:08 pm, then format would be%dd %B %yyyy, %hh:%MM:%SS %p}

Hides the timepicker.

f.input:column_name,as::datetimepicker,datetimepicker_options:{only_datepicker:true}

To change the major colors, you can use the following SASS variables:

Variable Name	Default Value	Description
$date-n-time-picker-primary-color	#339AF0	Header and Hover background color
$date-n-time-picker-primary-text-color	#FFF	Header and Hover text color
$date-n-time-picker-container-color	#FFF	DatetimePicker Container Background color
$date-n-time-picker-container-text-color	#323537	Datetimepicker container Text Color

Please make sure to define these variables before importing the datetimepicker's stylesheet.

For Example,

// active_admin.scss

$date-n-time-picker-primary-color: red; //make sure this comes first, before importing datetimepicker's stylesheet@import "date_n_time_picker_activeadmin"

Note: All the CSS classes used for the datetimepicker elements can be overridden in your stylesheet. To know more, check the default stylesheethere.

To customize the toggle icon, create a .js file to store the following variables and require it before requiring datetimepicker's javascript file:

For Example,

// var.js

var toggleTimeIcon = '<div>TIME</div'var toggleCalendarIcon = '<div>CALENDAR</div>'

// active_admin.js

//= require var.js //make sure this comes first, before requiring datetimepicker's javascript file//= require date_n_time_picker_activeadmin.js

Please make sure to define these variables before requiring the datetimepicker's javascript file.

To run tests,

RAILS_ENV=testrspecspec

Bug reports and pull requests are welcome on GitHub athttps://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 thecode of conduct.

1. Clone the project
2. Checkout your own feature (or bug fix) branch from themaster branch (git checkout -b my-new-proposed-feature)
3. Commit the changes (git commit -m 'New Proposed feature')
4. Push the changes to themy-new-proposed-feature branch (git push origin my-new-proposed-feature)
5. Create new Pull Request

Everyone interacting in the DateNTimePickerActiveadmin project's codebases, issue trackers, chat rooms and mailing lists is expected to follow thecode of conduct.

Copyright (c) 2021 Nikhitha Grace Josh. SeeLICSENCE for more details.