This is a migrated thread and some comments may be shown as answers.

Only able to set Date by the picker

4 Answers 178 Views
DateTimePicker
This is a migrated thread and some comments may be shown as answers.
Kevin Hendriks
Top achievements
Rank 1
Kevin Hendriks asked on 21 Jan 2011, 11:05 AM
I want the user to only be able to set the data by clicking on the calander itself and the textbox that displays the text to be readonly.

If I set the control to IsReadOnly then  the whole onctrol does not set the data so that will not work. I also could not find a property with wich I can set this behavior.

4 Answers, 1 is accepted

Sort by
0
Accepted
Kaloyan
Telerik team
answered on 21 Jan 2011, 02:38 PM
Hi Kevin Hendriks,

You have to modify the template of the control and set the WaterMarkedTextBox to a readonly:

<Style x:Key="RadDateTimePickerStyle1" TargetType="{x:Type telerik:RadDateTimePicker}">
    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="KeyboardNavigation.TabNavigation" Value="Once" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="TooltipTemplate">
        <Setter.Value>
            <DataTemplate>
                <Border BorderBrush="#FF848484" BorderThickness="1" CornerRadius="2" Margin="0,2">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="White" Offset="0" />
                            <GradientStop Color="#FFDEDEDE" Offset="1" />
                        </LinearGradientBrush>
                    </Border.Background>
                    <Border BorderBrush="Transparent" BorderThickness="1" CornerRadius="1">
                        <ContentControl Content="{Binding}" Foreground="Black" Margin="5,2" />
                    </Border>
                </Border>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Background" Value="White" />
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="BorderBrush" Value="#FF848484" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="FontStyle" Value="Normal" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="MinHeight" Value="22" />
    <Setter Property="Padding" Value="4,2" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="DateTimeWatermarkTemplate">
        <Setter.Value>
            <DataTemplate>
                <TextBlock Opacity="0.5" Text="{Binding}" />
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type telerik:RadDateTimePicker}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Border x:Name="BackgroundVisual" BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}" Grid.ColumnSpan="2"
                            CornerRadius="1" />
                    <Border x:Name="MouseOverVisual" BorderBrush="#FFFFC92B"
                            BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2"
                            CornerRadius="1" IsHitTestVisible="False" Opacity="0"
                            Visibility="Collapsed" />
                    <telerik:RadWatermarkTextBox x:Name="PART_DateTimeInput" BorderBrush="{x:Null}"
                            BorderThickness="0" Background="{x:Null}" Grid.Column="0"
                            CurrentText="{Binding CurrentDateTimeText, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                            Margin="{TemplateBinding BorderThickness}" MinHeight="0"
                            Padding="{TemplateBinding Padding}" SelectionOnFocus="SelectAll"
                            TextAlignment="{TemplateBinding TextAlignment}"
                            Text="{Binding DateTimeText, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                            TabIndex="0" VerticalAlignment="Stretch"
                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                            WatermarkTemplate="{TemplateBinding DateTimeWatermarkTemplate}"
                            WatermarkContent="{TemplateBinding DateTimeWatermarkContent}"
                            IsReadOnly="True">
                        <telerik:StyleManager.Theme>
                            <telerik:Office_BlackTheme />
                        </telerik:StyleManager.Theme>
                    </telerik:RadWatermarkTextBox>
                    <Border x:Name="FocusVisual" BorderBrush="#FFFFC92B"
                            BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2"
                            CornerRadius="1" IsHitTestVisible="False" Visibility="Collapsed">
                        <Border BorderBrush="Transparent"
                                BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" />
                    </Border>
                    <telerik:RadDropDownButton x:Name="PART_DropDownButton" CloseOnEnter="True"
                            Grid.Column="1" DropDownIndicatorVisibility="Collapsed"
                            Focusable="False"
                            telerik:DateTimePickerExtensions.FocusContentOnOpen="True"
                            HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"
                            IsTabStop="False"
                            IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                            Margin="-1,0,0,0" Padding="0"
                            PopupPlacementTarget="{Binding ElementName=PART_DateTimeInput}"
                            TabIndex="1" VerticalAlignment="Stretch"
                            VerticalContentAlignment="Stretch">
                        <telerik:RadDropDownButton.DropDownContent>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition />
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <telerik:RadCalendar x:Name="PART_Calendar"
                                        Culture="{TemplateBinding Culture}" Grid.Column="0"
                                        DisplayDateEnd="{Binding DisplayDateEnd, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                        DateSelectionMode="{TemplateBinding DateSelectionMode}"
                                        DisplayDateStart="{Binding DisplayDateStart, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                        DisplayDate="{Binding DisplayDate, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                        IsReadOnly="{TemplateBinding IsReadOnly}" Grid.Row="0"
                                        Style="{TemplateBinding CalendarStyle}"
                                        SelectableDateEnd="{Binding SelectableDateEnd, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                        SelectionMode="Single"
                                        SelectedDate="{Binding SelectedDate, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                        SelectableDateStart="{Binding SelectableDateStart, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                                    <telerik:StyleManager.Theme>
                                        <telerik:Office_BlackTheme />
                                    </telerik:StyleManager.Theme>
                                </telerik:RadCalendar>
                                <telerik:DateTimePickerClock x:Name="PART_Clock"
                                        Culture="{TemplateBinding Culture}" Grid.Column="1"
                                        EndTime="{TemplateBinding EndTime}" Header="Clock"
                                        IsReadOnly="{TemplateBinding IsReadOnly}" Grid.Row="0"
                                        Style="{TemplateBinding ClockStyle}"
                                        SelectedTime="{Binding SelectedTime, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                        StartTime="{TemplateBinding StartTime}"
                                        TimeInterval="{Binding TimeInterval, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                                    <telerik:StyleManager.Theme>
                                        <telerik:Office_BlackTheme />
                                    </telerik:StyleManager.Theme>
                                </telerik:DateTimePickerClock>
                                <Border x:Name="CloseButtonContainer" BorderBrush="#FF848484"
                                        BorderThickness="1,0,1,1" Background="White"
                                        Grid.ColumnSpan="2" Grid.Row="1">
                                    <Border BorderBrush="Transparent" BorderThickness="1,0,1,1">
                                        <telerik:RadToggleButton x:Name="PART_Close" Content="Close"
                                                HorizontalAlignment="Right" IsThreeState="False"
                                                IsBackgroundVisible="False"
                                                IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                                Margin="2" Padding="8,3">
                                            <telerik:RadToggleButton.Style>
                                                <Style TargetType="{x:Type telerik:RadToggleButton}">
                                                    <Setter Property="Template">
                                                        <Setter.Value>
                                                            <ControlTemplate
                                                                    TargetType="{x:Type telerik:RadToggleButton}">
                                                                <Grid>
                                                                    <Telerik_Windows_Controls_Chromes:ButtonChrome
                                                                            RenderNormal="False"
                                                                            RenderMouseOver="{TemplateBinding IsMouseOver}"
                                                                            RenderPressed="{TemplateBinding IsPressed}">
                                                                        <telerik:StyleManager.Theme>
                                                                            <telerik:Office_BlackTheme />
                                                                        </telerik:StyleManager.Theme>
                                                                    </Telerik_Windows_Controls_Chromes:ButtonChrome>
                                                                    <ContentPresenter
                                                                            ContentTemplate="{TemplateBinding ContentTemplate}"
                                                                            Content="{TemplateBinding Content}"
                                                                            ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                                                            Margin="{TemplateBinding Padding}" />
                                                                </Grid>
                                                            </ControlTemplate>
                                                        </Setter.Value>
                                                    </Setter>
                                                </Style>
                                            </telerik:RadToggleButton.Style>
                                        </telerik:RadToggleButton>
                                    </Border>
                                </Border>
                            </Grid>
                        </telerik:RadDropDownButton.DropDownContent>
                        <telerik:StyleManager.Theme>
                            <telerik:Office_BlackTheme />
                        </telerik:StyleManager.Theme>
                        <telerik:RadDropDownButton.Template>
                            <ControlTemplate TargetType="{x:Type telerik:RadDropDownButton}">
                                <Grid>
                                    <ContentPresenter
                                            ContentTemplate="{TemplateBinding ContentTemplate}"
                                            Content="{TemplateBinding Content}"
                                            ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            Margin="{TemplateBinding Padding}"
                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                    <Popup x:Name="DropDownPopup" AllowsTransparency="True"
                                            Focusable="False"
                                            IsOpen="{Binding IsOpen, RelativeSource={RelativeSource TemplatedParent}}"
                                            Placement="Bottom" StaysOpen="False">
                                        <ContentPresenter x:Name="DropDownPopupContent"
                                                ContentTemplate="{TemplateBinding DropDownContentTemplate}"
                                                Content="{TemplateBinding DropDownContent}" />
                                    </Popup>
                                </Grid>
                            </ControlTemplate>
                        </telerik:RadDropDownButton.Template>
                        <Grid>
                            <Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="ButtonChrome"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    CornerRadius="0,1,1,0"
                                    RenderMouseOver="{Binding IsMouseOver, ElementName=PART_DropDownButton}"
                                    RenderFocused="{TemplateBinding IsKeyboardFocusWithin}"
                                    RenderActive="{TemplateBinding IsMouseOver}"
                                    RenderEnabled="{TemplateBinding IsEnabled}">
                                <telerik:StyleManager.Theme>
                                    <telerik:Office_BlackTheme />
                                </telerik:StyleManager.Theme>
                            </Telerik_Windows_Controls_Chromes:ButtonChrome>
                            <ContentControl x:Name="DropDownIcon" Background="White"
                                    Foreground="Black" IsTabStop="False" Margin="4,0">
                                <ContentControl.Template>
                                    <ControlTemplate TargetType="{x:Type ContentControl}">
                                        <Grid>
                                            <Path x:Name="CalendarIconBackground"
                                                    Data="M0,0.5L7,0.5 M0,2.5L7,2.5 M0,4.5L7,4.5 M0,6.5L7,6.5 M0.5,0L0.5,7 M2.5,0L2.5,7 M4.5,0L4.5,7 M6.5,0L6.5,7"
                                                    Height="7" Margin="0,1,0,0"
                                                    Stroke="{TemplateBinding Background}" Width="7" />
                                            <Path x:Name="CalendarIconForeground"
                                                    Data="M0,0.5L7,0.5 M0,2.5L7,2.5 M0,4.5L7,4.5 M0,6.5L7,6.5 M0.5,0L0.5,7 M2.5,0L2.5,7 M4.5,0L4.5,7 M6.5,0L6.5,7"
                                                    Height="7" Margin="0,0,0,1"
                                                    Stroke="{TemplateBinding Foreground}" Width="7" />
                                        </Grid>
                                    </ControlTemplate>
                                </ContentControl.Template>
                            </ContentControl>
                        </Grid>
                    </telerik:RadDropDownButton>
                    <Popup x:Name="PART_InputPopup" AllowsTransparency="True"
                            telerik:PopupExtensions.IsOpen="{Binding IsTooltipOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                            telerik:PopupExtensions.Owner="{Binding RelativeSource={RelativeSource TemplatedParent}}"
                            Placement="Top" telerik:PopupExtensions.Placement="Top"
                            telerik:PopupExtensions.PlacementTarget="{Binding ElementName=PART_DateTimeInput}"
                            StaysOpen="False">
                        <ContentPresenter ContentTemplate="{TemplateBinding TooltipTemplate}"
                                Content="{TemplateBinding TooltipContent}" />
                    </Popup>
                </Grid>
                <ControlTemplate.Triggers>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsEnabled" Value="True" />
                            <Condition Property="IsMouseOver" Value="True" />
                        </MultiTrigger.Conditions>
                        <MultiTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames
                                            Storyboard.TargetProperty="Opacity"
                                            Storyboard.TargetName="MouseOverVisual">
                                        <LinearDoubleKeyFrame KeyTime="0:0:0.115" Value="1" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetProperty="Visibility"
                                            Storyboard.TargetName="MouseOverVisual">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </MultiTrigger.EnterActions>
                        <MultiTrigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames
                                            Storyboard.TargetProperty="Opacity"
                                            Storyboard.TargetName="MouseOverVisual">
                                        <LinearDoubleKeyFrame KeyTime="0:0:0.15" Value="0" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetProperty="Visibility"
                                            Storyboard.TargetName="MouseOverVisual">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.15">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </MultiTrigger.ExitActions>
                        <Setter Property="Foreground" TargetName="DropDownIcon" Value="Black" />
                        <Setter Property="Background" TargetName="DropDownIcon" Value="White" />
                    </MultiTrigger>
                    <Trigger Property="IsDropDownOpen" Value="True">
                        <Setter Property="Foreground" TargetName="DropDownIcon" Value="Black" />
                        <Setter Property="Background" TargetName="DropDownIcon" Value="White" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="BorderBrush" TargetName="BackgroundVisual"
                                Value="#FF989898" />
                        <Setter Property="Opacity" TargetName="MouseOverVisual" Value="0" />
                        <Setter Property="Visibility" TargetName="MouseOverVisual" Value="Collapsed" />
                        <Setter Property="Foreground" TargetName="PART_DateTimeInput"
                                Value="#FF8D8D8D" />
                        <Setter Property="Foreground" TargetName="DropDownIcon" Value="#FF8D8D8D" />
                        <Setter Property="Background" TargetName="DropDownIcon" Value="White" />
                    </Trigger>
                    <Trigger Property="IsKeyboardFocusWithin" Value="True">
                        <Setter Property="Visibility" TargetName="FocusVisual" Value="Visible" />
                    </Trigger>
                    <Trigger Property="InputMode" Value="DatePicker">
                        <Setter Property="Visibility" TargetName="PART_Clock" Value="Collapsed" />
                        <Setter Property="Visibility" TargetName="CloseButtonContainer"
                                Value="Collapsed" />
                    </Trigger>
                    <Trigger Property="InputMode" Value="TimePicker">
                        <Setter Property="Visibility" TargetName="PART_Calendar" Value="Collapsed" />
                        <Setter Property="Visibility" TargetName="CloseButtonContainer"
                                Value="Collapsed" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>


Greetings,
Kaloyan
the Telerik team
Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
0
Mark
Top achievements
Rank 1
answered on 08 Jan 2013, 07:11 PM
I have the same problem as Kevin.  Is Kaloyan's 1/21/2011 solution still the only solution for this problem?

Update: I just tried Kaloyan's solution. It prevents the user from entering text into the input box.  But it also prevents the selected date from the drop down calendar from being saved in SelectedValue which is what I want. 
0
Alek
Telerik team
answered on 11 Jan 2013, 02:08 PM
Hi Mark,

You can edit the control template using the Implicit Styles too.

You can find two projects attached using both approaches - Kaloyan's (which you've already tried) and with Implicit Styles. In both the selected date chosen from the drop down menu is correctly saved in the SelectedValue property. 

Please, take a look over the examples and the attached video in case we've missed something important.

All the best,
Alek
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Mark
Top achievements
Rank 1
answered on 13 Jan 2013, 05:39 PM
Thank you Alex. Both solutions in your example work.  

I see now why Kaloyan's solution did not work for me.  It references some namespaces that I did not define with xmlns:  
Tags
DateTimePicker
Asked by
Kevin Hendriks
Top achievements
Rank 1
Answers by
Kaloyan
Telerik team
Mark
Top achievements
Rank 1
Alek
Telerik team
Share this question
or