Bryntum Support Forums

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.

Hi rakshith.snps,

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

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.

but we want the date range picker somewhere like this

how can we achieve this . Thank you.

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

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

You can't just re-use that component with all behaviour in another place, but you can basically add items into tbar and add behaviour you want.
Required docs information:
https://bryntum.com/products/gantt/docs/api/Gantt/view/Gantt#config-tbar
https://bryntum.com/products/gantt/docs/api/Core/widget/Button#button-with-menu
https://bryntum.com/products/scheduler/docs/api/Core/widget/DatePicker
https://bryntum.com/products/scheduler/docs/api/Core/widget/DatePicker#multi-selection
https://bryntum.com/products/gantt/docs/api/Gantt/view/Gantt#event-dateRangeChange
https://bryntum.com/products/scheduler/docs/api/Core/widget/DatePicker#event-selectionChange

Or add 2 separate date pickers with single select mode to capture start and end date using same events I provided above.

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
    },
  },
});

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'
            }
        ]
    }
});

In fact, why nest it?

Just

menu : {
    type : 'datePicker'
}

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

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