Premium support for our pure JavaScript UI components


Post by rakshith.snps »

Hello Bryntum Team,
We would like to know if we can display date range picker as showed in this image. if so please let us know how to go about it.

undo-redo-c.png
undo-redo-c.png (47.38 KiB) Viewed 1721 times

Post by alex.l »

Hi rakshith.snps,

Could you please comment the difference. It's not obvious to me. What exactly you want to change?

All the best,
Alex


Post by rakshith.snps »

Hi Alex,
Sorry I couldn't provide more information.
Currently we access the date range picker by
Right click on scheduler pro header and choose date range picker.

dateRange.gif
dateRange.gif (546.36 KiB) Viewed 1711 times

but we want the date range picker somewhere like this

Inkedundo-redo-c.jpg
Inkedundo-redo-c.jpg (65.8 KiB) Viewed 1711 times

how can we achieve this . Thank you.


Post by Animal »

You could have a Button in your top toolbar which has as its menu a datepicker in range selection mode: https://bryntum.com/products/scheduler/docs/api/Core/widget/DatePicker#multi-selection

On the selectionChange event, you can collect the start and end, and place them in fields in the tbar

Screenshot 2022-12-06 at 07.44.10.png
Screenshot 2022-12-06 at 07.44.10.png (59.91 KiB) Viewed 1708 times

Post by rakshith.snps »

Hi, Thank you for your advice!
But do you mean to use a button and then when I click the button append the date picker which you showed in the above case?
Is there any source code that I can use for reference to build out this feature? thank you


Post by alex.l »

All the best,
Alex


Post by rakshith.snps »

Hi Alex,
Thank you for the links.
We've gone through them . For our business need we chose to have 2 separate date pickers which we are attaching to menu buttons.
We've created the menu buttons but we are not sure how to link the date pickers to each button could you guide us in this aspect?

Here is a sample code

umScheduler.startButton = new bryntum.schedulerpro.Button({
      appendTo: this.startDateContainer,
      icon: 'b-fa-chart',
      text: 'Start Date Picker',
      menu: {
        items: {
          // TODO date picker
        },
      },
    });

umScheduler.endButton = new bryntum.schedulerpro.Button({
  appendTo: this.endDateContainer,
  icon: 'b-fa-chart',
  text: 'End Date Picker',
  menu: {
    items: {
      // TODO date picker
    },
  },
});

Post by alex.l »

Sure, you need to add datepicker into items:

    menu     : {
        items : [
            {
                type   : 'datepicker'
            }
        ]
    }

Try here https://bryntum.com/products/gantt/docs/api/Core/widget/Button#button-with-menu

In inline code editor use this code

const button2 = new Button({
    text     : 'Settings button',
    icon     : 'b-fa-cog',
    appendTo : targetElement,
    style    : 'margin-left:1em',
    menu     : {
        items : [
            {
                type   : 'datepicker'
            }
        ]
    }
});

All the best,
Alex


Post by Animal »

In fact, why nest it?

Just

menu : {
    type : 'datePicker'
}

Post by rakshith.snps »

Hi Bryntnum team,
Thanks for helping,
We can see a date picker when we click on the menu button.
But the functionality and scrolling/position seems unnatural.

tbar: [
          {
            type: 'button',
            name: 'start-date-picker',
            icon: 'b-fa-chart',
            iconAlign: 'end',
            text: 'Start-Date-Picker',
            menu: {
              type: 'datepicker',
            },
            weight: 650,
          },
          {
            type: 'button',
            name: 'start-date-picker',
            icon: 'b-fa-chart',
            iconAlign: 'end',
            text: 'End-Date-Picker',
            menu: {
              type: 'datepicker',
            },
            weight: 650,
          },
        ],

Demo

demoForDatePicker.gif
demoForDatePicker.gif (4.44 MiB) Viewed 503 times

Could you guide us in this aspect?
Thank you for your continued support!


Post Reply