WPF Extended Toolkit DateTimePicker Dates validation - wpf

I have a scenario I can't figure out how to implement.
I want to validate that from date is less than the to date in my MVVM based WPF application. I am using the DateTimePicker control .
<StackPanel Orientation="Horizontal" Margin="5,2,5,2">
<TextBlock Text="From Date: " />
<xctk:DateTimePicker x:Name="FromDatePicker"
AutoCloseCalendar="True"
Width="200"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Value="{Binding FromDate, Mode=TwoWay}"
Format="Custom"
FormatString="dd-MMM-yy HH:mm"
TimeFormat="Custom"
TimeFormatString="HH:mm"
ToolTip="From Date">
</xctk:DateTimePicker>
<TextBlock Text="To Date: " />
<xctk:DateTimePicker x:Name="ToDatePicker"
AutoCloseCalendar="True"
Width="200"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Value="{Binding ToDate, Mode=TwoWay}"
Format="Custom"
FormatString="dd-MMM-yy HH:mm"
TimeFormat="Custom"
TimeFormatString="HH:mm" TimeWatermark="Please select time"
ToolTip="To Date"/>
</StackPanel>
Can someone give me a hint on how to validate that the to date is greater than the from date?

There are a number of ways to perform your validation. You can do it via the bound property setters that change when the value in the DateTimePicker controls value's change. Or if you have a button that is wired up to a Command binding in your model you can do the validation there as well...

Related

Silverlight 4: Dispatcher-error when using Calendar or DatePicker

I read so many good answers on this site, so I never had to ask something.
Now I have a problem I cant find a answer. I'm programming a Windows App für 7.1 and try to use a Calendar Control, I dont care that much if its Calendar or DatePicker.
But whenever I change the value there, I get the following error:
"This type of Collection does not support changes to its SourceCollection from a thread different from the Dispatcher thread."
Since im quite beginner, I dont do anything fancy with Threads and I didnt find anything about this error in the web, so I guess, this must be a unique error at my environment.
Has anyone a idea, where this error can come from?
Thanks for your responses
Müller Matthias
You should use DatePicker from SDK namespace,
http://samples.msdn.microsoft.com/silverlight/samplebrowser/#/?sref=System.Windows.Controls.Calendar
I can also suggest Telerik's silverlight controls
http://demos.telerik.com/silverlight/
<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="CalendarExample.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
FontFamily="Trebuchet MS" FontSize="11"
Width="600" Height="750">
<StackPanel x:Name="LayoutRoot" Background="White">
<StackPanel Orientation="Horizontal" Margin="5" >
<!-- A basic Calendar. -->
<TextBlock Width="100"
Text="Calendar with date ranges defined:" TextWrapping="Wrap" Margin="5" />
<sdk:Calendar x:Name="cal" />
<!-- A Calendar does not highlight today's date. -->
<TextBlock Width="100"
Text="Calendar that does not highlight today's date:" TextWrapping="Wrap" Margin="5"/>
<sdk:Calendar x:Name="cal2" Canvas.Left="270" Canvas.Top="100"
IsTodayHighlighted="false" />
</StackPanel>
<!-- Two DatePicker controls, one using the default Short date format -->
<!-- and the other using the Long date format. -->
<StackPanel Orientation="Horizontal" >
<TextBlock Width="200" Margin="5"
Text="DatePicker with Short date format and Calendar event handlers:" TextWrapping="Wrap" />
<sdk:DatePicker x:Name="dp1" Height="20" Width="200" />
</StackPanel>
<StackPanel Orientation="Horizontal" >
<TextBlock Width="200" Margin="5"
Text="DatePicker with Long date format and DateSelected event handler:" TextWrapping="Wrap" />
<sdk:DatePicker Height="20" x:Name="dp2" SelectedDateFormat="Long" Width="200"/>
</StackPanel>
<!-- Output TextBlock -->
<TextBlock x:Name="text1" HorizontalAlignment="Left" Height="40" Width="350" Margin="5" />
<!-- A Calendar to demonstrate multiple selection. -->
<StackPanel Orientation="Horizontal" >
<TextBlock Width="200" Margin="5"
Text="Calendar with multiple selections and blackout dates:" TextWrapping="Wrap" />
<sdk:Calendar x:Name="cal3" />
</StackPanel>
</StackPanel>

ReadOnly DatePicker in silverlight

I am making an application in Silverlight 3.0. In that application i am using DatePicker control as
<TextBlock FontSize="13" Height="23" Name="txtFromDate" Text="FromDate" Width="40" Canvas.Left="444" Canvas.Top="6" />
<controls:DatePicker Name="fromdatePicker" Height="23" Width="110" Canvas.Left="550" Canvas.Top="4" />
Here i don't want to enter date manually(Means the textblock txtFromDate should be read only.)And the value in text block will be whatever date is selected from calender. I am not getting how to do it? Please help me.Thanks in advance.
Assuming you're using a nice MVVM approach:
Bind the SeletectedDate of your date picker to a DateTime property of your ViewModel (two-way binding):
<sdk:DatePicker SelectedDate="{Binding MyDate, Mode=TwoWay}"/>
Bind the Text property of your TextBlock to the same property:
<TextBlock Text="{Binding MyDate}" />

WPF Telerik RadGridView - compare startDatePicker EndDatePicker and display error if there is one

I have the current code where 2 DatePicker are in a templeted cells of a RadGridView.
<telerik:RadGridView AutoExpandGroups="True" AutoGenerateColumns="False" ColumnWidth="Auto" HorizontalAlignment="Left"
ItemsSource="{Binding entries, Mode=TwoWay}" Name="gridControl1" VerticalAlignment="Top"
RowIndicatorVisibility="Collapsed">
<telerik:RadGridView.Columns>
<telerik:GridViewDataColumn Width="0.2*" DataFormatString="{}{0:M/yyyy}" Header="{my:LocString ResourceKey=EntitySheet_OwnerShip_DisplayStartDate}" SortingState="Ascending">
<telerik:GridViewColumn.CellTemplate>
<DataTemplate>
<DatePicker x:Name="StartDateTimePicker" SelectedValue="{Binding StartDate,Mode=TwoWay, ValidatesOnDataErrors=True, NotifyOnValidationError=True,UpdateSourceTrigger=LostFocus}"/>
</DataTemplate>
</telerik:GridViewColumn.CellTemplate>
</telerik:GridViewDataColumn>
<telerik:GridViewDataColumn Width="0.2*" DataFormatString="{}{0:M/yyyy}" Header="{my:LocString ResourceKey=EntitySheet_OwnerShip_DisplayEndDate}" SortingState="Ascending">
<telerik:GridViewColumn.CellTemplate>
<DataTemplate>
<DatePicker x:Name="StartDateTimePicker" SelectedValue="{Binding EndDate,Mode=TwoWay, ValidatesOnDataErrors=True, NotifyOnValidationError=True,UpdateSourceTrigger=PropertyChanged}" />
</DataTemplate>
</telerik:GridViewColumn.CellTemplate>
</telerik:GridViewDataColumn>
</telerik:RadGridView.Columns>
<i:Interaction.Triggers>
<i:EventTrigger EventName="PropertyChanged">
<cmd:EventToCommand Command="{Binding Path=ValidateStartDateCommand, Mode=OneWay}" CommandParameter="{Binding SelectedItem, ElementName=gridControl1}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</telerik:RadGridView>
I want to compare the startDate with the endDate and display an error if endDate < startDate when the focus is lost on one of the fields but no events is raised (event are raised on other columns).
How I should do to raise an event permiting me to get the new values of the edited row and compare them?
Thank you in advance
Have you tried implementing the IDataErrorInfo interface on your ViewModel (assuming you are using MVVM) or whatever other class you are binding your datagrid to. Implementing that interface should allow you to write the validation code in the indexer to give you the desired results.
Hope this helps out a bit.

Formatting the date in the DatePicker control within a Silverlight DataForm

This is driving me nuts!
I have a RIA Services driven dataform in silverlight which contains a datepicker control. I want to display the date in ddMMMyyyy format. Here is a sample of the xaml:
<dataFormToolkit:DataForm x:Name="dataForm" AutoGenerateFields="False">
<dataFormToolkit:DataForm.EditTemplate>
<DataTemplate>
<StackPanel>
<dataFormToolkit:DataField Label="First Name">
<TextBox Text="{Binding PE_FIRST_NAME, Mode=TwoWay}"/>
</dataFormToolkit:DataField>
<dataFormToolkit:DataField Label="Surname">
<TextBox Text="{Binding PE_SURNAME_NAME,Mode=TwoWay}"/>
</dataFormToolkit:DataField>
<dataFormToolkit:DataField Label="Department">
<ComboBox x:Name="cboDepartment" DisplayMemberPath="CC_NAME" SelectedValuePath="CC_ID" SelectedValue="{Binding Path=CC_ID, Mode=TwoWay}"/>
</dataFormToolkit:DataField>
<dataFormToolkit:DataField Label="Start Date">
<controls:DatePicker Text="{Binding PE_START_DATE, Mode=TwoWay}"/>
</dataFormToolkit:DataField>
</StackPanel>
</DataTemplate>
</dataFormToolkit:DataForm.EditTemplate>
</dataFormToolkit:DataForm>
</StackPanel>
I have followed the advice given in
How to change date format in Silverlight DatePicker control?
and added the following lines to my App startup:
Thread.CurrentThread.CurrentCulture = (CultureInfo)Thread.CurrentThread.CurrentCulture.Clone();
Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortDatePattern = "ddMMMyyyy";
but it doesn't make any difference, the date always comes out in its raw format, e.g. 1/3/2006 12:00AM
Is there some reason why the current culture is not working in a dataform?
Update: If I implement the same form the hard way by not using a dataform then the date is in the correct format!
controls:DatePicker Text="{Binding PE_START_DATE, Mode=TwoWay, StringFormat='d'}"
You only have to add to the binding a StringFormat='MM/dd/yyyy' attribute.
<TextBox IsReadOnly="True" TextAlignment="Center" Text="{Binding AlbumDate, StringFormat='MM/dd/yyyy'}" />

Label Target="{Binding ElementName=UIName}" bug, or is it just me?

I've been tring to get this example to work, but there seems to be a bug in the code Label Target code, in that when you click on the second label the focus is set to the DatePicker rather than the TextBox, regardless which label you click first, also when you have entered the date the second label still sets it focus to DatePicker.
<!-- Unbound Date of Birth field -->
<sdk:Label Content="Date of Birth" IsRequired="True" Margin="5" />
<StackPanel Orientation="Horizontal" Grid.Column="1">
<sdk:DatePicker Height="23" />
<sdk:DescriptionViewer Description="Please enter your date of birth."/>
</StackPanel>
<!-- ID Number field -->
<sdk:Label Grid.Row="1" Margin="5" Target="{Binding ElementName=tbIdNumber}" />
<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="1">
<TextBox x:Name="tbIdNumber" Height="23" Width="100"
Text="{Binding IdNumber, Mode=TwoWay,
ValidatesOnExceptions=True, NotifyOnValidationError=True}" />
<sdk:DescriptionViewer Target="{Binding ElementName=tbIdNumber}"/>
</StackPanel>
I found this example here on the MSDN link text. To me this seems to be a bug, or am I just losing it?
Apologies if this is a duplicate question... I have googled this and all the examples seem to be the same, in that the target element is not being focused to.
It seems a reasonable assumption that clicking the label ought to move the focus to the associated control. However the Label does not actually provide that function.

Resources