EXT.NET TimeField

最新推荐文章于 2023-10-07 16:10:26 发布

zhruifei

最新推荐文章于 2023-10-07 16:10:26 发布

阅读量502

点赞数

分类专栏： ExtJS

ExtJS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用EXT.NET库实现的时间选择器组件示例，包括12小时制和24小时制两种格式，通过按钮点击事件实现两个时间字段的选择时间互换。

原文：EXT.NET官网

HTML代码：

<%@ Page Language="C#" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.TimeField1.SelectedTime = new TimeSpan(15, 0, 0);
            this.TimeField2.SelectedTime = new TimeSpan(17, 0, 0);
        }
    }

    protected void Button1_Click(object sender, DirectEventArgs e)
    {
        TimeSpan time1 = TimeField1.SelectedTime;
        TimeSpan time2 = TimeField2.SelectedTime;

        this.TimeField1.SelectedTime = time2;
        this.TimeField2.SelectedTime = time1;
    }
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <h1>TimeField Control Variations</h1>
    <br />
    <h2>1. 12-hour time format</h2>
    <ext:TimeField ID="TimeField1" runat="server" MinTime="9:00" MaxTime="18:00" Increment="30"
        Format="hh:mm tt" />
    <br />
    <br />
    <h2>2. 24-hour time format</h2>
    <ext:TimeField ID="TimeField2" runat="server" MinTime="9:00" MaxTime="18:00" Increment="30"
        SelectedTime="09:00" Format="H:mm" />
    <br />
    <br />
    <ext:Button ID="Button1" runat="server" Text="Swap Selected Times" Icon="ArrowInout"
        OnDirectClick="Button1_Click" />
    </form>
</body>
</html>

页面效果：
这里写图片描述