[INFO REQ] Date Pickers posistion change
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.
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!