public inbox for [email protected]help / color / mirror / Atom feed
[PgAdmin][RM4237]: User can not change value of Datetime picker control using keyboard (Accessibility). 5+ messages / 3 participants [nested] [flat]
* [PgAdmin][RM4237]: User can not change value of Datetime picker control using keyboard (Accessibility). @ 2020-03-07 13:29 Pradip Parkale <[email protected]> 0 siblings, 1 reply; 5+ messages in thread From: Pradip Parkale @ 2020-03-07 13:29 UTC (permalink / raw) To: pgadmin-hackers Hi Hackers, Attached is a patch to change the Datetime picker value using a keyboard. -- Thanks & Regards, Pradip Parkale QMG, EnterpriseDB Corporation Attachments: [application/octet-stream] RM4237.patch (4.3K, 3-RM4237.patch) download | inline diff: diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js index 06b2159d5..3090fd254 100644 --- a/web/pgadmin/static/js/backform.pgadmin.js +++ b/web/pgadmin/static/js/backform.pgadmin.js @@ -2821,6 +2821,7 @@ define([ 'focusout input': 'closePicker', 'change.datetimepicker': 'onChange', 'click .input-group': 'togglePicker', + 'keydown .datetimepicker-input': 'keyboardEvent', }, togglePicker: function() { if (this.has_datepicker) { @@ -2846,6 +2847,109 @@ define([ '</div>', '<% } %>', ].join('\n')), + + keyboardEvent: function(event) { + let stopBubble = false; + if (!event.altKey && event.keyCode == 38) { + this.up(); + } + if (!event.altKey && event.keyCode == 40) { + this.down(); + } + if (event.keyCode == 37) { + this.left(); + } + if (event.keyCode == 39) { + this.right(); + } + if (event.keyCode == 27){ + this.$el.find('input').datetimepicker('hide'); + stopBubble = true; + } + if (event.keyCode == 13){ + if ((this.$el.find('.datepicker').is(':visible')) || (this.$el.find('.timepicker').is(':visible'))){ + this.$el.find('input').datetimepicker('hide'); + }else{ + this.$el.find('input').datetimepicker('show'); + } + } + if (event.altKey && event.keyCode == 84) { + this.timePicker(); + } + if(event.altKey && event.keyCode == 38){ + this.controlUp(); + } + if(event.altKey && event.keyCode == 40){ + this.controlDown(); + } + + if(stopBubble) { + event.stopImmediatePropagation(); + } + }, + + down: function() { + if (this.$el.find('.datepicker').is(':visible')) { + let $el = this.$el.find('.datetimepicker-input'); + let currdate = $el.data('datetimepicker').date().clone(); + $el.datetimepicker('date', currdate.add(7, 'd')); + } else { + let $el = this.$el.find('.datetimepicker-input'); + let currdate = $el.data('datetimepicker').date().clone(); + $el.datetimepicker('date', currdate.subtract(1, 'm')); + } + }, + + up: function() { + if (this.$el.find('.datepicker').is(':visible')) { + let $el = this.$el.find('.datetimepicker-input'); + let currdate = $el.data('datetimepicker').date().clone(); + $el.datetimepicker('date', currdate.subtract(7, 'd')); + } else { + let $el = this.$el.find('.datetimepicker-input'); + let currdate = $el.data('datetimepicker').date().clone(); + $el.datetimepicker('date', currdate.add(1, 'm')); + } + }, + + left: function() { + if (this.$el.find('.datepicker').is(':visible')) { + let $el = this.$el.find('.datetimepicker-input'); + let currdate = $el.data('datetimepicker').date().clone(); + $el.datetimepicker('date', currdate.subtract(1, 'd')); + } + }, + + right: function() { + if (this.$el.find('.datepicker').is(':visible')) { + let $el = this.$el.find('.datetimepicker-input'); + let currdate = $el.data('datetimepicker').date().clone(); + $el.datetimepicker('date', currdate.add(1, 'd')); + } + }, + + timePicker:function() { + if (this.$el.find('.timepicker').is(':visible')){ + this.$el.find('.fa-calendar').click(); + }else{ + this.$el.find('.fa-clock-o').click(); + } + }, + + controlUp:function() { + this.$el.find('.fa-clock-o').click(); + let $el = this.$el.find('.datetimepicker-input'); + let currdate = $el.data('datetimepicker').date().clone(); + $el.datetimepicker('date', currdate.add(1, 'h')); + }, + + controlDown:function() { + this.$el.find('.fa-clock-o').click(); + let $el = this.$el.find('.datetimepicker-input'); + let currdate = $el.data('datetimepicker').date().clone(); + $el.datetimepicker('date', currdate.subtract(1, 'h')); + }, + render: function() { var field = _.defaults(this.field.toJSON(), this.defaults), attributes = this.model.toJSON(), ^ permalink raw reply [nested|flat] 5+ messages in thread
* Re: [PgAdmin][RM4237]: User can not change value of Datetime picker control using keyboard (Accessibility). @ 2020-03-09 05:39 Akshay Joshi <[email protected]> parent: Pradip Parkale <[email protected]> 0 siblings, 1 reply; 5+ messages in thread From: Akshay Joshi @ 2020-03-09 05:39 UTC (permalink / raw) To: Pradip Parkale <[email protected]>; +Cc: pgadmin-hackers Hi Pradip I have tested the patch. I am able to navigate the dates using the keyboard, but not able to select the year/month and time. Can you please work on it and send the patch again. On Sat, Mar 7, 2020 at 7:00 PM Pradip Parkale < [email protected]> wrote: > Hi Hackers, > > Attached is a patch to change the Datetime picker value using a keyboard. > > > -- > Thanks & Regards, > Pradip Parkale > QMG, EnterpriseDB Corporation > -- *Thanks & Regards* *Akshay Joshi* *Sr. Software Architect* *EnterpriseDB Software India Private Limited* *Mobile: +91 976-788-8246* ^ permalink raw reply [nested|flat] 5+ messages in thread
* Re: [PgAdmin][RM4237]: User can not change value of Datetime picker control using keyboard (Accessibility). @ 2020-03-10 07:47 Pradip Parkale <[email protected]> parent: Akshay Joshi <[email protected]> 0 siblings, 1 reply; 5+ messages in thread From: Pradip Parkale @ 2020-03-10 07:47 UTC (permalink / raw) To: Akshay Joshi <[email protected]>; +Cc: pgadmin-hackers Hi Akshay, I have already added the code to change the time. To select the time picker, the user needs to press 'Alt+T' (Option+T for mac) and then Up/Down arrows to change the minutes and Alt + Up/Down to change the hours. On Mon, Mar 9, 2020 at 11:09 AM Akshay Joshi <[email protected]> wrote: > Hi Pradip > > I have tested the patch. I am able to navigate the dates using the > keyboard, but not able to select the year/month and time. Can you please > work on it and send the patch again. > > On Sat, Mar 7, 2020 at 7:00 PM Pradip Parkale < > [email protected]> wrote: > >> Hi Hackers, >> >> Attached is a patch to change the Datetime picker value using a keyboard. >> >> >> -- >> Thanks & Regards, >> Pradip Parkale >> QMG, EnterpriseDB Corporation >> > > > -- > *Thanks & Regards* > *Akshay Joshi* > > *Sr. Software Architect* > *EnterpriseDB Software India Private Limited* > *Mobile: +91 976-788-8246* > -- Thanks & Regards, Pradip Parkale QMG, EnterpriseDB Corporation ^ permalink raw reply [nested|flat] 5+ messages in thread
* Re: [PgAdmin][RM4237]: User can not change value of Datetime picker control using keyboard (Accessibility). @ 2020-03-10 07:53 Akshay Joshi <[email protected]> parent: Pradip Parkale <[email protected]> 0 siblings, 1 reply; 5+ messages in thread From: Akshay Joshi @ 2020-03-10 07:53 UTC (permalink / raw) To: Pradip Parkale <[email protected]>; +Cc: pgadmin-hackers Thanks, patch applied. On Tue, Mar 10, 2020 at 1:17 PM Pradip Parkale < [email protected]> wrote: > Hi Akshay, > I have already added the code to change the time. To select the time > picker, the user needs to press 'Alt+T' (Option+T for mac) and then > Up/Down arrows to change the minutes and Alt + Up/Down to change the hours. > > On Mon, Mar 9, 2020 at 11:09 AM Akshay Joshi < > [email protected]> wrote: > >> Hi Pradip >> >> I have tested the patch. I am able to navigate the dates using the >> keyboard, but not able to select the year/month and time. Can you please >> work on it and send the patch again. >> >> On Sat, Mar 7, 2020 at 7:00 PM Pradip Parkale < >> [email protected]> wrote: >> >>> Hi Hackers, >>> >>> Attached is a patch to change the Datetime picker value using a keyboard. >>> >>> >>> -- >>> Thanks & Regards, >>> Pradip Parkale >>> QMG, EnterpriseDB Corporation >>> >> >> >> -- >> *Thanks & Regards* >> *Akshay Joshi* >> >> *Sr. Software Architect* >> *EnterpriseDB Software India Private Limited* >> *Mobile: +91 976-788-8246* >> > > > -- > Thanks & Regards, > Pradip Parkale > QMG, EnterpriseDB Corporation > -- *Thanks & Regards* *Akshay Joshi* *Sr. Software Architect* *EnterpriseDB Software India Private Limited* *Mobile: +91 976-788-8246* ^ permalink raw reply [nested|flat] 5+ messages in thread
* Re: [PgAdmin][RM4237]: User can not change value of Datetime picker control using keyboard (Accessibility). @ 2020-03-10 08:50 Khushboo Vashi <[email protected]> parent: Akshay Joshi <[email protected]> 0 siblings, 0 replies; 5+ messages in thread From: Khushboo Vashi @ 2020-03-10 08:50 UTC (permalink / raw) To: Akshay Joshi <[email protected]>; +Cc: Pradip Parkale <[email protected]>; pgadmin-hackers Hi Pradip, Looks like you have repeated below code in if and else both the conditions. let $el = this.$el.find('.datetimepicker-input'); let currdate = $el.data('datetimepicker').date().clone(); We can optimize this code by taking these both lines above if condition. Thanks, Khushboo On Tue, Mar 10, 2020 at 1:24 PM Akshay Joshi <[email protected]> wrote: > Thanks, patch applied. > > On Tue, Mar 10, 2020 at 1:17 PM Pradip Parkale < > [email protected]> wrote: > >> Hi Akshay, >> I have already added the code to change the time. To select the time >> picker, the user needs to press 'Alt+T' (Option+T for mac) and then >> Up/Down arrows to change the minutes and Alt + Up/Down to change the hours. >> >> On Mon, Mar 9, 2020 at 11:09 AM Akshay Joshi < >> [email protected]> wrote: >> >>> Hi Pradip >>> >>> I have tested the patch. I am able to navigate the dates using the >>> keyboard, but not able to select the year/month and time. Can you please >>> work on it and send the patch again. >>> >>> On Sat, Mar 7, 2020 at 7:00 PM Pradip Parkale < >>> [email protected]> wrote: >>> >>>> Hi Hackers, >>>> >>>> Attached is a patch to change the Datetime picker value using a >>>> keyboard. >>>> >>>> >>>> -- >>>> Thanks & Regards, >>>> Pradip Parkale >>>> QMG, EnterpriseDB Corporation >>>> >>> >>> >>> -- >>> *Thanks & Regards* >>> *Akshay Joshi* >>> >>> *Sr. Software Architect* >>> *EnterpriseDB Software India Private Limited* >>> *Mobile: +91 976-788-8246* >>> >> >> >> -- >> Thanks & Regards, >> Pradip Parkale >> QMG, EnterpriseDB Corporation >> > > > -- > *Thanks & Regards* > *Akshay Joshi* > > *Sr. Software Architect* > *EnterpriseDB Software India Private Limited* > *Mobile: +91 976-788-8246* > ^ permalink raw reply [nested|flat] 5+ messages in thread
end of thread, other threads:[~2020-03-10 08:50 UTC | newest] Thread overview: 5+ messages (download: mbox mbox.gz follow: Atom feed) -- links below jump to the message on this page -- 2020-03-07 13:29 [PgAdmin][RM4237]: User can not change value of Datetime picker control using keyboard (Accessibility). Pradip Parkale <[email protected]> 2020-03-09 05:39 ` Akshay Joshi <[email protected]> 2020-03-10 07:47 ` Pradip Parkale <[email protected]> 2020-03-10 07:53 ` Akshay Joshi <[email protected]> 2020-03-10 08:50 ` Khushboo Vashi <[email protected]>
This inbox is served by agora; see mirroring instructions for how to clone and mirror all data and code used for this inbox