diff --git a/app/assets/javascripts/alchemy/admin.js b/app/assets/javascripts/alchemy/admin.js index 567713c148..8987ff94f0 100644 --- a/app/assets/javascripts/alchemy/admin.js +++ b/app/assets/javascripts/alchemy/admin.js @@ -9,6 +9,7 @@ //= require jquery-ui/widgets/tabs //= require tinymce/tinymce.min //= require_tree ../../../../vendor/assets/javascripts/jquery_plugins/ +//= require flatpickr/flatpickr.min //= require clipboard.min //= require keymaster //= require requestAnimationFrame diff --git a/app/assets/javascripts/alchemy/alchemy.datepicker.js.coffee b/app/assets/javascripts/alchemy/alchemy.datepicker.js.coffee index 73882e4dff..a62e1f3a46 100644 --- a/app/assets/javascripts/alchemy/alchemy.datepicker.js.coffee +++ b/app/assets/javascripts/alchemy/alchemy.datepicker.js.coffee @@ -3,7 +3,6 @@ window.Alchemy = {} if typeof(window.Alchemy) is 'undefined' $.extend Alchemy, Datepicker: (scope) -> - $.datetimepicker.setLocale(Alchemy.locale); $datepicker_inputs = $('input[data-datepicker-type]', scope) # Initializes the datepickers on the text inputs and sets the proper type @@ -15,13 +14,16 @@ $.extend Alchemy, $datepicker_inputs.each -> type = $(this).data('datepicker-type') options = - scrollInput: false - format: Alchemy.t("formats.#{type}") - timepicker: /time/.test(type) - datepicker: /date/.test(type) - dayOfWeekStart: Alchemy.t('formats.start_of_week') - onSelectDate: -> - Alchemy.setElementDirty $(this).closest(".element-editor") - $(this).datetimepicker(options) + # alchemy_i18n supports `zh_CN` etc., but flatpickr only has two-letter codes (`zh`) + locale: Alchemy.locale.slice(0, 2) + altInput: true + altFormat: Alchemy.t("formats.#{type}") + altInputClass: "" + enableTime: /time/.test(type) + noCalendar: type == "time" + time_24hr: Alchemy.t("formats.time_24hr") + onValueUpdate: (_selectedDates, _dateStr, instance) -> + Alchemy.setElementDirty $(instance.element).closest(".element-editor") + $(this).flatpickr(options) return diff --git a/app/assets/javascripts/alchemy/alchemy.sitemap.js.coffee b/app/assets/javascripts/alchemy/alchemy.sitemap.js.coffee index 731439b298..1e1e461241 100644 --- a/app/assets/javascripts/alchemy/alchemy.sitemap.js.coffee +++ b/app/assets/javascripts/alchemy/alchemy.sitemap.js.coffee @@ -1,5 +1,3 @@ -#= require date-formatter - window.Alchemy = {} if typeof(window.Alchemy) is 'undefined' # The admin sitemap Alchemy module @@ -111,7 +109,7 @@ Alchemy.Sitemap = now = new Date() if $checkbox.is(':checked') $publication_date_fields.removeClass('hidden') - $public_on_field.val Date.format(now, format) + $public_on_field[0]._flatpickr.setDate(now) else $publication_date_fields.addClass('hidden') $public_on_field.val('') diff --git a/app/assets/javascripts/alchemy/alchemy.translations.js.coffee b/app/assets/javascripts/alchemy/alchemy.translations.js.coffee index f90bc961e8..57e2f84d49 100644 --- a/app/assets/javascripts/alchemy/alchemy.translations.js.coffee +++ b/app/assets/javascripts/alchemy/alchemy.translations.js.coffee @@ -26,4 +26,4 @@ Alchemy.translations = datetime: "Y-m-d H:i" date: "Y-m-d" time: "H:i" - start_of_week: 0 + time_24hr: false diff --git a/app/assets/stylesheets/alchemy/admin.scss b/app/assets/stylesheets/alchemy/admin.scss index 9c1ff425e2..a8e432c574 100644 --- a/app/assets/stylesheets/alchemy/admin.scss +++ b/app/assets/stylesheets/alchemy/admin.scss @@ -44,4 +44,4 @@ @import "alchemy/upload"; @import "alchemy/jquery-ui"; @import "jquery.Jcrop.min"; -@import "jquery.datetimepicker"; +@import "flatpickr/flatpickr.min"; diff --git a/app/assets/stylesheets/alchemy/jquery.datetimepicker.scss b/app/assets/stylesheets/alchemy/jquery.datetimepicker.scss deleted file mode 100644 index 94b2d501d9..0000000000 --- a/app/assets/stylesheets/alchemy/jquery.datetimepicker.scss +++ /dev/null @@ -1,478 +0,0 @@ -.xdsoft_datetimepicker { - box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); - background: #fff; - border-bottom: 1px solid #bbb; - border-left: 1px solid #ccc; - border-right: 1px solid #ccc; - border-top: 1px solid #ccc; - @include border-top-radius($default-border-radius); - color: $text-color; - padding: 8px; - padding-left: 0; - padding-top: 2px; - position: absolute; - z-index: 9999; - display: none; -} - -.xdsoft_datetimepicker.xdsoft_rtl { - padding: 8px 0 8px 8px; -} - -.xdsoft_datetimepicker iframe { - position: absolute; - left: 0; - top: 0; - width: 75px; - height: 210px; - background: transparent; - border: none; -} - -/*For IE8 or lower*/ -.xdsoft_datetimepicker button { - border: none !important; - box-shadow: none; -} - -.xdsoft_noselect { - user-select: none; -} - -.xdsoft_noselect::selection { background: transparent } -.xdsoft_noselect::-moz-selection { background: transparent } - -.xdsoft_datetimepicker.xdsoft_inline { - display: inline-block; - position: static; - box-shadow: none; -} - -.xdsoft_datetimepicker * { - padding: 0; - margin: 0; -} - -.xdsoft_datetimepicker .xdsoft_datepicker, -.xdsoft_datetimepicker .xdsoft_timepicker { - display: none; -} - -.xdsoft_datetimepicker .xdsoft_datepicker.active, -.xdsoft_datetimepicker .xdsoft_timepicker.active { - display: block; -} - -.xdsoft_datetimepicker .xdsoft_datepicker { - width: 230px; - float: left; - margin-left: 8px; -} - -.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_datepicker { - float: right; - margin-right: 8px; - margin-left: 0; -} - -.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_datepicker { - width: 260px; -} - -.xdsoft_datetimepicker .xdsoft_timepicker { - width: 60px; - float: left; - text-align: center; - margin-left: 8px; - margin-top: 0; -} - -.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker { - float: right; - margin-right: 8px; - margin-left: 0; -} - -.xdsoft_datetimepicker .xdsoft_mounthpicker { - position: relative; - text-align: center; -} - -.xdsoft_datetimepicker .xdsoft_label i, -.xdsoft_datetimepicker .xdsoft_prev, -.xdsoft_datetimepicker .xdsoft_next, -.xdsoft_datetimepicker .xdsoft_today_button { - background-image: none; -} - -.xdsoft_datetimepicker .xdsoft_label i { - opacity: 1; - display: inline-block; - width: 9px; - height: 20px; - vertical-align: middle; - font-family: 'Font Awesome 5 Free'; - font-size: $default-font-size; - font-style: normal; - font-weight: 900; - color: $icon-color; - text-align: center; - padding-left: $default-padding; - - &:before { - content: fa-content($fa-var-caret-down); - } -} - -.xdsoft_datetimepicker .xdsoft_prev, -.xdsoft_datetimepicker .xdsoft_next { - font-size: 1.5em; - font-weight: 900; -} - -.xdsoft_datetimepicker .xdsoft_prev { - float: left; - text-align: left; - - &:before { - content: fa-content($fa-var-caret-left); - } -} - -.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev:before { - content: fa-content($fa-var-caret-up); -} - -.xdsoft_datetimepicker .xdsoft_today_button { - float: left; - margin: 0 5px; - font-weight: 400; - - &:before { - content: fa-content($fa-var-calendar-check); - font-size: 1.25em; - } -} - -.xdsoft_datetimepicker .xdsoft_next { - float: right; - text-align: right; - - &:before { - content: fa-content($fa-var-caret-right); - } -} - -.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next:before { - content: fa-content($fa-var-caret-down); -} - -.xdsoft_datetimepicker .xdsoft_next, -.xdsoft_datetimepicker .xdsoft_prev , -.xdsoft_datetimepicker .xdsoft_today_button { - background-color: transparent; - background-repeat: no-repeat; - border: 0 none; - cursor: pointer; - display: block; - height: 30px; - opacity: 1; - outline: medium none; - overflow: hidden; - padding: 0; - position: relative; - white-space: nowrap; - width: 20px; - min-width: 0; - font-family: 'Font Awesome 5 Free'; - font-style: normal; - color: $icon-color; -} - -.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev, -.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next { - width: 100%; - text-align: center; -} - -.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_prev, -.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_next { - float: none; - margin-left: 0; - margin-right: 14px; -} - -.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev { - - &:before { - border-width: 0 8px 8px 8px; - border-color: transparent transparent $text-color; - } -} - -.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next { - - &:before { - border-width: 8px 8px 0 8px; - border-color: $text-color transparent transparent; - } -} - -.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box { - height: 151px; - overflow: hidden; - border-bottom: 1px solid #ddd; -} - -.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div { - background: #f5f5f5; - border-top: 1px solid #ddd; - color: #666; - font-size: $default-font-size; - text-align: center; - border-collapse: collapse; - cursor: pointer; - border-bottom-width: 0; - height: 25px; - line-height: 25px; -} - -.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div > div:first-child { - border-top-width: 0; -} - -.xdsoft_datetimepicker .xdsoft_today_button:hover, -.xdsoft_datetimepicker .xdsoft_next:hover, -.xdsoft_datetimepicker .xdsoft_prev:hover, -.xdsoft_datetimepicker .xdsoft_label:hover i { - opacity: 0.75; -} - -.xdsoft_datetimepicker .xdsoft_label { - display: inline; - position: relative; - z-index: 9999; - margin: 0; - padding: 5px 3px; - font-size: $default-font-size; - line-height: 20px; - font-weight: bold; - background-color: #fff; - float: left; - width: 182px; - text-align: center; - cursor: pointer; -} - -.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select { - border: 1px solid #ccc; - position: absolute; - right: 0; - top: 30px; - z-index: 101; - display: none; - background: #fff; - max-height: 160px; - overflow-y: hidden; -} - -.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_monthselect{ right: -7px } -.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_yearselect{ right: 2px } -.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover { - color: $datepicker_hover_color; - background: $datepicker_hover_bg; -} - -.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option { - padding: 2px 10px 2px 5px; - text-decoration: none !important; -} - -.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current { - background: $datepicker_current_bg; - box-shadow: $datepicker_current_box_shadow; - color: $datepicker_current_color; - font-weight: 700; -} - -.xdsoft_datetimepicker .xdsoft_month { - width: 100px; - text-align: right; -} - -.xdsoft_datetimepicker .xdsoft_calendar { - clear: both; -} - -.xdsoft_datetimepicker .xdsoft_year { - width: 52px; - margin-left: 5px; -} - -.xdsoft_datetimepicker .xdsoft_calendar table { - border-collapse: collapse; - width: 100%; -} - -.xdsoft_datetimepicker .xdsoft_calendar td > div { - padding-right: 5px; -} - -.xdsoft_datetimepicker .xdsoft_calendar th { - height: 25px; -} - -.xdsoft_datetimepicker .xdsoft_calendar td, -.xdsoft_datetimepicker .xdsoft_calendar th { - width: 14.2857142%; - background: $datepicker_day_bg; - border: $datepicker_day_border; - color: $datepicker_day_color; - font-size: $default-font-size; - text-align: right; - vertical-align: middle; - padding: 0; - border-collapse: collapse; - cursor: pointer; - height: 25px; -} - -.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar td, -.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar th { - width: 12.5%; -} - -.xdsoft_datetimepicker .xdsoft_calendar th { - background: #f1f1f1; -} - -.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today { - background: $datepicker_today_bg; - color: $datepicker_today_color; -} - -.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_default { - background: #ffe9d2; - box-shadow: #ffb871 0 1px 4px 0 inset; - color: #000; -} - -.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_mint { - background: #c1ffc9; - box-shadow: #00dd1c 0 1px 4px 0 inset; - color: #000; -} - -.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, -.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, -.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current { - background: $datepicker_current_bg; - box-shadow: $datepicker_current_box_shadow; - color: $datepicker_current_color; - font-weight: 700; -} - -.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month, -.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled, -.xdsoft_datetimepicker .xdsoft_time_box >div >div.xdsoft_disabled { - opacity: 0.5; - cursor: default; -} - -.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month.xdsoft_disabled { - opacity: 0.2; -} - -.xdsoft_datetimepicker .xdsoft_calendar td:hover, -.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div:hover { - color: $datepicker_hover_color !important; - background: $datepicker_hover_bg !important; - box-shadow: none !important; -} - -.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current.xdsoft_disabled:hover, -.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current.xdsoft_disabled:hover { - background: $datepicker_current_bg !important; - box-shadow: $datepicker_current_box_shadow !important; - color: $datepicker_hover_color !important; -} - -.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled:hover, -.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_disabled:hover { - color: inherit !important; - background: inherit !important; - box-shadow: inherit !important; -} - -.xdsoft_datetimepicker .xdsoft_calendar th { - font-weight: 700; - text-align: center; - color: $datepicker_header_color; - cursor: default; -} - -.xdsoft_datetimepicker .xdsoft_copyright { - color: #ccc !important; - font-size: $small-font-size; - clear: both; - float: none; - margin-left: 8px; -} - -.xdsoft_datetimepicker .xdsoft_copyright a { color: #eee !important } -.xdsoft_datetimepicker .xdsoft_copyright a:hover { color: #aaa !important } - -.xdsoft_time_box { - position: relative; - border: 1px solid #ccc; -} - -.xdsoft_scrollbar > .xdsoft_scroller { - background: #ccc !important; - height: 20px; - border-radius: 3px; -} - -.xdsoft_scrollbar { - position: absolute; - width: 7px; - right: 0; - top: 0; - bottom: 0; - cursor: pointer; -} - -.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_scrollbar { - left: 0; - right: auto; -} - -.xdsoft_scroller_box { - position: relative; -} - -.xdsoft_datetimepicker .xdsoft_save_selected { - display: block; - border: 1px solid #dddddd !important; - margin-top: 5px; - width: 100%; - color: #454551; - font-size: $default-font-size; -} - -.xdsoft_datetimepicker .blue-gradient-button { - font-family: "museo-sans", "Book Antiqua", sans-serif; - font-size: $default-font-size; - font-weight: 300; - color: #82878c; - height: 28px; - position: relative; - padding: 4px 17px 4px 33px; - border: 1px solid #d7d8da; - background: linear-gradient(#fff, #f4f8fa 73%); -} - -.xdsoft_datetimepicker .blue-gradient-button:hover, .xdsoft_datetimepicker .blue-gradient-button:focus, .xdsoft_datetimepicker .blue-gradient-button:hover span, .xdsoft_datetimepicker .blue-gradient-button:focus span { - color: #454551; - background: linear-gradient(#f4f8fa, #fff 73%); -} diff --git a/app/helpers/alchemy/admin/base_helper.rb b/app/helpers/alchemy/admin/base_helper.rb index 07ede1e1cb..e8a04d5e16 100644 --- a/app/helpers/alchemy/admin/base_helper.rb +++ b/app/helpers/alchemy/admin/base_helper.rb @@ -330,9 +330,6 @@ def new_asset_path_with_session_information(asset_type) # If you pass +'datetime'+ as +:type+ the datepicker will also have a Time select. # If you pass +'time'+ as +:type+ the datepicker will only have a Time select. # - # The date value gets localized via +I18n.l+. The format on Time and Date is +datepicker+, +timepicker+ - # or +datetimepicker+, if you pass another +type+. - # # This helper always renders "text" as input type because: # HTML5 supports input types like 'date' but Browsers are using the users OS settings # to validate the input format. Since Alchemy is localized in the backend the date formats @@ -366,7 +363,7 @@ def alchemy_datepicker(object, method, html_options = {}) type = html_options.delete(:type) || 'date' date = html_options.delete(:value) || object.send(method.to_sym).presence date = Time.zone.parse(date) if date.is_a?(String) - value = date ? l(date, format: "alchemy.#{type}picker".to_sym) : nil + value = date ? date.iso8601 : nil text_field object.class.name.demodulize.underscore.to_sym, method.to_sym, {type: "text", class: type, "data-datepicker-type" => type, value: value}.merge(html_options) diff --git a/app/views/alchemy/admin/pages/_publication_fields.html.erb b/app/views/alchemy/admin/pages/_publication_fields.html.erb index 529070624e..f310704414 100644 --- a/app/views/alchemy/admin/pages/_publication_fields.html.erb +++ b/app/views/alchemy/admin/pages/_publication_fields.html.erb @@ -1,6 +1,4 @@ -<% checkbox = check_box_tag :page_public, nil, @page.public?, name: nil, - data: {date_format: I18n.t(:datetimepicker, scope: 'time.formats.alchemy')}, - disabled: @page.attribute_fixed?(:public_on) %> +<% checkbox = check_box_tag :page_public, nil, @page.public?, name: nil, disabled: @page.attribute_fixed?(:public_on) %>