Win8 自定义TimePicker --- 用户控件

38 篇文章 1 订阅

MyTimePicker.xaml

<UserControl
    x:Class="BPCompanion.MyTimePicker"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BPCompanion"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="40"
    d:DesignWidth="260">
    
    <Grid>
        <StackPanel Orientation="Horizontal" Height="40">
            <ComboBox x:Name="hourlist" HorizontalAlignment="Left" VerticalAlignment="Top" Width="80" Height="40" >
                <!--<ComboBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Path=HOUR}" VerticalAlignment="Center" FontSize="16" Width="60"/>
                    </DataTemplate>
                </ComboBox.ItemTemplate>-->
                <ComboBoxItem Content="1" IsSelected="True"/>
                <ComboBoxItem Content="2" />
                <ComboBoxItem Content="3" />
                <ComboBoxItem Content="4" />
                <ComboBoxItem Content="5" />
                <ComboBoxItem Content="6" />
                <ComboBoxItem Content="7" />
                <ComboBoxItem Content="8" />
                <ComboBoxItem Content="9" />
                <ComboBoxItem Content="10" />
                <ComboBoxItem Content="11" />
                <ComboBoxItem Content="12" />
            </ComboBox>
            <ComboBox x:Name="minutelist"  HorizontalAlignment="Left"  VerticalAlignment="Top" Width="80" Height="40" Margin="10,0,0,0">
                <!--<ComboBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Path=MINUTE}" VerticalAlignment="Center" FontSize="16" />
                    </DataTemplate>
                </ComboBox.ItemTemplate>-->
                <ComboBoxItem Content="00" IsSelected="True"/>
                <ComboBoxItem Content="01" />
                <ComboBoxItem Content="02" />
                <ComboBoxItem Content="03" />
                <ComboBoxItem Content="04" />
                <ComboBoxItem Content="05" />
                <ComboBoxItem Content="06" />
                <ComboBoxItem Content="07" />
                <ComboBoxItem Content="08" />
                <ComboBoxItem Content="09" />
                <ComboBoxItem Content="10" />
                <ComboBoxItem Content="11" />
                <ComboBoxItem Content="12" />
                <ComboBoxItem Content="13" />
                <ComboBoxItem Content="14" />
                <ComboBoxItem Content="15" />
                <ComboBoxItem Content="16" />
                <ComboBoxItem Content="17" />
                <ComboBoxItem Content="18" />
                <ComboBoxItem Content="19" />
                <ComboBoxItem Content="20" />
                <ComboBoxItem Content="21" />
                <ComboBoxItem Content="22" />
                <ComboBoxItem Content="23" />
                <ComboBoxItem Content="24" />
                <ComboBoxItem Content="25" />
                <ComboBoxItem Content="26" />
                <ComboBoxItem Content="27" />
                <ComboBoxItem Content="28" />
                <ComboBoxItem Content="29" />
                <ComboBoxItem Content="30" />
                <ComboBoxItem Content="31" />
                <ComboBoxItem Content="32" />
                <ComboBoxItem Content="33" />
                <ComboBoxItem Content="34" />
                <ComboBoxItem Content="35" />
                <ComboBoxItem Content="36" />
                <ComboBoxItem Content="37" />
                <ComboBoxItem Content="38" />
                <ComboBoxItem Content="39" />
                <ComboBoxItem Content="40" />
                <ComboBoxItem Content="41" />
                <ComboBoxItem Content="42" />
                <ComboBoxItem Content="43" />
                <ComboBoxItem Content="44" />
                <ComboBoxItem Content="45" />
                <ComboBoxItem Content="46" />
                <ComboBoxItem Content="47" />
                <ComboBoxItem Content="48" />
                <ComboBoxItem Content="49" />
                <ComboBoxItem Content="50" />
                <ComboBoxItem Content="51" />
                <ComboBoxItem Content="52" />
                <ComboBoxItem Content="53" />
                <ComboBoxItem Content="54" />
                <ComboBoxItem Content="55" />
                <ComboBoxItem Content="56" />
                <ComboBoxItem Content="57" />
                <ComboBoxItem Content="58" />
                <ComboBoxItem Content="59" />
            </ComboBox>
            <ComboBox x:Name="ampmlist" HorizontalAlignment="Left" VerticalAlignment="Top" 
                      Width="80" Height="40" Margin="10,0,0,0">
                <ComboBoxItem Content="AM" IsSelected="True"/>
                <ComboBoxItem Content="PM" />
            </ComboBox>
        </StackPanel>
    </Grid>
</UserControl>

MyTimePicker.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// 

namespace BPCompanion
{
    public partial class MyTimePicker : UserControl
    {
        public delegate void Time_ChangedHandler(DateTime date);     // 声明一个 委托,在日期选择发生变化时调用
        public event Time_ChangedHandler Time_ChangedHandlerEvent;                  // 声明一个这种委托的事件  

        private int select_hour { get; set; }                    // 当前选中的 Hour
        private int select_minute { get; set; }                  // 当前选中的 Minute
        private int select_ampm { get; set; }                    // 当前选中的AM / PM
        public DateTime currentTime { get; set; }               // 任何时间都可以通过currentTime属性来获得当前选择时间

        public void setDate(DateTime datetime)
        {
            this.hourlist.SelectedIndex = datetime.Hour % 12 - 1;
            this.minutelist.SelectedIndex = datetime.Minute;

            select_hour = datetime.Hour%12;
            select_minute = datetime.Minute;

            if (datetime.ToString().Contains("PM"))
            {
                this.ampmlist.SelectedIndex = 1;            // PM 
                select_ampm = 1;
            }
            else
            {
                this.ampmlist.SelectedIndex = 0;            // AM
                select_ampm = 0;
            }

            currentTime = new DateTime(datetime.Year, datetime.Month, datetime.Day, select_hour, select_minute, 0);
            if (datetime.ToString().Contains("PM"))      // 如果是下午的话,就添加12个小时
            {
                currentTime = currentTime.AddHours(12);
            }
        }               // 用户通过此方法  设置时间

        public MyTimePicker()
        {
            this.InitializeComponent();

            DateTime now = DateTime.Now;                            // 在没有调用setDate之前,默认显示当前时间

            this.hourlist.SelectedIndex = now.Hour%12 - 1;
            this.minutelist.SelectedIndex = now.Minute;

            select_hour = now.Hour%12;
            select_minute = now.Minute;

            if (now.ToString().Contains("PM"))
            {
                this.ampmlist.SelectedIndex = 1;            // PM 
                select_ampm = 1;
            }
            else
            {
                this.ampmlist.SelectedIndex = 0;            // AM
                select_ampm = 0;
            }

            currentTime = new DateTime(now.Year, now.Month, now.Day, select_hour, select_minute, 0);        // 因为这个地方一定是上午,所以不用判断了

            this.hourlist.SelectionChanged += (a, args) =>
                {
                    select_hour = this.hourlist.SelectedIndex + 1;

                    DateTime dt = new DateTime(now.Year, now.Month, now.Day, select_hour, select_minute, 0);
                    if (1 == select_ampm)       // 如果选择的是下午的话, 添加12个小时,转换为下午
                    {
                        dt = dt.AddHours(12);
                    }
                    currentTime = dt;

                    if (Time_ChangedHandlerEvent != null)           // 判断是否有注册事件, 注意这个地方一定要判断,不然会crash
                    {
                        Time_ChangedHandlerEvent(dt);      //调用所有注册对象的方法
                    }
                };
            this.minutelist.SelectionChanged += (a, args) =>
                {
                    select_minute = this.minutelist.SelectedIndex;

                    DateTime dt = new DateTime(now.Year, now.Month, now.Day, select_hour, select_minute, 0);
                    if (1 == select_ampm)       // 如果选择的是下午的话, 添加12个小时,转换为下午
                    {
                        dt = dt.AddHours(12);
                    }
                    currentTime = dt;

                    if (Time_ChangedHandlerEvent != null)           // 判断是否有注册事件
                    {
                        Time_ChangedHandlerEvent(dt);      //调用所有注册对象的方法
                    }
                };
            this.ampmlist.SelectionChanged += (a, args) =>
                {
                    select_ampm = this.ampmlist.SelectedIndex;

                    DateTime dt = new DateTime(now.Year, now.Month, now.Day, select_hour, select_minute, 0);
                    if (1 == select_ampm)       // 如果选择的是下午的话, 添加12个小时,转换为下午
                    {
                        dt = dt.AddHours(12);
                    }
                    currentTime = dt;

                    if (Time_ChangedHandlerEvent != null)           // 判断是否有注册事件
                    {
                        Time_ChangedHandlerEvent(dt);      //调用所有注册对象的方法
                    }
                };
        }
    }
}

用法:

1 :在XAML 文件中引入 -------  xmlns:picker="using:BPCompanion"

2: 在使用的地方---------------<picker:MyTimePicker x:Name="timepicker"/>

3:设置、获取时间

   

this.timepicker.setDate(DateTime.Now.AddHours(-8));
            this.cur_time.Text = this.timepicker.currentTime.ToString("hh:mm:ss t") + "M";

            this.timepicker.Time_ChangedHandlerEvent += (time)=>
            {
                this.cur_time.Text = time.ToString("hh:mm:ss t") + "M";
            };

效果:



jquery-ui-timepicker-addon.css是基于jQuery UI的日期时间选择器插件datetimepicker的样式表文件,用于定义和控制datetimepicker组件的外观和样式。 datetimepicker插件是一个基于jQuery UI的日期时间选择器插件,它可以在输入框中集成日期和时间选择器,具有用户友好的界面和强大的可定制性。和其他jQuery UI组件一样,datetimepicker插件也需要相应的CSS文件来定义和控制其外观和样式。 jquery-ui-timepicker-addon.css文件是datetimepicker插件的样式表文件,它包含了datetimepicker的默认样式和主题,也可以用于自定义修改样式表文件以达到特定的视觉效果。 使用jquery-ui-timepicker-addon.css文件的方法和使用jquery-ui.css文件的方法类似,具体使用方法如下: 1. 下载datetimepicker插件和jQuery UI框架,从官网(https://jqueryui.com/)或其他来源下载datetimepicker插件和jQuery UI的压缩文件。 2. 引入jquery-ui-timepicker-addon.css文件,将jquery-ui-timepicker-addon.css文件复制到项目中,并在HTML页面中使用<link>标签引入该文件。 ``` <link rel="stylesheet" href="path/to/jquery-ui-timepicker-addon.css"> ``` 3. 引入jQuery和jQuery UI的JS文件,使用<script>标签引入jQuery和jQuery UI的JS文件。 ``` <script src="path/to/jquery.js"></script> <script src="path/to/jquery-ui.js"></script> ``` 4. 引入datetimepicker插件的JS文件,使用<script>标签引入datetimepicker插件的JS文件。 ``` <script src="path/to/jquery-ui-timepicker-addon.js"></script> ``` 引入这些文件后,就可以在输入框中集成日期时间选择器,并使用jquery-ui-timepicker-addon.css文件来控制其外观和样式了。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值