Comments (10)
Hi,
you can use <DateRangePicker LinkedCalendars="true" />
to achieve that behavior.
from blazordaterangepicker.
the calendars always display current & next/prior month. How do I get both calendars to display the same month? ie. I want the left calendar to display 10/1/20 and the right calendar to display 10/15/20.
AlwaysShowCalendars="true" AutoAdjustCalendars="false" LinkedCalendars="true" ShowOnlyOneCalendar="false" SingleDatePicker="false"
from blazordaterangepicker.
Ok, I got it now. So, to achieve that behavior, you'll need to:
- Change calendar month when other month is changed,
- Modify css to meet your requirements,
- Modify day click handler.
Something like that:
<style>
.daterangepicker td.in-range {
background-color: transparent;
}
.left td.end-date,
.right td.start-date {
background-color: transparent;
color: black;
}
.start-date.end-date,
.left td.start-date,
.right td.end-date {
background-color: #357ebd !important;
color: white !important;
}
.left .end-date.active:hover,
.right .start-date.active:hover {
background-color: transparent;
color: black;
}
</style>
<DateRangePicker @ref="Picker" AutoAdjustCalendars="false" OnMonthChanged="MonthChanged" />
@code {
DateRangePicker Picker { get; set; }
DateTimeOffset? LeftMonth { get; set; }
DateTimeOffset? RightMonth { get; set; }
private void MonthChanged()
{
if (LeftMonth != Picker.LeftCalendar.Month)
{
var rightMonth = Picker.RightCalendar.GetType().GetProperty("Month");
rightMonth.SetValue(Picker.RightCalendar, Picker.LeftCalendar.Month);
}
else if (RightMonth != Picker.RightCalendar.Month)
{
var leftMonth = Picker.LeftCalendar.GetType().GetProperty("Month");
leftMonth.SetValue(Picker.LeftCalendar, Picker.RightCalendar.Month);
}
UpdateClickHandlers(Picker.RightCalendar, SideType.Right);
UpdateClickHandlers(Picker.LeftCalendar, SideType.Left);
LeftMonth = Picker.LeftCalendar.Month;
RightMonth = Picker.RightCalendar.Month;
}
private void UpdateClickHandlers(CalendarType calendarType, SideType side)
{
var calendar = calendarType.GetType()
.GetProperty("Calendar",
System.Reflection.BindingFlags.NonPublic
| System.Reflection.BindingFlags.Instance)
.GetValue(calendarType);
foreach (var row in (List<List<CalendarItem>>)calendar)
{
foreach (var day in row)
{
var dayClick = day.Click;
day.Click = () =>
{
if (side == SideType.Right && !Picker.TEndDate.HasValue)
{
if (day.Day > Picker.TStartDate) dayClick.Invoke();
}
else if (side == SideType.Left)
{
Picker.TStartDate = null;
Picker.TEndDate = null;
dayClick.Invoke();
}
};
}
}
}
}
from blazordaterangepicker.
this is looking really good. It looks like the 2 calendars are still linked in a way? the month selection/arrow controls both calendars/month drop downs. in addition to defaulting the left calendar to 1 date in a month, and the right calendar to another date in the same month, I'd also like the ability to cross months. can this component support that kind of functionality? thanks for all your input on this. really appreciate it.
from blazordaterangepicker.
Yes, the calendars is linked by this code:
DateTimeOffset? LeftMonth { get; set; }
DateTimeOffset? RightMonth { get; set; }
private void MonthChanged()
{
if (LeftMonth != Picker.LeftCalendar.Month)
{
var rightMonth = Picker.RightCalendar.GetType().GetProperty("Month");
// Here we set the right month when the left is changed
rightMonth.SetValue(Picker.RightCalendar, Picker.LeftCalendar.Month);
}
else if (RightMonth != Picker.RightCalendar.Month)
{
var leftMonth = Picker.LeftCalendar.GetType().GetProperty("Month");
// Here we set the left month when the right is changed
leftMonth.SetValue(Picker.LeftCalendar, Picker.RightCalendar.Month);
}
LeftMonth = Picker.LeftCalendar.Month;
RightMonth = Picker.RightCalendar.Month;
}
Just remove this code and the calendars will not be linked in any way.
from blazordaterangepicker.
I've tried that, however, once removed, both calendars won't display the same month at the same time.
from blazordaterangepicker.
Did you try it with AutoAdjustCalendars="false"
or AutoAdjustCalendars="true"
?
from blazordaterangepicker.
And you can set initially selected months in the MonthChanged
method like that:
DateTimeOffset? Month { get; set; }
private void MonthChanged()
{
if (!Month.HasValue)
{
Month = DateTimeOffset.Now.AddDays(-100);
var rightMonth = Picker.RightCalendar.GetType().GetProperty("Month");
rightMonth.SetValue(Picker.RightCalendar, Month.Value);
var leftMonth = Picker.LeftCalendar.GetType().GetProperty("Month");
leftMonth.SetValue(Picker.LeftCalendar, Month.Value);
}
}
from blazordaterangepicker.
I think I finally found a combination of settings I needed.
AlwaysShowCalendars="true" AutoAdjustCalendars="true" LinkedCalendars="false" ShowOnlyOneCalendar="false" SingleDatePicker="false" StartDate="ReportStartingDate" EndDate="ReportEndingDate"
thanks for all of your input. Now I need to figure out if your component can be used to select month (Jan-Dec) and quarters (1-4).
from blazordaterangepicker.
Now I need to figure out if your component can be used to select month (Jan-Dec) and quarters (1-4).
No, it's not, sorry. But there is other components with this functionality.
from blazordaterangepicker.
Related Issues (20)
- Use a ButtonsTemplate with AutoApply=true HOT 2
- Config doesn't work HOT 2
- support other Calendares like PersianCalendar
- Can not bind Date Value HOT 1
- Range of one day
- Ambiguity PickerTemplate in an EditForm HOT 1
- One start date HOT 2
- disable property HOT 1
- Make sure Calendar is always visible
- add Propertie "yearShowLeft" HOT 1
- single picker and buttons not visible HOT 1
- Disable date without data HOT 2
- Show dateTimePicker on click image HOT 1
- Single select HOT 2
- Date picker hided on mobile HOT 1
- Does not change DateFormat, TimePicker24Hour and WeekOfDay on Culture change HOT 2
- TimePicker24Hour has wrong value and HoursRange is not refreshed if culture changes HOT 1
- Visual Studio 2022 .NET 8 intellisense error HOT 3
- Display wrong month when click button previous month HOT 3
- Awesome - Just wanna say thank your for providing that Component
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blazordaterangepicker.