Bugzilla – Attachment 156344 Details for
Bug 17015
New Koha Calendar
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 17015: DatePicker/TimePicker to Flatpickr
Bug-17015-DatePickerTimePicker-to-Flatpickr.patch (text/plain), 20.76 KB, created by
Emily-Rose Francoeur
on 2023-09-28 19:34:44 UTC
(
hide
)
Description:
Bug 17015: DatePicker/TimePicker to Flatpickr
Filename:
MIME Type:
Creator:
Emily-Rose Francoeur
Created:
2023-09-28 19:34:44 UTC
Size:
20.76 KB
patch
obsolete
>From 3f4511e81842f4a670b04414f8d2122b5e392d6a Mon Sep 17 00:00:00 2001 >From: Shi Yao Wang <shi-yao.wang@inlibro.com> >Date: Fri, 26 Aug 2022 17:26:05 -0400 >Subject: [PATCH] Bug 17015: DatePicker/TimePicker to Flatpickr > >Changed all datepicker/timepicker to flatpickr + some small fixes >--- > .../prog/css/discretecalendar.css | 213 ------------------ > .../intranet-tmpl/prog/css/src/calendar.scss | 31 +++ > .../en/modules/tools/discrete_calendar.tt | 144 ++++++------ > 3 files changed, 104 insertions(+), 284 deletions(-) > delete mode 100644 koha-tmpl/intranet-tmpl/prog/css/discretecalendar.css > >diff --git a/koha-tmpl/intranet-tmpl/prog/css/discretecalendar.css b/koha-tmpl/intranet-tmpl/prog/css/discretecalendar.css >deleted file mode 100644 >index 1be90a5959..0000000000 >--- a/koha-tmpl/intranet-tmpl/prog/css/discretecalendar.css >+++ /dev/null >@@ -1,213 +0,0 @@ >-#jcalendar-container .ui-datepicker { >- float: left; >- font-size: 185%; >-} >- >-#holidayweeklyrepeatable, >-#holidaysyearlyrepeatable, >-#holidaysunique, >-#holidayexceptions { >- font-size: 90%; >- margin-bottom: 1em; >-} >- >-#showHoliday { >- margin: .5em 0; >-} >- >-.key { >- padding: 3px; >- white-space: nowrap; >- line-height: 230%; >-} >- >-.ui-datepicker { >- font-size: 150%; >-} >- >-.ui-datepicker th, >-.ui-datepicker .ui-datepicker-title select { >- font-size: 80%; >-} >- >-.ui-datepicker td a { >- padding: .5em; >-} >- >-.ui-datepicker td span { >- padding: .5em; >- border: 1px solid #BCBCBC; >-} >- >-.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { >- font-size: 80%; >-} >- >-.key { >- padding: 3px; >- white-space: nowrap; >- line-height: 230%; >-} >- >-.normalday { >- background-color: #EDEDED; >- color: #000; >- border: 1px solid #BCBCBC; >-} >- >-.ui-datepicker-unselectable { >- padding: .5em; >- white-space: nowrap; >-} >- >-.ui-state-disabled { >- padding: .5em; >- white-space: nowrap; >-} >- >-.exception { >- background-color: #b3d4ff; >- color: #000; >- border: 1px solid #BCBCBC; >-} >- >-.past-date { >- background-color: #e6e6e6; >- color: #555; >- border: 1px solid #BCBCBC; >-} >- >-td.past-date a.ui-state-default { >- background: #e6e6e6; >- color: #555; >-} >- >-.float { >- background-color: #6f3; >- color: #000; >- border: 1px solid #BCBCBC; >-} >- >-.holiday { >- background-color: #ffaeae; >- color: #000; >- border: 1px solid #BCBCBC; >-} >- >-.repeatableweekly { >- background-color: #FF9; >- color: #000; >- border: 1px solid #BCBCBC; >-} >- >-.repeatableyearly { >- background-color: #FC6; >- color: #000; >- border: 1px solid #BCBCBC; >-} >- >-td.exception a.ui-state-default { >- background: #b3d4ff none; >- color: #000; >- border: 1px solid #BCBCBC; >-} >- >-td.float a.ui-state-default { >- background: #6f3 none; >- color: #000; >- border: 1px solid #BCBCBC; >-} >- >-td.holiday a.ui-state-default { >- background: #ffaeae none; >- color: #000; >- border: 1px solid #BCBCBC; >-} >- >-td.repeatableweekly a.ui-state-default { >- background: #FF9 none; >- color: #000; >- border: 1px solid #BCBCBC; >-} >- >-td.repeatableyearly a.ui-state-default { >- background: #FC6 none; >- color: #000; >- border: 1px solid #BCBCBC; >-} >- >-.information { >- background-color: #DCD2F1; >- width: 300px; >- display: none; >- border: 1px solid #000; >- color: #000; >- font-size: 8pt; >- font-weight: 700; >- background-color: #FFD700; >- cursor: pointer; >- padding: 2px; >-} >- >-.panel { >- z-index: 1; >- display: none; >- float: left; >- border: 3px solid #CCC; >- padding: 3px; >- margin-top: .3em; >- margin-left: 15px; >- background-color: #FEFEFE; >-} >- >-fieldset.brief { >- border: 0; >- margin: 0; >-} >- >-h1 select { >- width: 20em; >-} >- >-fieldset.brief ol { >- font-size: 100%; >-} >- >-fieldset.brief li, >-fieldset.brief li.radio { >- padding: .2em 0; >-} >- >-.CopyDatePanel { >- margin-left: 15px; >-} >- >-.help { >- margin: .3em 0; >- border: 1px solid #EEE; >- padding: .3em .7em; >- font-size: 90%; >-} >- >-.calendar td, >-.calendar th, >-.calendar .button, >-.calendar tbody .day { >- padding: .7em; >- font-size: 110%; >-} >- >-.calendar { >- width: auto; >- border: 0; >-} >- >-.copyHoliday form li { >- display: table-row; >-} >- >-.copyHoliday form li b, >-.copyHoliday form li input { >- display: table-cell; >- margin-bottom: 2px; >-} >\ No newline at end of file >diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/calendar.scss b/koha-tmpl/intranet-tmpl/prog/css/src/calendar.scss >index 910130b338..aaaa0adb6d 100644 >--- a/koha-tmpl/intranet-tmpl/prog/css/src/calendar.scss >+++ b/koha-tmpl/intranet-tmpl/prog/css/src/calendar.scss >@@ -1,8 +1,11 @@ > $daySize: 45px; >+$pastdate_bg: #E6E6E6; >+$normalday_bg: #F4F8F9; > $exception_bg: #B3D4FF; > $holiday_bg: #FFAEAE; > $repeatableweekly_bg: #FFFF99; > $repeatableyearly_bg: #FFCC66; >+$float_bg: #66FF33; > $selected: #B9DB88; > > @import "flatpickr"; >@@ -32,6 +35,10 @@ $selected: #B9DB88; > &.repeatableyearly { > background-color: $repeatableyearly_bg; > } >+ >+ &.float { >+ background-color: $float_bg; >+ } > } > > .flatpickr-day { >@@ -40,6 +47,18 @@ $selected: #B9DB88; > border: 0; > } > >+ &.past-date { >+ background-color: $pastdate_bg; >+ >+ &.selected { >+ border:3px solid $selected; >+ } >+ >+ &:hover { >+ background-color: #CCC; >+ } >+ } >+ > &.exception { > background-color: $exception_bg; > >@@ -71,6 +90,14 @@ $selected: #B9DB88; > border: 3px solid $selected; > } > } >+ >+ &.float { >+ background-color: $float_bg; >+ >+ .selected { >+ border: 3px solid $selected; >+ } >+ } > } > > #holidayexceptions th.exception { >@@ -93,6 +120,10 @@ $selected: #B9DB88; > background-color: $repeatableyearly_bg; > } > >+#holidaysfloat th.float { >+ background-color: $float_bg; >+} >+ > .panel { > border: 1px solid #8AC363; > box-shadow: none; >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/discrete_calendar.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/discrete_calendar.tt >index 4169af3d69..3918ac0205 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/discrete_calendar.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/discrete_calendar.tt >@@ -5,7 +5,7 @@ > [% INCLUDE 'doc-head-open.inc' %] > <title>[% Branches.GetName( branch ) | html %] calendar; Tools › Koha &rsaquo</title> > [% INCLUDE 'doc-head-close.inc' %] >-[% Asset.css("css/discretecalendar.css") | $raw %] >+[% Asset.css("css/calendar.css") | $raw %] > </head> > > <body id="tools_holidays" class="tools"> >@@ -80,7 +80,7 @@ > > <h3>Calendar information</h3> > >- <div id="jcalendar-container"></div> >+ <span id="calendar-anchor"></span> > > <!-- ***************************** Panel to deal with new holidays ********************** --> > <div class="panel newHoliday" id="newHoliday"> >@@ -110,7 +110,7 @@ > </li> > <li class="dateinsert"> > <strong>To date:</strong> >- <input type="text" id="to_date_datepicker" size="20" class="datepicker" /> >+ <input type="text" id="to_date_flatpickr" size="20" /> > </li> > <li> > <label for="title">Title: </label> >@@ -162,9 +162,9 @@ > </li> > <li class="CopyDatePanel"> > <label>From:</label> >- <input type="text" id="copyto_from_datepicker" size="20" class="datepicker"/> >+ <input type="text" id="copyto_from_flatpickr" size="20"/> > <label>To:</label> >- <input type="text" id="copyto_to_datepicker" size="20" class="datepicker"/> >+ <input type="text" id="copyto_to_flatpickr" size="20"/> > </li> > </ol> > >@@ -214,11 +214,11 @@ > <div id="holiday-list"> > [% IF ( NEED_VALIDATION_HOLIDAYS ) %] > <h3>Need validation holidays</h3> >- <table id="holidaysunique"> >+ <table id="holidaysvalidation"> > <thead> > <tr> >- <th class="exception">Date</th> >- <th class="exception">Title</th> >+ <th class="validation">Date</th> >+ <th class="validation">Title</th> > </tr> > </thead> > <tbody> >@@ -302,7 +302,7 @@ > > [% IF ( FLOAT_HOLIDAYS ) %] > <h3>Floating holidays</h3> >- <table id="holidaysunique"> >+ <table id="holidaysfloat"> > <thead> > <tr> > <th class="float">Date</th> >@@ -336,7 +336,6 @@ > [% MACRO jsinclude BLOCK %] > [% INCLUDE 'calendar.inc' %] > [% INCLUDE 'datatables.inc' %] >- [% Asset.js("lib/jquery/plugins/jquery-ui-timepicker-addon.min.js") | $raw %] > [% Asset.js("js/tools-menu.js") | $raw %] > <script> > var weekdays = new Array(_("Sundays"),_("Mondays"),_("Tuesdays"),_("Wednesdays"),_("Thursdays"),_("Fridays"),_("Saturdays")); >@@ -426,31 +425,35 @@ > } > > // This function gives css classes to each kind of day >- function dateStatusHandler(date) { >- date = getSeparetedDate(date); >+ function dateStatusHandler(dayElem) { >+ date = getSeparetedDate(dayElem.dateObj); > var dateString = date.dateString; > var today = new Date(); > today.setHours(0, 0, 0, 0); > > if (datesInfos[dateString] && datesInfos[dateString].holiday_type =='W') { >- return [true, "repeatableweekly", _("Weekly holiday: %s").format(datesInfos[dateString].title)]; >+ formatDay( [ "repeatableweekly", _("Weekly holiday: %s").format(datesInfos[dateString].title)], dayElem ); > } else if (datesInfos[dateString] && datesInfos[dateString].holiday_type == 'R') { >- return [true, "repeatableyearly", _("Yearly holiday: %s").format(datesInfos[dateString].title)]; >+ formatDay( [ "repeatableyearly", _("Yearly holiday: %s").format(datesInfos[dateString].title)], dayElem ); > } else if (datesInfos[dateString] && datesInfos[dateString].holiday_type == 'N') { >- return [true, "exception", _("Need validation: %s").format(datesInfos[dateString].title)]; >+ formatDay( [ "exception", _("Need validation: %s").format(datesInfos[dateString].title)], dayElem ); > } else if (datesInfos[dateString] && datesInfos[dateString].holiday_type == 'F') { >- return [true, "float", _("Floating holiday: %s").format(datesInfos[dateString].title)]; >+ formatDay( [ "float", _("Floating holiday: %s").format(datesInfos[dateString].title)], dayElem ); > } else if (datesInfos[dateString] && datesInfos[dateString].holiday_type == 'E') { >- return [true, "holiday", _("Single holiday: %s").format(datesInfos[dateString].title)]; >+ formatDay( [ "holiday", _("Single holiday: %s").format(datesInfos[dateString].title)], dayElem ); > } else { > if (date.date_obj < today) { >- return [true, "past-date", _("Past day")]; >+ formatDay( [ "past-date", _("Past day")], dayElem ); > }else { >- return [true, "normalday", _("Normal day")]; >+ formatDay( [ "normalday", _("Normal day")], dayElem ); > } > } > } > >+ function formatDay( settings, dayElem ){ >+ $(dayElem).attr("title", settings[1]).addClass( settings[0]); >+ } >+ > /* > * This function separate a given date object and returns an array containing all needed information about the date. > */ >@@ -479,14 +482,14 @@ > */ > function validateForm(form) { > if (form =='newHoliday-form' && $('#CopyRadioButton').is(':checked')) { >- if ($('#copyto_from_datepicker').val() =='' || $('#copyto_to_datepicker').val() =='') { >+ if ($('#copyto_from_flatpickr').val() =='' || $('#copyto_to_flatpickr').val() =='') { > alert("You have to pick a FROM and TO in the Copy to different dates."); > return false; >- } else if ($('#to_date_datepicker').val()) { >- var from_DateFrom = new Date($("#jcalendar-container").datepicker("getDate")); >- var from_DateTo = new Date($('#to_date_datepicker').datepicker("getDate")); >- var to_DateFrom = new Date($('#copyto_from_datepicker').datepicker("getDate")); >- var to_DateTo = new Date($('#copyto_to_datepicker').datepicker("getDate")); >+ } else if ($('#to_date_flatpickr').val()) { >+ var from_DateFrom = new Date(document.querySelector("#calendar-anchor")._flatpickr.selectedDates[0]); >+ var from_DateTo = new Date(document.querySelector('#to_date_flatpickr')._flatpickr.selectedDates[0]); >+ var to_DateFrom = new Date(document.querySelector('#copyto_from_flatpickr')._flatpickr.selectedDates[0]); >+ var to_DateTo = new Date(document.querySelector('#copyto_to_flatpickr')._flatpickr.selectedDates[0]); > > var from_start = Math.round( from_DateFrom.getTime() / (3600*24*1000)); // days as integer from.. > var from_end = Math.round( from_DateTo.getTime() / (3600*24*1000)); >@@ -526,7 +529,7 @@ > var dateString = date.dateString; > var date_obj = date.date_obj; > >- $("#jcalendar-container").datepicker("setDate", date_obj); >+ document.querySelector("#calendar-anchor")._flatpickr.setDate(date_obj); > showHoliday(date_obj, dateString, dayName, day, month, year, weekDay, datesInfos[dateString].title, datesInfos[dateString].holiday_type); > } > >@@ -536,7 +539,7 @@ > function checkRange(date) { > date = new Date(date); > $('#to_date').val(getSeparetedDate(date).dateString); >- var fromDate = new Date($("#jcalendar-container").datepicker("getDate")); >+ var fromDate = new Date(document.querySelector("#calendar-anchor")._flatpickr.selectedDates[0]); > var sameHoliday =true; > var sameOpenHours =true; > var sameCloseHours =true; >@@ -600,75 +603,74 @@ > return validateForm($(this).attr("id")); > }); > >- // Set the correct coloring, default date and the date ranges for all datepickers >- [% IF (dateformat == 'metric') %][% datepickerformat = 'dd/mm/yy' %] >- [% ELSIF (dateformat == 'us' ) %][% datepickerformat = 'mm/dd/yy' %] >- [% ELSIF (dateformat == 'iso' ) %][% datepickerformat = 'yy-mm-dd' %] >- [% ELSIF (dateformat == 'dmydot') %][% datepickerformat = 'dd.mm.yy' %] >- [% END %] >- >- $.datepicker.setDefaults({ >- beforeShowDay: function(thedate) { >- return dateStatusHandler(thedate); >+ flatpickr.setDefaults({ >+ onDayCreate: function( dObj, dStr, fp, dayElem ){ >+ /* for each day on the calendar, get the >+ correct status information for the date */ >+ dateStatusHandler( dayElem ); > }, >- defaultDate: new Date("[% keydate | html %]"), > minDate: new Date("[% minDate | html %]"), >- maxDate: new Date("[% maxDate | html %]"), >- dateFormat: "[% datepickerformat | html %]" >+ maxDate: new Date("[% maxDate | html %]") > }); > >- // Main datepicker >- $("#jcalendar-container").datepicker({ >- onSelect: function(dateText, inst) { >+ // Main flatpickr >+ $("#calendar-anchor").flatpickr({ >+ inline: true, >+ onReady: function( selectedDates, dateStr, instance ){ >+ // We do not want to display the 'close' icon in this case >+ $(instance.input).siblings('.flatpickr-input').hide(); >+ }, >+ onChange: function(selectedDates, dateStr, instance) { > [% IF datesInfos %] >- var date = getSeparetedDate($(this).datepicker("getDate")); >+ var date = getSeparetedDate(selectedDates[0]); > var weekDay = date.weekDay; > var dayName = weekdays[weekDay]; > var dateString = date.dateString; > > // set value of form hidden field >- $('#from_date').val(dateText); >- >+ $('#from_date').val(dateStr); > showHoliday(date.date_obj, dateString, dayName, date.day, date.month, date.year, weekDay, datesInfos[dateString].title, datesInfos[dateString].holiday_type); > [% END %] >- }, >+ } > }); > >- $('#to_date_datepicker').datepicker(); >- $("#to_date_datepicker").change(function() { >- checkRange($(this).datepicker("getDate")); >- $('#to_date').val(($(this).val())); >- if ($('#to_date_datepicker').val()) { >+ $('#to_date_flatpickr').flatpickr(); >+ $("#to_date_flatpickr").change(function() { >+ checkRange(document.querySelector("#to_date_flatpickr")._flatpickr.selectedDates[0]); >+ $('#to_date').val(($("#to_date_flatpickr").val())); >+ if ($('#to_date_flatpickr').val()) { > $('#days_of_week').show("fast"); > } else { > $('#days_of_week').hide("fast"); > } > }); > >- // Datepickers for copy dates feature >- $('#copyto_from_datepicker').datepicker(); >- $("#copyto_from_datepicker").change(function() { >+ // Flatpickrs for copy dates feature >+ $('#copyto_from_flatpickr').flatpickr(); >+ $("#copyto_from_flatpickr").change(function() { > $('#copyto_from').val(($(this).val())); > }); > >- $('#copyto_to_datepicker').datepicker(); >- $("#copyto_to_datepicker").change(function() { >+ $('#copyto_to_flatpickr').flatpickr(); >+ $("#copyto_to_flatpickr").change(function() { > $('#copyto_to').val(($(this).val())); > }); > >- // Timepickers for open and close hours >- $('#openHour').timepicker({ >- showOn : 'focus', >- timeFormat: 'HH:mm:ss', >- showSecond: false, >- stepMinute: 5, >- }); >- $('#closeHour').timepicker({ >- showOn : 'focus', >- timeFormat: 'HH:mm:ss', >- showSecond: false, >- stepMinute: 5, >- }); >+ // Flatpickrs for open and close hours >+ timeoptions = { >+ plugins: [], >+ enableTime: true, >+ noCalendar: true, >+ dateFormat: "H:i:S", >+ altInput: false, >+ defaultHour: 12, >+ defaultMinute: 0, >+ onOpen: function( selectedDates, dateStr, instance ) { >+ instance.setDate(instance.input.value, false); >+ } >+ } >+ $('#openHour').flatpickr(timeoptions); >+ $('#closeHour').flatpickr(timeoptions); > > $('.newHoliday input[type="radio"]').click(function() { > if ($(this).attr("id") == "CopyRadioButton") { >@@ -696,7 +698,7 @@ > $("#holidayType select").on("change", function() { > if ($("#holidayType select").val() == "R") { > $('#days_of_week').hide("fast"); >- } else if ($('#to_date_datepicker').val()) { >+ } else if ($('#to_date_flatpickr').val()) { > $('#days_of_week').show("fast"); > } > }); >-- >2.34.1
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 17015
:
53859
|
54318
|
54419
|
59166
|
59167
|
59168
|
59169
|
59170
|
59171
|
59267
|
59268
|
59269
|
59270
|
59271
|
59463
|
59516
|
59517
|
59518
|
59519
|
59520
|
59561
|
59562
|
59586
|
59587
|
59888
|
59889
|
60902
|
60903
|
60904
|
60905
|
60906
|
60986
|
61737
|
62375
|
62376
|
62380
|
63257
|
63282
|
63362
|
63363
|
63364
|
63365
|
63366
|
63367
|
64235
|
65073
|
65074
|
65075
|
65076
|
65077
|
67721
|
67722
|
67723
|
67724
|
67725
|
67879
|
67929
|
67930
|
67931
|
67932
|
67933
|
67934
|
68392
|
68393
|
68394
|
68395
|
68396
|
68397
|
71634
|
71635
|
71636
|
71637
|
71638
|
72890
|
73145
|
74859
|
74860
|
74861
|
74862
|
74863
|
74864
|
74865
|
74866
|
75444
|
75479
|
76594
|
77249
|
77250
|
77607
|
77608
|
77609
|
77610
|
77611
|
77612
|
77613
|
77770
|
77771
|
77772
|
77773
|
77774
|
79035
|
80523
|
80524
|
80525
|
80526
|
80527
|
80528
|
80529
|
80530
|
80531
|
80532
|
80533
|
80534
|
80535
|
83547
|
85394
|
85677
|
85678
|
85679
|
85680
|
85681
|
85682
|
85683
|
85684
|
85685
|
85686
|
85687
|
85688
|
85689
|
85690
|
85691
|
92595
|
92596
|
92597
|
92598
|
100079
|
110383
|
110384
|
110386
|
110387
|
110388
|
110389
|
113541
|
113905
|
115501
|
115502
|
115503
|
115504
|
115505
|
115506
|
115507
|
115508
|
115509
|
115510
|
115511
|
118554
|
118555
|
118556
|
118557
|
118558
|
118559
|
119095
|
119097
|
119099
|
119100
|
119101
|
119102
|
131619
|
131620
|
131621
|
131622
|
131623
|
131624
|
131625
|
131626
|
131634
|
131635
|
131636
|
131637
|
131638
|
131639
|
131640
|
131641
|
131667
|
132199
|
133596
|
133597
|
133598
|
133599
|
133600
|
133601
|
133602
|
133603
|
133604
|
133605
|
133678
|
137219
|
137220
|
137221
|
137222
|
137223
|
137224
|
137225
|
137226
|
137227
|
137228
|
137229
|
139378
|
139379
|
139380
|
139381
|
139382
|
139599
|
139600
|
139601
|
139602
|
139603
|
139851
|
140150
|
141176
|
144257
|
144258
|
144259
|
144260
|
144261
|
144262
|
144264
|
144268
|
144269
|
144270
|
144271
|
144272
|
144273
|
151438
|
151439
|
151440
|
151441
|
151442
|
151443
|
151444
|
151445
|
151446
|
151447
|
151448
|
151449
|
151450
|
156340
|
156341
|
156342
|
156343
|
156344
|
156345
|
156346
|
156347
|
156348
|
156349
|
156350
|
156351
|
156352
|
156353
|
156354
|
156355
|
157656
|
157657
|
157658
|
157659
|
157660
|
157661
|
157662
|
157663
|
157664
|
157665
|
157666
|
157667
|
157668
|
157669
|
157670
|
157671
|
157672
|
167805
|
167806
|
167807
|
167808
|
167809