I have 2 controls:
DatePicker: For Date Only
TextBox with TimeMask: For Time Only
They are both linked to the same property DateTime EffectiveDate
But the problem is when I change the Date on the DatePicker, it changes the Time in the TimeTextBox back to 12:00.
I understand the reason for it, but what best solution is out there to let these work separately but bound to the same property?
I have tried to take the current time and build a new Date in the set property but always end up with overflow errors.
You can use a value converter to hold on to the value
public class DateConverter : IValueConverter
{
private DateTime timePickerDate;
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
timePickerDate = ((DateTime)(value));
return value;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value == null) return timePickerDate;
var datePickerDate = ((DateTime)(value));
// compare relevant parts manually
if (datePickerDate.Hour != timePickerDate.Hour
|| datePickerDate.Minute != timePickerDate.Minute
|| datePickerDate.Second != timePickerDate.Second)
{
// correct the date picker value
var result = new DateTime(datePickerDate.Year,
datePickerDate.Month,
datePickerDate.Day,
timePickerDate.Hour,
timePickerDate.Minute,
timePickerDate.Second);
// return, because this event handler will be executed a second time
return result;
}
return datePickerDate;
}
}
And have the two controls in question bind to the one property but have the date picker use the converter to not override the time.
<Grid Margin="10,5" >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<sdk:DatePicker Grid.Column="0" TabIndex="1" Padding="0" SelectedDate="{Binding EffectiveDate, Mode=TwoWay, Converter={StaticResource DateConverter}}" SelectedDateFormat="Short"/>
<toolkit:TimePicker Grid.Column="1" Value="{Binding EffectiveDate, Mode=TwoWay}" Margin="0" Padding="0" HorizontalAlignment="Left" TabIndex="2" />
</Grid>
You could do something like this:
private DateTime _effectiveDate;
...
public DateTime DateOfEffectiveDate
{
get { return _effectiveDate; }
set
{
_effectiveDate = new DateTime(value.Year, value.Month, value.Day, _effectiveDate.Hour, _effectiveDate.Minute, _effectiveDate.Second);
}
}
public DateTime TimeOfEffectiveDate
{
get { return _effectiveDate; }
set
{
_effectiveDate = new DateTime(_effectiveDate.Year, _effectiveDate.Month, _effectiveDate.Day, value.Hour, value.Minute, value.Second);
}
}
The built-in DatePicker control selects only a date without any specific time so I am afraid it makes no sense to try to display the time of the selected date in a TextBox. The DatePicker will effectively clear out the time part each time a new date is selected. This is how the control works.
So you should bind the DatePicker and the TextBox to two different source properties, a DateTime?
and a TimeSpan
respectively.
The other option would be to use another control that selects a date and a time, for example this one: http://wpftoolkit.codeplex.com/wikipage?title=DateTimePicker
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With