Only able to set Date by the picker

[Kevin Hendriks]

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.

[Kaloyan]

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

[Mark]

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. 

[Alek]

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

[Mark]

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: