DatePicker 高级版实现（支持时分秒选择）

最新推荐文章于 2024-04-06 00:30:00 发布
最新推荐文章于 2024-04-06 00:30:00 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： WPF C# 文章标签： c# wpf .net
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41045657/article/details/121134415
版权
C# 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
WPF
11 篇文章 0 订阅
订阅专栏

DatePicker 高级版本实现（支持时分秒选择）


WPF 自带日期控件功能太差了，而且Calendar是不可以继承的，思而再三，手撸一个

实现效果

在这里插入图片描述

在这里插入图片描述

DatePicker.XAML

中间穿插了几个自定义扩展样式（相对比较简单，自行实现）

    <ControlTemplate x:Key="IMS.ControlTemplate.DatePick" TargetType="{x:Type DatePicker}">
        <Grid x:Name="PART_Root">
            <Border
                x:Name="Bg"
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                CornerRadius="{TemplateBinding ims:IMSAttach.CornerRadius}"
                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
            <Grid x:Name="PART_InnerGrid" Margin="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <ContentControl
                    x:Name="Label"
                    Margin="1"
                    Content="{TemplateBinding ims:TitleAttach.Title}"
                    IsHitTestVisible="False"
                    IsTabStop="False"
                    Template="{TemplateBinding ims:TitleAttach.TitleTemplate}" />

                <Border Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center">
                    <ContentControl
                        x:Name="PART_AttachContent"
                        VerticalAlignment="Center"
                        VerticalContentAlignment="Center"
                        Foreground="{DynamicResource IMS.Brush.Text.Gray}"
                        Template="{TemplateBinding ims:IMSAttach.AttachContent}" />
                </Border>
                
                <ToggleButton
                    x:Name="PART_DropDownToggle"
                    Grid.Column="3"
                    Width="20"
                    Margin="{TemplateBinding ims:ImageAttach.Margin}"
                    ims:ImageAttach.Geometry="{TemplateBinding ims:ImageAttach.Geometry}"
                    ims:ImageAttach.Height="{TemplateBinding ims:ImageAttach.Height}"
                    ims:ImageAttach.Width="{TemplateBinding ims:ImageAttach.Width}"
                    IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                    IsTabStop="False"
                    Style="{DynamicResource IMS.Sys.ToggleButton.Geometry}" />
                <Border Grid.Column="1">
                    <TextBlock
                        x:Name="Message"
                        Margin="5,2,5,2"
                        Padding="0"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center"
                        Foreground="{TemplateBinding Foreground}"
                        IsHitTestVisible="False"
                        Opacity="{DynamicResource IMS.Opacity.Watermark}"
                        Text="{TemplateBinding ims:TextAttach.Watermark}"
                        TextAlignment="Center"
                        Visibility="Collapsed" />
                </Border>
                <Grid Grid.Column="1">
                    <TextBox
                        x:Name="PART_TextBox"
                        Margin="{TemplateBinding Padding}"
                        HorizontalAlignment="Stretch"
                        FontFamily="{TemplateBinding FontFamily}"
                        FontSize="{TemplateBinding FontSize}"
                        Foreground="{TemplateBinding Foreground}"
                        IsHitTestVisible="True"
                        IsReadOnly="True"
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                        Style="{DynamicResource IMS.Sys.TextBox.Editable}"
                        Text="{Binding Path=SelectedDate, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}, StringFormat={DynamicResource IMS.DateTimeFormat}}" />
                </Grid>
                
                <Popup
                    x:Name="PART_Popup"
                    AllowsTransparency="True"
                    Placement="Bottom"
                    PlacementTarget="{Binding ElementName=PART_DropDownToggle}"
                    StaysOpen="False" />
            </Grid>
        </Grid>

        <ControlTemplate.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}" Value="">
                <Setter TargetName="Message" Property="Visibility" Value="Visible" />
            </DataTrigger>

            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Opacity" Value="{DynamicResource IMS.Opacity.Disable}" />
            </Trigger>

            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="BorderBrush" Value="{Binding Path=(ims:BrushAttach.MouseOverBorderBrush), RelativeSource={RelativeSource Self}}" />
                <Setter TargetName="PART_AttachContent" Property="Foreground" Value="{Binding Path=(ims:BrushAttach.MouseOverBorderBrush), RelativeSource={RelativeSource Self}}" />
                <Setter TargetName="PART_DropDownToggle" Property="Foreground" Value="{Binding Path=(ims:BrushAttach.MouseOverBorderBrush), RelativeSource={RelativeSource Self}}" />
                <Setter Property="Foreground" Value="{Binding Path=(ims:BrushAttach.MouseOverBorderBrush), RelativeSource={RelativeSource Self}}" />
                <Setter TargetName="Message" Property="Foreground" Value="{Binding Path=(ims:BrushAttach.MouseOverBorderBrush), RelativeSource={RelativeSource Self}}" />
            </Trigger>

            <Trigger Property="IsFocused" Value="True">
                <Setter Property="BorderBrush" Value="{Binding Path=(ims:BrushAttach.SelectedBorderBrush), RelativeSource={RelativeSource Self}}" />
                <Setter TargetName="PART_AttachContent" Property="Foreground" Value="{DynamicResource IMS.Brush.Text}" />
                <Setter TargetName="PART_DropDownToggle" Property="Foreground" Value="{DynamicResource IMS.Brush.Text}" />
            </Trigger>

            <Trigger Property="IsKeyboardFocusWithin" Value="True">
                <Setter Property="BorderBrush" Value="{Binding Path=(ims:BrushAttach.SelectedBorderBrush), RelativeSource={RelativeSource Self}}" />
                <Setter TargetName="PART_AttachContent" Property="Foreground" Value="{DynamicResource IMS.Brush.Text}" />
                <Setter TargetName="PART_DropDownToggle" Property="Foreground" Value="{DynamicResource IMS.Brush.Text}" />
                <Setter Property="Foreground" Value="{DynamicResource IMS.Brush.Text}" />
                <Setter TargetName="Message" Property="Foreground" Value="{DynamicResource IMS.Brush.Text}" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <ControlTemplate x:Key="IMS.ControlTemplate.DatePick.Single" TargetType="{x:Type DatePicker}">
        <Grid x:Name="PART_Root">
            <Grid x:Name="PART_InnerGrid" Margin="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <Border
                    x:Name="Bg"
                    Grid.Column="1"
                    Grid.ColumnSpan="3"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    CornerRadius="{TemplateBinding ims:IMSAttach.CornerRadius}"
                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />

                <ContentControl
                    x:Name="Label"
                    Margin="1"
                    Content="{TemplateBinding ims:TitleAttach.Title}"
                    IsTabStop="False" />

                <Border Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center">
                    <ContentControl
                        x:Name="PART_AttachContent"
                        VerticalAlignment="Center"
                        VerticalContentAlignment="Center"
                        Foreground="{DynamicResource IMS.Brush.Text.Gray}"
                        Template="{TemplateBinding ims:IMSAttach.AttachContent}" />
                </Border>

                <ToggleButton
                    x:Name="PART_DropDownToggle"
                    Grid.Column="3"
                    Width="35"
                    Margin="{TemplateBinding ims:ImageAttach.Margin}"
                    ims:ImageAttach.Geometry="{TemplateBinding ims:ImageAttach.Geometry}"
                    ims:ImageAttach.Height="{TemplateBinding ims:ImageAttach.Height}"
                    ims:ImageAttach.Width="{TemplateBinding ims:ImageAttach.Width}"
                    IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                    IsTabStop="False"
                    Style="{DynamicResource IMS.Sys.ToggleButton.Geometry}" />

                <Border Grid.Column="1">
                    <TextBlock
                        x:Name="Message"
                        Margin="5,2,5,2"
                        Padding="0"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center"
                        Foreground="{TemplateBinding Foreground}"
                        IsHitTestVisible="False"
                        Opacity="{DynamicResource IMS.Opacity.Watermark}"
                        Text="{TemplateBinding ims:TextAttach.Watermark}"
                        TextAlignment="Center"
                        Visibility="Collapsed" />
                </Border>

                <Grid Grid.Column="1">
                    <TextBox
                        x:Name="PART_TextBox"
                        Margin="{TemplateBinding Padding}"
                        HorizontalAlignment="Stretch"
                        FontFamily="{TemplateBinding FontFamily}"
                        FontSize="{TemplateBinding FontSize}"
                        Foreground="{TemplateBinding Foreground}"
                        IsHitTestVisible="True"
                        IsReadOnly="True"
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                        Style="{DynamicResource IMS.Sys.TextBox.Editable}"
                        Text="{Binding Path=SelectedDate, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}, StringFormat={StaticResource IMS.DateTimeFormat}}" />
                </Grid>
                
                <Popup
                    x:Name="PART_Popup"
                    AllowsTransparency="True"
                    Placement="Bottom"
                    PlacementTarget="{Binding ElementName=PART_Root}"
                    StaysOpen="False" />
            </Grid>
        </Grid>

        <ControlTemplate.Triggers>

            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}" Value="">
                <Setter TargetName="Message" Property="Visibility" Value="Visible" />
            </DataTrigger>

            <Trigger Property="IsEnabled" Value="False">
                <Setter TargetName="PART_Root" Property="Opacity" Value="{StaticResource IMS.Opacity.Disable}" />
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="BorderBrush" Value="{Binding Path=(ims:BrushAttach.MouseOverBorderBrush), RelativeSource={RelativeSource Self}}" />
                <Setter TargetName="Label" Property="Foreground" Value="{Binding Path=(ims:BrushAttach.MouseOverBorderBrush), RelativeSource={RelativeSource Self}}" />
                <Setter TargetName="PART_AttachContent" Property="Foreground" Value="{Binding Path=(ims:BrushAttach.MouseOverBorderBrush), RelativeSource={RelativeSource Self}}" />
                <Setter TargetName="PART_DropDownToggle" Property="Foreground" Value="{Binding Path=(ims:BrushAttach.MouseOverBorderBrush), RelativeSource={RelativeSource Self}}" />
                <Setter TargetName="Message" Property="Foreground" Value="{Binding Path=(ims:BrushAttach.MouseOverBorderBrush), RelativeSource={RelativeSource Self}}" />
                <Setter Property="Foreground" Value="{Binding Path=(ims:BrushAttach.MouseOverBorderBrush), RelativeSource={RelativeSource Self}}" />
            </Trigger>
            <Trigger Property="IsFocused" Value="True">
                <Setter TargetName="Label" Property="Foreground" Value="{DynamicResource IMS.Brush.Text}" />
                <Setter TargetName="PART_AttachContent" Property="Foreground" Value="{DynamicResource IMS.Brush.Text}" />
                <Setter Property="BorderBrush" Value="{Binding Path=(ims:BrushAttach.SelectedBorderBrush), RelativeSource={RelativeSource Self}}" />
            </Trigger>
            <Trigger Property="IsKeyboardFocusWithin" Value="True">
                <Setter Property="BorderBrush" Value="{Binding Path=(ims:BrushAttach.SelectedBorderBrush), RelativeSource={RelativeSource Self}}" />
                <Setter TargetName="Label" Property="Foreground" Value="{DynamicResource IMS.Brush.Text}" />
                <Setter TargetName="PART_AttachContent" Property="Foreground" Value="{DynamicResource IMS.Brush.Text}" />
                <Setter TargetName="PART_DropDownToggle" Property="Foreground" Value="{DynamicResource IMS.Brush.Text}" />
                <Setter TargetName="Message" Property="Foreground" Value="{DynamicResource IMS.Brush.Text}" />
                <Setter Property="Foreground" Value="{DynamicResource IMS.Brush.Text}" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <Style x:Key="IMS.Sys.DatePicker" TargetType="{x:Type DatePicker}">
        <Setter Property="SelectedDate" Value="{x:Static sys:DateTime.Now}" />
        <Setter Property="Foreground" Value="{DynamicResource IMS.Brush.Text.Gray}" />
        <Setter Property="Background" Value="{DynamicResource IMS.Brush.Text.White}" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="ims:ImageAttach.Geometry" Value="{DynamicResource IMS.Geometry.CalendarGeometry}" />
        <Setter Property="BorderBrush" Value="{DynamicResource IMS.Brush.Text.White}" />
        <Setter Property="ims:BrushAttach.SelectedBorderBrush" Value="{DynamicResource IMS.Brush.Text}" />
        <Setter Property="ims:BrushAttach.MouseOverBorderBrush" Value="{DynamicResource IMS.Brush.Title.2}" />
        <Setter Property="ims:BrushAttach.SelectedBackground" Value="{DynamicResource IMS.Brush.Text}" />
        <Setter Property="ims:ImageAttach.Margin" Value="0,-2,0,0" />
        <Setter Property="ims:IMSAttach.CornerRadius" Value="5" />
        <Setter Property="FontSize" Value="{DynamicResource IMS.FontSize.Default}" />
        <Setter Property="MinHeight" Value="26" />
        <Setter Property="Height" Value="{DynamicResource IMS.Row.Height.Middle}" />
        <Setter Property="Width" Value="Auto" />
        <Setter Property="Margin" Value="{DynamicResource IMS.Padding.Text}" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="IsTodayHighlighted" Value="True" />
        <Setter Property="Padding" Value="10,0,0,0" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="CalendarStyle" Value="{DynamicResource IMS.Sys.Calendar}" />
        <Setter Property="Template" Value="{DynamicResource IMS.ControlTemplate.DatePick}" />
        <Setter Property="RenderTransform" Value="{StaticResource IMS.Wpf.TransformGroup.Default}" />
    </Style>

Calendar XAML

中间穿插了几个自定义扩展样式（相对比较简单，自行实现）

    <Style x:Key="IMS.Sys.CalendarDayButton" TargetType="CalendarDayButton">
        <Setter Property="MinWidth" Value="28" />
        <Setter Property="MinHeight" Value="5" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Foreground" Value="{DynamicResource IMS.Brush.Title.Gray}" />
        <Setter Property="Margin" Value="0" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CalendarDayButton">
                    <Grid x:Name="Grid" Margin="{TemplateBinding Margin}">
                        <Border x:Name="Bg" Background="{TemplateBinding Background}" />
                        <ContentPresenter
                            x:Name="NormalText"
                            Margin="5,2,5,2"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            TextElement.Foreground="{TemplateBinding Foreground}" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Background" Value="{DynamicResource IMS.Brush.Title.1}" />
                            <Setter Property="Foreground" Value="{DynamicResource IMS.Brush.Text.White.1}" />
                            <Setter Property="FontWeight" Value="Bold" />
                        </Trigger>
                        <Trigger Property="IsToday" Value="True">
                            <Setter Property="FontWeight" Value="Bold" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="{DynamicResource IMS.Brush.Title}" />
                            <Setter Property="Foreground" Value="{DynamicResource IMS.Brush.Text.White.1}" />
                        </Trigger>
                        <!--  不可用日期  -->
                        <Trigger Property="IsBlackedOut" Value="True">
                            <Setter TargetName="Grid" Property="Opacity" Value="{StaticResource IMS.Opacity.Disable}" />
                        </Trigger>
                        <!--  不在当月的日期  -->
                        <Trigger Property="IsInactive" Value="True">
                            <Setter TargetName="Grid" Property="Opacity" Value="0.65" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="Grid" Property="Opacity" Value="{StaticResource IMS.Opacity.Disable}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="IMS.Sys.CalendarItem" TargetType="CalendarItem">
        <Setter Property="Margin" Value="0,1,0,1" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CalendarItem">
                    <ControlTemplate.Resources>
                        <!--  头部星期样式  -->
                        <DataTemplate x:Key="{x:Static CalendarItem.DayTitleTemplateResourceKey}">
                            <TextBlock
                                Margin="0,6,0,6"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                FontSize="{StaticResource IMS.FontSize.Default}"
                                FontWeight="Bold"
                                Foreground="{DynamicResource IMS.Brush.Title.Gray}"
                                Opacity="0.8"
                                Text="{Binding}" />
                        </DataTemplate>
                    </ControlTemplate.Resources>
                    <Grid x:Name="PART_Root">
                        <Border
                            Margin="{TemplateBinding Margin}"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="1">
                            <Grid Margin="2">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="auto" />
                                </Grid.RowDefinitions>
                                <!--  Header  -->
                                <Grid Grid.Row="0" HorizontalAlignment="Stretch" Background="{DynamicResource IMS.Brush.Title.1}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="2*" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>

                                    <Button
                                        x:Name="PART_HeaderButton"
                                        Grid.Column="1"
                                        ims:BrushAttach.MouseOverForeground="{DynamicResource IMS.Brush.Text.White.1}"
                                        Background="Transparent"
                                        Focusable="False"
                                        FontWeight="Bold" />

                                    <Button
                                        x:Name="PART_PreviousButton"
                                        Grid.Column="0"
                                        Height="20"
                                        ims:BrushAttach.MouseOverForeground="{DynamicResource IMS.Brush.Text.White.1}"
                                        ims:ImageAttach.Geometry="{DynamicResource IMS.Geometry.PageNavigationBack}"
                                        Background="Transparent"
                                        Content=""
                                        Focusable="False"
                                        Foreground="{DynamicResource IMS.Brush.Text.White.1}"
                                        Style="{DynamicResource IMS.Sys.GeometryButton}" />

                                    <Button
                                        x:Name="PART_NextButton"
                                        Grid.Column="2"
                                        Height="20"
                                        ims:BrushAttach.MouseOverForeground="{DynamicResource IMS.Brush.Text.White.1}"
                                        ims:ImageAttach.Geometry="{DynamicResource IMS.Geometry.PageNavigationNext}"
                                        Background="Transparent"
                                        Content=""
                                        Focusable="False"
                                        Foreground="{DynamicResource IMS.Brush.Text.White.1}"
                                        Style="{DynamicResource IMS.Sys.GeometryButton}" />
                                </Grid>
                                <!--  PART_MonthView  -->
                                <Grid
                                    x:Name="PART_MonthView"
                                    Grid.Row="1"
                                    Margin="6,1,6,6"
                                    HorizontalAlignment="Stretch"
                                    VerticalAlignment="Stretch"
                                    Visibility="Visible">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                </Grid>
                                <!--  PART_YearView  -->
                                <Grid
                                    x:Name="PART_YearView"
                                    Grid.Row="1"
                                    Margin="6,10,6,10"
                                    HorizontalAlignment="Stretch"
                                    VerticalAlignment="Stretch"
                                    Visibility="Hidden">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                </Grid>
                                <ims:DashedBorder
                                    x:Name="PART_DashedBorderTime"
                                    Grid.Row="2"
                                    Height="30"
                                    Margin="8,0,8,0"
                                    Background="Transparent"
                                    BorderBrush="Green"
                                    BorderThickness="0,1,0,0"
                                    Visibility="{Binding ElementName=PART_MonthView, Path=Visibility}">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="时间" />
                                        <ims:DashedBorder
                                            Height="25"
                                            Margin="5,0"
                                            Background="White"
                                            BorderBrush="Blue"
                                            BorderThickness="1">
                                            <StackPanel Orientation="Horizontal">
                                                <Button
                                                    x:Name="PART_BtnHour"
                                                    ims:CalendarAttach.IsHourButton="True"
                                                    Background="Transparent"
                                                    BorderThickness="0"
                                                    Command="ims:CalendarAttach.HourCommand"
                                                    CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DatePicker}}}"
                                                    Content="00" />
                                                <TextBlock Text=":" />
                                                <Button
                                                    x:Name="PART_BtnMinute"
                                                    ims:CalendarAttach.IsMinuteButton="True"
                                                    Background="Transparent"
                                                    BorderThickness="0"
                                                    Command="ims:CalendarAttach.MinuteCommand"
                                                    CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DatePicker}}}"
                                                    Content="00" />
                                                <TextBlock Text=":" />
                                                <Button
                                                    x:Name="PART_BtnSecond"
                                                    ims:CalendarAttach.IsSecondButton="True"
                                                    Background="Transparent"
                                                    BorderThickness="0"
                                                    Command="ims:CalendarAttach.SecondCommand"
                                                    CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DatePicker}}}"
                                                    Content="00" />
                                            </StackPanel>
                                        </ims:DashedBorder>
                                        <Button
                                            Margin="5,0"
                                            ims:CalendarAttach.IsCurTimeButton="True"
                                            Command="ims:CalendarAttach.CurTimeCommand"
                                            CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DatePicker}}}"
                                            Content="当前" />
                                        <Button
                                            Margin="0,0,5,0"
                                            ims:CalendarAttach.IsMakeSureButton="True"
                                            Command="ims:CalendarAttach.MakeSureCommand"
                                            CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DatePicker}}}"
                                            Content="确定" />
                                    </StackPanel>
                                </ims:DashedBorder>
                            </Grid>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="PART_Root" Property="Opacity" Value="{StaticResource IMS.Opacity.Disable}" />
                        </Trigger>
                        <DataTrigger Binding="{Binding DisplayMode, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}}" Value="Year">
                            <Setter TargetName="PART_MonthView" Property="Visibility" Value="Hidden" />
                            <Setter TargetName="PART_YearView" Property="Visibility" Value="Visible" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding DisplayMode, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Calendar}}}" Value="Decade">
                            <Setter TargetName="PART_MonthView" Property="Visibility" Value="Hidden" />
                            <Setter TargetName="PART_YearView" Property="Visibility" Value="Visible" />
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="IMS.Sys.CalendarButton" TargetType="CalendarButton">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Foreground" Value="{DynamicResource IMS.Brush.Text.White.1}" />
        <Setter Property="MinWidth" Value="40" />
        <Setter Property="MinHeight" Value="42" />
        <Setter Property="FontSize" Value="{StaticResource IMS.FontSize.Default}" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CalendarButton">
                    <Grid x:Name="Grid" Margin="{TemplateBinding Margin}">
                        <Border x:Name="Bg" Background="{TemplateBinding Background}" />
                        <ContentPresenter
                            x:Name="NormalText"
                            Margin="5,2,5,2"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            TextElement.Foreground="{TemplateBinding Foreground}" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsFocused" Value="True">
                            <Setter Property="Background" Value="{DynamicResource IMS.Brush.Text.White.1}" />
                            <Setter Property="Foreground" Value="{DynamicResource IMS.Brush.Title.1}" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="{DynamicResource IMS.Brush.Title.1}" />
                            <Setter Property="Foreground" Value="{DynamicResource IMS.Brush.Text.White.1}" />
                        </Trigger>
                        <!--  不在当月的日期  -->
                        <Trigger Property="IsInactive" Value="True">
                            <Setter TargetName="Grid" Property="Opacity" Value="0.8" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="Grid" Property="Opacity" Value="{StaticResource IMS.Opacity.Disable}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="IMS.Sys.Calendar" TargetType="Calendar">
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Foreground" Value="{DynamicResource IMS.Brush.Title.1}" />
        <Setter Property="CalendarDayButtonStyle" Value="{StaticResource IMS.Sys.CalendarDayButton}" />
        <Setter Property="CalendarItemStyle" Value="{StaticResource IMS.Sys.CalendarItem}" />
        <Setter Property="CalendarButtonStyle" Value="{StaticResource IMS.Sys.CalendarButton}" />
        <Setter Property="Background" Value="{DynamicResource IMS.Brush.Text.White.1}" />
        <Setter Property="BorderBrush" Value="{DynamicResource IMS.Brush.Title.1}" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="FontSize" Value="13" />
        <Setter Property="IsTodayHighlighted" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Calendar">
                    <StackPanel x:Name="PART_Root" HorizontalAlignment="Center" Background="Transparent">
                        <CalendarItem
                            x:Name="PART_CalendarItem"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            FontFamily="{TemplateBinding FontFamily}"
                            FontSize="{TemplateBinding FontSize}"
                            Style="{TemplateBinding CalendarItemStyle}" />
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

CalendarAttrach.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Input;
using System.Windows.Media;

namespace XXXX.Wpf
{
    public static class CalendarAttach
    {
        const string PART_BtnHour = "PART_BtnHour";
        const string PART_BtnMinute = "PART_BtnMinute";
        const string PART_BtnSecond = "PART_BtnSecond";

        public static void CreatePopup(Button btn,int number,int lineCount,string title)
        {
            Border dashedBorder = new Border()
            {
                BorderThickness = new Thickness(1),
                Width = (40 * lineCount) + 10,
                Background = Brushes.White,
            };
            Popup popup = new Popup()
            {
                StaysOpen = false,
                PlacementTarget = btn,
                AllowsTransparency = true,
                Placement = PlacementMode.Bottom,
            };
            WrapPanel wrapPanel = new WrapPanel()
            {
                Orientation = Orientation.Horizontal,
                Width = (40 * lineCount)+2
            };
            Label titleLabel = new Label()
            {
                Content = title,
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Center,
                HorizontalContentAlignment = HorizontalAlignment.Center,
                VerticalContentAlignment = VerticalAlignment.Center,
                Width = (40 * lineCount) + 10,
                Foreground = Brushes.Blue,
                Height = 30,
                FontSize = 15,
                Background = Brushes.Gray,
            };
         
            wrapPanel.Children.Add(titleLabel);
            for (int i = 0; i < number; i++)
            {
                Button button = new Button()
                {
                    Content = i,
                    Width = 40,
                    Height = 40
                };
                button.Click += (sender, e) =>
                {
                    int value = Convert.ToInt32(((Button)sender).Content);
                    btn.Content = value < 10 ? "0" + value : value;
                    popup.IsOpen = false;
                };
                wrapPanel.Children.Add(button);
            }
            popup.Child = wrapPanel;
            popup.IsOpen = true;
        }

        static CalendarAttach()
        {
            HourCommand = new RoutedUICommand();
            HourCommandBinding = new CommandBinding(HourCommand);
            HourCommandBinding.Executed += (sender,e)=> 
            {
                LoggingService.Info("HourCommand");
                CreatePopup(sender as Button, 24, 6, "小时");
            };

            MinuteCommand = new RoutedUICommand();
            MinuteCommandBinding = new CommandBinding(MinuteCommand);
            MinuteCommandBinding.Executed += (sender, e) =>
            {
                LoggingService.Info("MinuteCommand");
                CreatePopup(sender as Button, 60, 10, "分钟");
            };

            SecondCommand = new RoutedUICommand();
            SecondCommandBinding = new CommandBinding(SecondCommand);
            SecondCommandBinding.Executed += (sender, e) =>
            {
                LoggingService.Info("SecondCommand");
                CreatePopup(sender as Button, 60, 10, "秒");
            };

            CurTimeCommand = new RoutedUICommand();
            CurTimeCommandBinding = new CommandBinding(CurTimeCommand);
            CurTimeCommandBinding.Executed += (sender, e) =>
            {
                LoggingService.Info("CurTimeCommand");

                Button btn = sender as Button;
                DatePicker datePicker = e.Parameter as DatePicker;
                Popup popup = datePicker.GetChild<Popup>("PART_Popup");
                Calendar calendar = popup.Child as Calendar;
                Button btnHour = calendar.GetChild<Button>(PART_BtnHour);
                Button btnMinute = calendar.GetChild<Button>(PART_BtnMinute);
                Button btnSecond = calendar.GetChild<Button>(PART_BtnSecond);

                if (btn.Content.ToString() == "零点")
                {
                    btnHour.Content = "00";
                    btnMinute.Content = "00";
                    btnSecond.Content = "00";
                    btn.Content = "当前";
                    btn.Background = Brushes.LightBlue;
                }
                else
                {
                    DateTime dt = DateTime.Now;
                    btnHour.Content = dt.Hour.ToString().PadLeft(2, '0');
                    btnMinute.Content = dt.Minute.ToString().PadLeft(2, '0');
                    btnSecond.Content = dt.Second.ToString().PadLeft(2, '0');
                    btn.Content = "零点";
                    btn.Background = Brushes.LightGreen;
                }
            };

            MakeSureCommand = new RoutedUICommand();
            MakeSureCommandBinding = new CommandBinding(MakeSureCommand);
            MakeSureCommandBinding.Executed += (sender, e) =>
            {
                LoggingService.Info("MakeSureCommand");
                Button btn = sender as Button;
                DatePicker datePicker = e.Parameter as DatePicker;
                Popup popup = datePicker.GetChild<Popup>("PART_Popup");
                Calendar calendar = popup.Child as Calendar;
                Button btnHour = calendar.GetChild<Button>(PART_BtnHour);
                Button btnMinute = calendar.GetChild<Button>(PART_BtnMinute);
                Button btnSecond = calendar.GetChild<Button>(PART_BtnSecond);

                DateTime CurDateTime = Convert.ToDateTime(datePicker.SelectedDate == null ? DateTime.Now.Date : datePicker.SelectedDate);
                string timeStr = btnHour.Content + ":" + btnMinute.Content + ":" + btnSecond.Content;
                CurDateTime = Convert.ToDateTime(CurDateTime.ToString("yyyy-MM-dd") + " " + timeStr);
                datePicker.SelectedDate = CurDateTime;
            };
        }

        private static void Btn_Click(object sender, RoutedEventArgs e)
        {
            throw new System.NotImplementedException();
        }

        public static RoutedUICommand HourCommand { get; private set; }
        public static RoutedUICommand MinuteCommand { get; private set; }
        public static RoutedUICommand SecondCommand { get; private set; }
        public static RoutedUICommand CurTimeCommand { get; private set; }
        public static RoutedUICommand MakeSureCommand { get; private set; }


        private static readonly CommandBinding HourCommandBinding;
        private static readonly CommandBinding MinuteCommandBinding;
        private static readonly CommandBinding SecondCommandBinding;
        private static readonly CommandBinding CurTimeCommandBinding;
        private static readonly CommandBinding MakeSureCommandBinding;

        public static bool GetIsHourButton(DependencyObject obj)
        {
            return (bool)obj.GetValue(IsHourButtonProperty);
        }

        public static void SetIsHourButton(DependencyObject obj, bool value)
        {
            obj.SetValue(IsHourButtonProperty, value);
        }

        public static readonly DependencyProperty IsHourButtonProperty =
            DependencyProperty.RegisterAttached("IsHourButton", typeof(bool), typeof(CalendarAttach), 
                new PropertyMetadata(SharedInstances.BoxedFalse, (d, e) =>
                {
                    if (e.OldValue != e.NewValue && d is Button button)
                    {
                        button.CommandBindings.Add(HourCommandBinding);
                    }
                }));

        public static bool GetIsMinuteButton(DependencyObject obj)
        {
            return (bool)obj.GetValue(IsMinuteButtonProperty);
        }

        public static void SetIsMinuteButton(DependencyObject obj, bool value)
        {
            obj.SetValue(IsMinuteButtonProperty, value);
        }

        public static readonly DependencyProperty IsMinuteButtonProperty =
            DependencyProperty.RegisterAttached("IsMinuteButton", typeof(bool), typeof(CalendarAttach),
                new PropertyMetadata(SharedInstances.BoxedFalse, (d, e) =>
                {
                    if (e.OldValue != e.NewValue && d is Button button)
                    {
                        button.CommandBindings.Add(MinuteCommandBinding);
                    }
                }));

        public static bool GetIsSecondButton(DependencyObject obj)
        {
            return (bool)obj.GetValue(IsSecondButtonProperty);
        }

        public static void SetIsSecondButton(DependencyObject obj, bool value)
        {
            obj.SetValue(IsSecondButtonProperty, value);
        }

        public static readonly DependencyProperty IsSecondButtonProperty =
            DependencyProperty.RegisterAttached("IsSecondButton", typeof(bool), typeof(CalendarAttach),
                new PropertyMetadata(SharedInstances.BoxedFalse,(d,e)=>
                {
                    if (e.OldValue != e.NewValue && d is Button button)
                    {
                        button.CommandBindings.Add(SecondCommandBinding);
                    }
                }));

        public static bool GetIsCurTimeButton(DependencyObject obj)
        {
            return (bool)obj.GetValue(IsCurTimeButtonProperty);
        }

        public static void SetIsCurTimeButton(DependencyObject obj, bool value)
        {
            obj.SetValue(IsCurTimeButtonProperty, value);
        }

        public static readonly DependencyProperty IsCurTimeButtonProperty =
            DependencyProperty.RegisterAttached("IsCurTimeButton", typeof(bool), typeof(CalendarAttach),
                new PropertyMetadata(SharedInstances.BoxedFalse, (d, e) =>
                {
                    if (e.OldValue != e.NewValue && d is Button button)
                    {
                        button.CommandBindings.Add(CurTimeCommandBinding);
                    }
                }));
                
        public static bool GetIsMakeSureButton(DependencyObject obj)
        {
            return (bool)obj.GetValue(IsMakeSureButtonProperty);
        }

        public static void SetIsMakeSureButton(DependencyObject obj, bool value)
        {
            obj.SetValue(IsMakeSureButtonProperty, value);
        }

        public static readonly DependencyProperty IsMakeSureButtonProperty =
            DependencyProperty.RegisterAttached("IsMakeSureButton", typeof(bool), typeof(CalendarAttach),
                new PropertyMetadata(SharedInstances.BoxedFalse, (d, e) =>
                {
                    if (e.OldValue != e.NewValue && d is Button button)
                    {
                        button.CommandBindings.Add(MakeSureCommandBinding);
                    }
                }));
    }
}

点个赞，关注一下嘛

Daniel大妞
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html datetime控件 到时分秒,日期控件：datepicker（bootstrap）支持时分秒
weixin_30045597的博客
06-07 1024
记录一下日期控件，datepicker-bootstrap；这个控件支持年月日以及时分秒。首先需要到官网下载其js、cs样式2、页面应用：(支持年月日)创建时间至name="lsc_enddate" placeholder="结束日期" type="text">$('#lsc_startdate').datepicker({format : 'yyyy-mm-dd',language : ...
jQuery时间选择器datepicker年月日时分秒选择
02-21
datepicker时间插件，多种选择方式，年月日，时分秒，区间范围，单个以及多个选择
WPF 自定义DateTimePicker（带时分秒选择）
07-05
WPF 自定义DateTimePicker（带时分秒选择）
wpf Datepicker 自定义控件
09-20
自定义日期控件，选择日期的同时，显示当前的时间，时间的格式可自定义，可显示时分秒、上午/下午、星期等，可自定义显示格式。对Datepicker的重写，其中有一个类，可以复制到自己的项目，也可以输出为dll控件，这是网上下载的开源代码，共享出来。
【WPF应用37】WPF基本控件-DatePicker的详解与示例
最新发布
qq_35320456的博客
04-06 1713
WPF基本控件-DatePicker的详解与示例
jQuery UI Datepicker 选择时分秒
热门推荐
json_li的博客
01-04 2万+
jQuery UI Datepicker日期选择插件很好用了，只不过只能精确到日，不能选择时间（小时分钟秒）很遗憾，而jquery-ui-timepicker-addon.js正是基于jQuery UI Datepicker的一款可选时间的插件。 官方地址：http://docs.jquery.com/UI/Datepicker，官方示例：http://jqueryui.com/demos
WPF,datepicker加上时分秒的选择，年月日时分秒
qq_42707143的博客
10-22 4797
自定义控件 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Controls.Primitives; namespace LAP_A.Resource.Controller {
踩坑前端框架 - iview DatePicker 时间选择年月日时分秒
Ho博客
07-01 8457
DatePicker时分秒可选择功能修改
关于Element Plus DatePicker 日期选择器 二次封装，精确到时分秒
weixin_62364503的博客
08-15 601
placeholder="请输入开始时间" :style="{ width: porp.width + 'px' }" :format="porp.format" :disabledDate="startDisabledDate"placeholder="请输入结束时间" :style="{ width: porp.width + 'px' }" :format="porp.format" :disabledDate="endDisabledDate"// 展示的时间格式，同时也是返回的时间格式。
element-ui 时间组件datePicker开始时间小于结束时间的校验，时分秒校验问题。
m0_38105640的博客
10-12 4289
一、安装引入element-ui npm i element-ui -S 完整引入 在 main.js 中写入以下内容： import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app', render:
浅谈WPF中的Calendar日历控件
liaohaiyin的专栏
03-30 3656
日历控件用于创建可视日历，让用户选择日期并在选择日期时触发事件。本文演示如何使用 XAML 和 C# 在 WPF 中创建和使用日历控件。 创建日历 Calendar 元素表示 XAML 中的 WPF 日历控件。 <Calendar/> Calendar 控件在 System.Windows.Controls 命名空间中定义。当您将日历控件从工具箱拖放到页面时，XAML 代码将类似于以下代码，您可以在其中看到日历 XAML 元素已添加到 Grid 元素中，并且其 Width、Hei
datetimepicker选择时分秒
09-18
此项目是bootstrap-datetimepicker 项目 ，本人通过改造后，支持从页面选择日期获取到时分秒，精确获取。
jquery datetimepicker 日期选择器扩展（选择时、分）
06-01
NULL 博文链接：https://hoodbc.iteye.com/blog/1107779
jQueryUI DatePicker 添加时分秒
11-22
jquery.ui 的 datepicker 默认是年月日的jquery 插件，如果添加时分秒 只需要做如下修改即可 1. 下载jquery-ui-timepicker-addon.js ，并在页面加载 2. 页面添加如下 timepicker 的样式即可 复制代码 代码如下:.ui-...
基于JQuery UI的datepicker二次开发 支持时分秒（带示例）
01-15
基于华丽的JQ UI的datepicker 没有对时分秒进行支持 本次开发彻底解决这一问题 示例中支持皮肤切换
DatePicker控件显示具体的时分秒
男人放得下自己的高傲，才能撑得起自己的野心
10-11 5012
DatePicker控件显示具体的时分秒 听语音   | 浏览：3331 | 更新：2017-04-18 18:37 1 2 3 4 5 6 分步阅读 在我们开发程序的时候，有时候会遇到我们显示DatePicker控件时，要显示到具体的时分秒，然后这个时间我们也是可以选择操作的，毕竟有的查询就要精确到时分秒，那么这个时候我们该...
WPF -- 设置 DatePicker 的日期时间显示格式
一个被IT搞的
04-06 2万+
参考：《Changing the string format of the WPF DatePicker》   XAML代码：
WPF 控件 (十五、时间选择器)
LyRics1996的博客
04-15 3124
由三个Combox（时、分、秒）和两个TextBlock（：：）组成。控件刷新被弹窗阻，需要点击弹窗才会刷新。WPF 没有自带的时间选择器。xaml只需要这一行。
Calendar获取年月日，时分秒，等等的运用
扣脚老骚
11-16 1921
Calendar获取年月日，时分秒，等等的运用 Calendar获取年月日，时分秒，等等的运用
antd 实现年月日时分秒选择
06-06
antd 的 DatePicker 组件可以实现日期选择，而 TimePicker 组件可以实现时间选择。你可以使用这两个组件结合使用来实现年月日时分秒的选择。 下面是一个示例代码： ```jsx import { DatePicker, TimePicker } from 'antd'; function DateTimePicker() { return ( <> <DatePicker /> <TimePicker /> </> ); } ``` 通过上述代码，你可以在页面上看到一个日期选择器和一个时间选择器，它们可以一起使用来选择一个完整的日期和时间。你可以根据具体的需求来设置这两个组件的属性，比如设置默认值、禁用日期等等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Daniel大妞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值