date_n_time_picker_activeadmin 0.1.3 → 0.1.4.beta1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 58981ac880ebb70742ae84e58dfecf71a3c43687ffcfb5d1ce3f08365c0582ff
-  data.tar.gz: c58832002c8d7b4a92c370ff9dbb612b0707abd11215b1320f4aff9ba15b283f
+  metadata.gz: 0c499d2c6bb5a56524c736bbab99d960870720ea632a4e11d70383ff7d9d2f0b
+  data.tar.gz: d452a4563e4295b4ea75a0149b2f3614710fd3aaf765c7cbfc8aa9c67278819b
 SHA512:
-  metadata.gz: 286952bdb19ac7cde42c576d97811fed805d0cb84ba776ce123930c291d45518567ae6bc299ebb69524ee31dfeef458c442c414fbb86b55f2e72f41880156645
-  data.tar.gz: 53d897934eacc7cb8176b54cf66c70182963a50fd93361ba02c8d877a6a66ce02e8cc85c2eea26f5a752e577f598ea4959c0b71e32fca07f57b9d579195b9cfa
+  metadata.gz: cb38de6521d5c35ab529265831567f961371e3d9fd6ebc4fb80e263856f9d4cf4eeddf908fe1e73a2e7da290f05553f436ec4da783149777b2cbb0b8f871f1fb
+  data.tar.gz: 928b7948e5a9a2ac74f0f53a7eae5ad1bff3519aaec400d6b7cb6a36018e01a1995b0294927bba3bdc6b927b6afe3b8b9fa053dda7e7492592fef57027abc948

data/README.md

@@ -30,6 +30,33 @@ Or install it yourself as:
 
 <br/><br/>
 
+## ActiveAdmin 4 Beta Support
+
+This branch/version targets [ActiveAdmin 4's beta releases](https://github.com/activeadmin/activeadmin) (`>= 4.0.0.beta1, < 5`), which are not yet stable on RubyGems. Install with:
+
+```ruby
+gem 'activeadmin', '>= 4.0.0.beta1', '< 5'
+gem 'date_n_time_picker_activeadmin', '>= 0.1.4.beta1'
+```
+
+ActiveAdmin 4 replaced its Sprockets/Sass stylesheet and jQuery-based JS with a Tailwind CSS + importmap-rails setup, and no longer ships an `active_admin.scss`/`active_admin.js` you can `@import`/`//= require` into. As of this release, this gem's own assets are jQuery-free vanilla JS, but are still delivered via Sprockets (not Tailwind's CLI build, which doesn't compile Sass). To wire them into an ActiveAdmin 4 app:
+
+1. Keep (or add) a Sprockets Sass compiler in your host app, e.g. `gem 'dartsass-sprockets'`, since ActiveAdmin 4 apps typically no longer include one.
+2. Add explicit `link` entries to `app/assets/config/manifest.js` so Sprockets precompiles the gem's assets, since they live outside `app/assets`:
+   ```
+   //= link date_n_time_picker_activeadmin.css
+   //= link date_n_time_picker_activeadmin.js
+   ```
+3. Override `app/views/active_admin/_html_head.html.erb` (copy it from the `activeadmin` gem, or run `rails g active_admin:views html_head`) and add:
+   ```erb
+   <%= stylesheet_link_tag "date_n_time_picker_activeadmin" %>
+   <%= javascript_include_tag "date_n_time_picker_activeadmin" %>
+   ```
+
+See `test_app/blog` on this branch for a complete working example.
+
+<br/><br/>
+
 ## Usage
 
 Code Sample
@@ -38,19 +65,21 @@ Code Sample
 f.input :column_name, as: :datetimepicker
 ```
 
-CSS
+CSS (ActiveAdmin 3, or any Sprockets/Sass stylesheet)
 In active_admin.scss, add the line,
 
 ```css
 @import date_n_time_picker_activeadmin
 ```
-JS
+JS (ActiveAdmin 3, or any Sprockets JS manifest)
 In active_admin.js, add the line,
 
 ```js
 //= require date_n_time_picker_activeadmin
 ```
 
+For ActiveAdmin 4, see [ActiveAdmin 4 Beta Support](#activeadmin-4-beta-support) above.
+
 <br/><br/>
 
 ## Customisations

data/lib/date_n_time_picker_activeadmin/version.rb

@@ -1,3 +1,3 @@
 module DateNTimePickerActiveadmin
-  VERSION = "0.1.3"
+  VERSION = "0.1.4.beta1"
 end

data/vendor/assets/javascripts/datetimepicker-object.js

@@ -2,6 +2,15 @@
 var toggleTimeIcon = toggleTimeIcon || '<i class="far fa-clock"></i>'
 var toggleCalendarIcon = toggleCalendarIcon || '<i class="far fa-calendar-alt"></i>'
 
+function delegate(root, eventType, selector, handler) {
+    root.addEventListener(eventType, function (e) {
+        let target = e.target.closest(selector)
+        if (target && root.contains(target)) {
+            handler(e, target)
+        }
+    })
+}
+
 function myDate() {
     this.date = null;
     this.month = null;
@@ -36,8 +45,8 @@ function Datetimepicker(element) {
                         </div>
                     </div>`
         }
-        $(this.dateInputElement).after(html)
-        this.widget = $(this.dateInputElement).next()
+        this.dateInputElement.insertAdjacentHTML('afterend', html)
+        this.widget = this.dateInputElement.nextElementSibling
 
         bindWidgetEvents.bind(this)()
         this.displayCalendar(this.viewingDate.month, this.viewingDate.year)
@@ -109,8 +118,9 @@ function Datetimepicker(element) {
                             </span>
                         </span>
                     </div>`
-        $('.datetimepicker-container .header').attr('class', 'header datepicker')
-        $('.datetimepicker-container .header.datepicker').html(html)
+        let header = this.widget.querySelector('.header')
+        header.className = 'header datepicker'
+        header.innerHTML = html
     }
 
     this.fillBodyCalendar = function (month, year, day, total_days, min_date, max_date) {
@@ -118,7 +128,7 @@ function Datetimepicker(element) {
         let html = `<table>
                         <thead>
                             <tr>`
-        $.each(DAYS, function (index, value) {
+        DAYS.forEach(function (value) {
             html += `<th> ${value} </th>`
         })
         html += `   </tr>
@@ -170,8 +180,9 @@ function Datetimepicker(element) {
             i++
         }
         html += `</tr></tbody></table>`
-        $('.datetimepicker-container .body').attr('class', 'body datepicker')
-        $('.datetimepicker-container .body.datepicker').html(html)
+        let body = this.widget.querySelector('.body')
+        body.className = 'body datepicker'
+        body.innerHTML = html
     }
 
     this.displayMonthPicker = function () {
@@ -180,18 +191,18 @@ function Datetimepicker(element) {
     }
 
     this.fillHeaderMonthPicker = function () {
-        $('.datetimepicker-container .header').attr('class', 'header monthpicker')
-        $('.datetimepicker-container .header.monthpicker').html(`<span> Select Month</span>`)
+        this.widget.querySelector('.header').className = 'header monthpicker'
+        this.widget.querySelector('.header.monthpicker').innerHTML = `<span> Select Month</span>`
     }
 
     this.fillBodyMonthPicker = function () {
-        $('.datetimepicker-container .body').attr('class', 'body monthpicker')
+        this.widget.querySelector('.body').className = 'body monthpicker'
         let html = `<div class="month-container">`
-        $.map(MONTHS, function (value, index) {
+        MONTHS.forEach(function (value, index) {
             html += `<div class="${index}">${value}</div>`
         })
         html += `</div> `
-        $('.datetimepicker-container .body.monthpicker').html(html);
+        this.widget.querySelector('.body.monthpicker').innerHTML = html
     }
 
     this.displayYearPicker = function () {
@@ -202,7 +213,7 @@ function Datetimepicker(element) {
     }
 
     this.displayNextDozenYears = function () {
-        let current_end_year = $('.datetimepicker-container .header.yearpicker .current-dozen .end-year').text()
+        let current_end_year = this.widget.querySelector('.header.yearpicker .current-dozen .end-year').textContent
         let next_start_year = parseInt(current_end_year) + 1
         let next_end_year = parseInt(current_end_year) + 12
         this.fillHeaderYearPicker(next_start_year, next_end_year)
@@ -210,7 +221,7 @@ function Datetimepicker(element) {
     }
 
     this.displayPreviousDozenYears = function () {
-        let current_start_year = $('.datetimepicker-container .header.yearpicker .current-dozen .start-year').text()
+        let current_start_year = this.widget.querySelector('.header.yearpicker .current-dozen .start-year').textContent
         let previous_start_year = parseInt(current_start_year) - 12
         let previous_end_year = parseInt(current_start_year) - 1
         this.fillHeaderYearPicker(previous_start_year, previous_end_year)
@@ -218,7 +229,7 @@ function Datetimepicker(element) {
     }
 
     this.fillHeaderYearPicker = function (start_year, end_year) {
-        $('.datetimepicker-container .header').attr('class', 'header yearpicker')
+        this.widget.querySelector('.header').className = 'header yearpicker'
         let html = `<span class="previous-dozen-years">
                     <i class="fa fa-chevron-left"></i>
                 </span >
@@ -228,11 +239,11 @@ function Datetimepicker(element) {
                 <span class="next-dozen-years">
                     <i class="fa fa-chevron-right"></i>
                 </span>`
-        $('.datetimepicker-container .header.yearpicker').html(html)
+        this.widget.querySelector('.header.yearpicker').innerHTML = html
     }
 
     this.fillBodyYearPicker = function (start_year, end_year) {
-        $('.datetimepicker-container .body').attr('class', 'body yearpicker')
+        this.widget.querySelector('.body').className = 'body yearpicker'
         let html = `<div class="year-container"> `
 
         for (i = start_year; i <= end_year; i++) {
@@ -244,11 +255,11 @@ function Datetimepicker(element) {
             }
         }
         html += `</div>`
-        $('.datetimepicker-container .body.yearpicker').html(html);
+        this.widget.querySelector('.body.yearpicker').innerHTML = html
     }
 
     this.toggleDateTimePickers = function () {
-        if ($('.datetimepicker-container .footer .toggle').hasClass("time")) {
+        if (this.widget.querySelector('.footer .toggle').classList.contains('time')) {
             //display timepicker
             this.displayTimePicker()
 
@@ -265,12 +276,14 @@ function Datetimepicker(element) {
     }
 
     this.toggleFooterIcon = function () {
-        if($('.datetimepicker-container .footer .toggle').hasClass('time')){
-            $('.datetimepicker-container .footer .toggle').children().first().replaceWith(toggleCalendarIcon)
+        let toggle = this.widget.querySelector('.footer .toggle')
+        if (toggle.classList.contains('time')) {
+            toggle.firstElementChild.outerHTML = toggleCalendarIcon
         } else {
-            $('.datetimepicker-container .footer .toggle').children().first().replaceWith(toggleTimeIcon)
+            toggle.firstElementChild.outerHTML = toggleTimeIcon
         }
-        $('.datetimepicker-container .footer .toggle').toggleClass("time date")
+        toggle.classList.toggle('time')
+        toggle.classList.toggle('date')
     }
 
     this.displayTimePicker = function () {
@@ -279,8 +292,8 @@ function Datetimepicker(element) {
     }
 
     this.fillHeaderTimePicker = function () {
-        $('.datetimepicker-container .header').attr('class', 'header timepicker')
-        $('.datetimepicker-container .header.timepicker').html(`<span> Select Time</span> `)
+        this.widget.querySelector('.header').className = 'header timepicker'
+        this.widget.querySelector('.header.timepicker').innerHTML = `<span> Select Time</span> `
     }
 
     this.fillBodyTimePicker = function () {
@@ -302,8 +315,8 @@ function Datetimepicker(element) {
             ${this.finalTime.period}
         </div
                 </div> `
-        $('.datetimepicker-container .body').attr('class', 'body timepicker')
-        $('.datetimepicker-container .body.timepicker').html(html);
+        this.widget.querySelector('.body').className = 'body timepicker'
+        this.widget.querySelector('.body.timepicker').innerHTML = html
     }
 
     this.displayHourPicker = function () {
@@ -312,18 +325,18 @@ function Datetimepicker(element) {
     }
 
     this.fillHeaderHourPicker = function () {
-        $('.datetimepicker-container .header').attr('class', 'header hourpicker')
-        $('.datetimepicker-container .header.hourpicker').html(`<span> Select Hour</span>`)
+        this.widget.querySelector('.header').className = 'header hourpicker'
+        this.widget.querySelector('.header.hourpicker').innerHTML = `<span> Select Hour</span>`
     }
 
     this.fillBodyHourPicker = function () {
-        $('.datetimepicker-container .body').attr('class', 'body hourpicker')
+        this.widget.querySelector('.body').className = 'body hourpicker'
         let html = `<div class="hour-container">`
         for (i = 1; i <= 12; i++) {
             html += `<div>${i}</div>`
         }
         html += `</div>`
-        $('.datetimepicker-container .body.hourpicker').html(html);
+        this.widget.querySelector('.body.hourpicker').innerHTML = html
     }
 
     this.displayMinutePicker = function () {
@@ -332,18 +345,18 @@ function Datetimepicker(element) {
     }
 
     this.fillHeaderMinutePicker = function () {
-        $('.datetimepicker-container .header').attr('class', 'header minutepicker')
-        $('.datetimepicker-container .header.hourpicker').html(`<span> Select Minute</span> `)
+        this.widget.querySelector('.header').className = 'header minutepicker'
+        this.widget.querySelector('.header.minutepicker').innerHTML = `<span> Select Minute</span> `
     }
 
     this.fillBodyMinutePicker = function () {
-        $('.datetimepicker-container .body').attr('class', 'body minutepicker')
+        this.widget.querySelector('.body').className = 'body minutepicker'
         let html = `<div class="minute-container"> `
         for (i = 0; i <= 59; i += 5) {
             html += `<div>${i}</div> `
         }
         html += `</div>`
-        $('.datetimepicker-container .body.minutepicker').html(html);
+        this.widget.querySelector('.body.minutepicker').innerHTML = html
     }
 }
 
@@ -421,24 +434,24 @@ function formatDateTime(jsDateObject, dateObject, timeObject, format) {
 }
 
 function bindWidgetEvents() {
-    this.widget.on('click', '.header.datepicker .select-month', function () {
+    delegate(this.widget, 'click', '.header.datepicker .select-month', function (e, target) {
         //display month picker
         this.displayMonthPicker();
-        $('.datetimepicker-container .footer').hide()
+        this.widget.querySelector('.footer').style.display = 'none'
     }.bind(this))
-    this.widget.on('click', '.body.monthpicker .month-container div', function (e) {
-        this.viewingDate.month = parseInt($(e.currentTarget)[0].className)
+    delegate(this.widget, 'click', '.body.monthpicker .month-container div', function (e, target) {
+        this.viewingDate.month = parseInt(target.className)
         // display calendar
         this.displayCalendar(this.viewingDate.month, this.viewingDate.year)
         //show footer
-        $('.datetimepicker-container .footer').show()
+        this.widget.querySelector('.footer').style.display = ''
     }.bind(this))
-    this.widget.on('click', '.header.datepicker .previous-month', function () {
-        let current_month = $('.datetimepicker-container .header.datepicker .select-month span')[0].className
+    delegate(this.widget, 'click', '.header.datepicker .previous-month', function (e, target) {
+        let current_month = this.widget.querySelector('.header.datepicker .select-month span').className
         // get the previous value of current month
         if (current_month == 0) {
             this.viewingDate.month = 11
-            this.viewingDate.year = parseInt($('.select-year').text()) - 1
+            this.viewingDate.year = parseInt(this.widget.querySelector('.select-year').textContent) - 1
         }
         else {
             this.viewingDate.month = current_month - 1
@@ -446,12 +459,12 @@ function bindWidgetEvents() {
         // display calendar
         this.displayCalendar(this.viewingDate.month, this.viewingDate.year)
     }.bind(this))
-    this.widget.on('click', '.header.datepicker .next-month', function () {
-        let current_month = $('.datetimepicker-container .header.datepicker .select-month span')[0].className
+    delegate(this.widget, 'click', '.header.datepicker .next-month', function (e, target) {
+        let current_month = this.widget.querySelector('.header.datepicker .select-month span').className
         // get the next value of current month
         if (current_month == 11) {
             this.viewingDate.month = 0
-            this.viewingDate.year = parseInt($('.select-year').text()) + 1
+            this.viewingDate.year = parseInt(this.widget.querySelector('.select-year').textContent) + 1
         } else {
             this.viewingDate.month = parseInt(current_month) + 1
         }
@@ -459,142 +472,144 @@ function bindWidgetEvents() {
         // display calendar
         this.displayCalendar(this.viewingDate.month, this.viewingDate.year)
     }.bind(this))
-    this.widget.on('click', '.header.datepicker .next-year', function () {
-        let year = $('.datetimepicker-container .header.datepicker .select-year').text()
+    delegate(this.widget, 'click', '.header.datepicker .next-year', function (e, target) {
+        let year = this.widget.querySelector('.header.datepicker .select-year').textContent
         this.viewingDate.year = parseInt(year) + 1
 
         // display calendar
         this.displayCalendar(this.viewingDate.month, this.viewingDate.year)
     }.bind(this))
-    this.widget.on('click', '.header.datepicker .previous-year', function () {
-        let year = $('.datetimepicker-container .header.datepicker .select-year').text()
+    delegate(this.widget, 'click', '.header.datepicker .previous-year', function (e, target) {
+        let year = this.widget.querySelector('.header.datepicker .select-year').textContent
         this.viewingDate.year = parseInt(year) - 1
 
         // display calendar
         this.displayCalendar(this.viewingDate.month, this.viewingDate.year)
     }.bind(this))
-    this.widget.on('click', '.header.datepicker .select-year', function () {
+    delegate(this.widget, 'click', '.header.datepicker .select-year', function (e, target) {
 
         // display year picker
         this.displayYearPicker()
 
         //hide footer
-        $('.datetimepicker-container .footer').hide()
+        this.widget.querySelector('.footer').style.display = 'none'
     }.bind(this))
-    this.widget.on('click', '.body.yearpicker .year-container div', function (e) {
+    delegate(this.widget, 'click', '.body.yearpicker .year-container div', function (e, target) {
         //selected year
-        this.viewingDate.year = $(e.currentTarget).text()
+        this.viewingDate.year = target.textContent
 
         //display calendar
         this.displayCalendar(this.viewingDate.month, this.viewingDate.year)
 
         //show footer
-        $('.datetimepicker-container .footer').show()
+        this.widget.querySelector('.footer').style.display = ''
     }.bind(this))
-    this.widget.on('click', '.header.yearpicker .previous-dozen-years', function () {
+    delegate(this.widget, 'click', '.header.yearpicker .previous-dozen-years', function (e, target) {
         this.displayPreviousDozenYears()
     }.bind(this))
-    this.widget.on('click', '.header.yearpicker .next-dozen-years', function () {
+    delegate(this.widget, 'click', '.header.yearpicker .next-dozen-years', function (e, target) {
         this.displayNextDozenYears()
     }.bind(this))
-    this.widget.on('click', '.footer .toggle', function () {
+    delegate(this.widget, 'click', '.footer .toggle', function (e, target) {
         this.toggleDateTimePickers()
     }.bind(this))
-    this.widget.on('click', '.body.timepicker .time-container .hour', function (e) {
-        this.finalTime.hour = $(e.currentTarget).val()
+    delegate(this.widget, 'click', '.body.timepicker .time-container .hour', function (e, target) {
+        this.finalTime.hour = target.value
     }.bind(this))
-    this.widget.on('click', '.body.timepicker .time-container .minute', function (e) {
-        this.finalTime.minute = $(e.currentTarget).val()
+    delegate(this.widget, 'click', '.body.timepicker .time-container .minute', function (e, target) {
+        this.finalTime.minute = target.value
     }.bind(this))
-    this.widget.on('click', '.body.timepicker .time-container .hour-container .previous-hour', function () {
+    delegate(this.widget, 'click', '.body.timepicker .time-container .hour-container .previous-hour', function (e, target) {
         if (this.finalTime.hour == 0) {
             this.finalTime.hour = 12
         } else {
             this.finalTime.hour = this.finalTime.hour - 1
         }
-        $('.datetimepicker-container .body.timepicker .time-container .hour').text(this.finalTime.hour)
+        this.widget.querySelector('.body.timepicker .time-container .hour').textContent = this.finalTime.hour
     }.bind(this))
-    this.widget.on('click', '.body.timepicker .time-container .hour-container .next-hour', function () {
+    delegate(this.widget, 'click', '.body.timepicker .time-container .hour-container .next-hour', function (e, target) {
         if (this.finalTime.hour == 12) {
             this.finalTime.hour = 0
         } else {
             this.finalTime.hour = parseInt(this.finalTime.hour) + 1
         }
-        $('.datetimepicker-container .body.timepicker .time-container .hour').text(this.finalTime.hour)
+        this.widget.querySelector('.body.timepicker .time-container .hour').textContent = this.finalTime.hour
     }.bind(this))
-    this.widget.on('click', '.body.timepicker .time-container .minute-container .previous-minute', function () {
+    delegate(this.widget, 'click', '.body.timepicker .time-container .minute-container .previous-minute', function (e, target) {
         if (this.finalTime.minute == 0) {
             this.finalTime.minute = 60
         } else {
             this.finalTime.minute = this.finalTime.minute - 1
         }
-        $('.datetimepicker-container .body.timepicker .time-container .minute').text(this.finalTime.minute)
+        this.widget.querySelector('.body.timepicker .time-container .minute').textContent = this.finalTime.minute
     }.bind(this))
-    this.widget.on('click', '.body.timepicker .time-container .minute-container .next-minute', function () {
+    delegate(this.widget, 'click', '.body.timepicker .time-container .minute-container .next-minute', function (e, target) {
         if (this.finalTime.minute == 60) {
             this.finalTime.minute = 0
         } else {
             this.finalTime.minute = parseInt(this.finalTime.minute) + 1
         }
-        $('.datetimepicker-container .body.timepicker .time-container .minute').text(this.finalTime.minute)
+        this.widget.querySelector('.body.timepicker .time-container .minute').textContent = this.finalTime.minute
     }.bind(this))
-    this.widget.on('click', '.body.timepicker .time-container .hour', function () {
+    delegate(this.widget, 'click', '.body.timepicker .time-container .hour', function (e, target) {
         this.displayHourPicker()
-        $('.datetimepicker-container .footer').hide()
+        this.widget.querySelector('.footer').style.display = 'none'
     }.bind(this))
-    this.widget.on('click', '.body.timepicker .time-container .minute', function () {
+    delegate(this.widget, 'click', '.body.timepicker .time-container .minute', function (e, target) {
         this.displayMinutePicker()
-        $('.datetimepicker-container .footer').hide()
+        this.widget.querySelector('.footer').style.display = 'none'
     }.bind(this))
-    this.widget.on('click', '.body.hourpicker .hour-container div', function (e) {
+    delegate(this.widget, 'click', '.body.hourpicker .hour-container div', function (e, target) {
         //save the selected month value
-        this.finalTime.hour = $(e.currentTarget).text()
+        this.finalTime.hour = target.textContent
         this.updateDateObject()
 
         // display calendar
         this.displayTimePicker()
 
         //show footer
-        $('.datetimepicker-container .footer').show()
+        this.widget.querySelector('.footer').style.display = ''
     }.bind(this))
-    this.widget.on('click', '.body.minutepicker .minute-container div', function (e) {
+    delegate(this.widget, 'click', '.body.minutepicker .minute-container div', function (e, target) {
         //save the selected month value
-        this.finalTime.minute = $(e.currentTarget).text()
+        this.finalTime.minute = target.textContent
         this.updateDateObject()
 
         // display calendar
         this.displayTimePicker()
 
         //show footer
-        $('.datetimepicker-container .footer').show()
+        this.widget.querySelector('.footer').style.display = ''
     }.bind(this))
-    this.widget.on('click', '.body.timepicker .toggle-am-pm', function () {
+    delegate(this.widget, 'click', '.body.timepicker .toggle-am-pm', function (e, target) {
         //save the selected month value
         if (this.finalTime.period == "AM") {
             this.finalTime.period = "PM"
-            $('.datetimepicker-container .body.timepicker .toggle-am-pm').text("PM")
+            this.widget.querySelector('.body.timepicker .toggle-am-pm').textContent = "PM"
         } else {
             this.finalTime.period = "AM"
-            $('.datetimepicker-container .body.timepicker .toggle-am-pm').text("AM")
+            this.widget.querySelector('.body.timepicker .toggle-am-pm').textContent = "AM"
         }
         this.updateDateObject()
         // display calendar
         // this.displayTimePicker()
 
         //show footer
-        // $('.datetimepicker-container .footer').show()
+        // this.widget.querySelector('.footer').style.display = ''
     }.bind(this))
-    this.widget.on('click', '.body.datepicker table td:not(.disabled)', function (e) {
+    delegate(this.widget, 'click', '.body.datepicker table td:not(.disabled)', function (e, target) {
 
         // add and remove class (for the design)
-        $('.datetimepicker-container .body.datepicker table td').removeClass('selected')
-        $(e.currentTarget).addClass('selected')
+        this.widget.querySelectorAll('.body.datepicker table td').forEach(function (td) {
+            td.classList.remove('selected')
+        })
+        target.classList.add('selected')
 
         // let min_date = new Date(datetimepicker_options['min_date'])
         // let max_date = new Date(datetimepicker_options['max_date'])
 
         // save selected date
-        this.finalDate.date = $(e.currentTarget).text()
+        this.finalDate.date = target.textContent
         this.finalDate.year = this.viewingDate.year
         this.finalDate.month = this.viewingDate.month
 
@@ -607,7 +622,7 @@ function bindWidgetEvents() {
             hr24 = this.finalTime.hour
         else
             hr24 = parseInt(this.finalTime.hour) + 12
-        
+
         this.dateObject = new Date(this.finalDate.year, this.finalDate.month, this.finalDate.date, hr24, this.finalTime.minute )
     }.bind(this)
 }

data/vendor/assets/javascripts/datetimepicker.js

@@ -1,4 +1,4 @@
-//= require datetimepicker-object 
+//= require datetimepicker-object
 
 let default_options = {
     'min_date': -1,
@@ -8,12 +8,12 @@ let default_options = {
 };
 let datetimepicker_active_objects = [];
 
-$(function () {
+function initDatetimepickers() {
     // Initialising datetimepicker objects
     // Saving them to an array
-    $.map($('.ui-datetime-picker-wrapper > .ui-datetime-picker-input'), function (d, index) {
-        let obj = new Datetimepicker($(d));
-        if ($(d).val() == "") {
+    document.querySelectorAll('.ui-datetime-picker-wrapper > .ui-datetime-picker-input').forEach(function (d) {
+        let obj = new Datetimepicker(d);
+        if (d.value == "") {
             obj.dateObject = new Date()
             obj.viewingDate.date = -1;
             obj.viewingDate.month = obj.dateObject.getMonth()
@@ -24,17 +24,16 @@ $(function () {
             obj.finalTime.minute = obj.dateObject.getMinutes()
             obj.finalTime.period = time[1]
 
-
             // display date according to format specified
-            if ($(d)[0].hasAttribute('datetimepicker_options')) {
-                let options = $(d).attr('datetimepicker_options')
-                obj.datetimepicker_options = { ...default_options, ...($.parseJSON(options)) }
+            if (d.hasAttribute('datetimepicker_options')) {
+                let options = d.getAttribute('datetimepicker_options')
+                obj.datetimepicker_options = { ...default_options, ...JSON.parse(options) }
             } else {
                 obj.datetimepicker_options = default_options
             }
 
         } else {
-            let val = $(d).val()
+            let val = d.value
 
             // for firefox browser
             val = val.replace(' UTC', '')
@@ -50,33 +49,41 @@ $(function () {
             obj.finalTime.minute = obj.dateObject.getMinutes()
             obj.finalTime.period = time[1]
 
-
             // display date according to format specified
-            let options = $(d).attr('datetimepicker_options')
+            let options = d.getAttribute('datetimepicker_options')
 
-            obj.datetimepicker_options = { ...default_options, ...($.parseJSON(options)) }
+            obj.datetimepicker_options = { ...default_options, ...JSON.parse(options) }
 
             let formatted_date = formatDateTime(obj.dateObject, obj.viewingDate, obj.finalTime, obj.datetimepicker_options["format"])
-            $(d).val(formatted_date)
+            d.value = formatted_date
         }
 
-        d.addEventListener('click', function(){
+        d.addEventListener('click', function () {
             obj.initDateTimePicker.bind(obj)()
             datetimepicker_active_objects.push(obj)
         })
     })
-})
-
-$(document)[0].addEventListener('click', function (e) {
-    if(datetimepicker_active_objects.length > 0){
-        if (($('.ui-datetime-picker-wrapper').find($(e.target)).length == 0) || ($(e.target).hasClass('ui-datetime-picker-input'))){
+}
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initDatetimepickers)
+} else {
+    initDatetimepickers()
+}
+
+document.addEventListener('click', function (e) {
+    if (datetimepicker_active_objects.length > 0) {
+        let clicked_inside_wrapper = e.target.closest('.ui-datetime-picker-wrapper') != null
+        if ((!clicked_inside_wrapper) || (e.target.classList.contains('ui-datetime-picker-input'))) {
             let obj_to_remove = datetimepicker_active_objects.shift()
             // set value of input field with selected date
             if ((!(obj_to_remove.finalDate.date == null))) {
-                formatted_date = formatDateTime(obj_to_remove.dateObject, obj_to_remove.finalDate, obj_to_remove.finalTime, obj_to_remove.datetimepicker_options["format"])
-                $(obj_to_remove.dateInputElement).val(formatted_date)
+                let formatted_date = formatDateTime(obj_to_remove.dateObject, obj_to_remove.finalDate, obj_to_remove.finalTime, obj_to_remove.datetimepicker_options["format"])
+                obj_to_remove.dateInputElement.value = formatted_date
+            }
+            if (obj_to_remove.widget) {
+                obj_to_remove.widget.remove()
             }
-            $(obj_to_remove.dateInputElement).next().remove()
         }
     }
-}, true)
+}, true)

data/vendor/assets/stylesheets/datetimepicker.scss

@@ -4,7 +4,7 @@
     width: 277px;
     z-index: 2000;
     position: absolute;
-    margin-left: 20%;
+    margin-left: 1%;
     margin-top: 5px;
     border: 1px solid grey;
     justify-content: center;
@@ -33,6 +33,9 @@
     }
 
     .body.datepicker{
+        table{
+            width: 100%;
+        }
         table thead{
             th{
                 background: $date-n-time-picker-container-color;
@@ -43,7 +46,7 @@
             text-align: center;
             &:hover{
                 cursor: pointer;
-                &:not(.selected){
+                &:not(.selected):not(.disabled){
                     background-color: $date-n-time-picker-primary-color;
                     opacity: 0.5;
                     color: $date-n-time-picker-primary-text-color;
@@ -57,6 +60,13 @@
                 border-radius: 5px;
                 font-weight: bold;
             }
+            &.disabled{
+                color: darkgrey;
+                cursor: not-allowed;
+                &:hover{
+                    cursor: not-allowed;
+                }
+            }
         }
         th, td, caption {
             padding: 4px 2px 4px 2px;

metadata

@@ -1,14 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: date_n_time_picker_activeadmin
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4.beta1
 platform: ruby
 authors:
 - Nikhitha Grace Josh
-autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-02-10 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: font-awesome-sass
@@ -34,23 +33,22 @@ dependencies:
   name: activeadmin
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.2'
     - - ">="
       - !ruby/object:Gem::Version
-        version: 3.2.5
+        version: 4.0.0.beta1
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.2'
     - - ">="
       - !ruby/object:Gem::Version
-        version: 3.2.5
-description:
+        version: 4.0.0.beta1
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5'
 email:
 - josh.nikhitha@gmail.com
 executables: []
@@ -77,7 +75,6 @@ metadata:
   homepage_uri: https://github.com/NikhithaGraceJosh/date_n_time_picker_activeadmin
   source_code_uri: https://github.com/NikhithaGraceJosh/date_n_time_picker_activeadmin
   bug_tracker_uri: https://github.com/NikhithaGraceJosh/date_n_time_picker_activeadmin/issues
-post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -92,8 +89,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.1
-signing_key:
+rubygems_version: 4.0.16
 specification_version: 4
 summary: Datetime Picker for Activeadmin
 test_files: []