在文本框中显示时间并使用向上箭头修改

时间:2010-01-11 23:17:07

标签: c# asp.net ajax time

我希望在文本框中或在AJAX中使用的数字提示器中显示时间,以便用户可以根据需要更改时间..

我已经使用控件显示数字并相应增加..

有办法做到这一点..

新代码,但不是所期望的......

<asp:TextBox runat="server" ID="txtHour"></asp:TextBox>
<ajaxToolkit:NumericUpDownExtender ID="txtHour_NumericUpDownExtender" runat="server"   Enabled="True" Maximum="12" Minimum="1" TargetControlID="txtHour" Width="70"></ajaxToolkit:NumericUpDownExtender>

<asp:TextBox runat="server" ID="txtMinute"></asp:TextBox>
 <ajaxToolkit:NumericUpDownExtender ID="txtMinute_NumericUpDownExtender" runat="server" Enabled="True" Maximum="60" Minimum="1"  TargetControlID="txtMinute" Width="70"></ajaxToolkit:NumericUpDownExtender>

 <asp:TextBox runat="server" ID="txtDayPart"></asp:TextBox>
 <ajaxToolkit:NumericUpDownExtender ID="txtDayPart_NumericUpDownExtender" runat="server" Enabled="True" RefValues="AM;PM" TargetControlID="txtDayPart" Width="70"></ajaxToolkit:NumericUpDownExtender>

背后的代码是:

 private void ParseTime(string TimeString)
    {

        // Validation of input

        if (TimeString.IndexOf(":") == -1)
        {

            return;
        }

        if ((TimeString.IndexOf("PM") == -1) && (TimeString.IndexOf("AM") == -1))
        {

            return;
        }

        // Good to go with format

        int ColonPos = TimeString.IndexOf(":");
        int AMPos = TimeString.IndexOf("AM");

        int PMPos = TimeString.IndexOf("PM");
        string sHour = TimeString.Substring(0, ColonPos);

        string sMinutes = TimeString.Substring(ColonPos, 3); string sDayPart = (TimeString.IndexOf("AM") != -1) ? TimeString.Substring(AMPos, 2) : TimeString.Substring(PMPos, 2);
        txtHour.Text = sHour;

        txtMinute.Text = sMinutes;

        txtDayPart.Text = sDayPart;
    }

2 个答案:

答案 0 :(得分:2)

是的,使用updownextender实现起来应该非常简单。只需将web服务方法附加到serviceupmethod和servicedown方法,即按所需的时间间隔递增/递减日期时间。你还没有发布任何代码,因此很难知道你被困在哪里。

更新:好的,所以考虑到这一点,我认为没有任何真正的理由使用服务器回调的updownextender。一个快速谷歌发现javascript已经有一些基本的日期操作功能,所以它很容易做到客户端的一切。

我不是javascript专家,所以下面的代码可能质量有问题,但似乎工作正常,希望能让你设置在正确的轨道上。如果你仍然被卡住,请告诉我。

<head runat="server">
    <title></title>
    <script type="text/javascript" language="javascript">
        <!--
            var date;

            function initDateObject()
            {
                date = new Date ( "January 1, 2000 12:00:00" );
                showTimePortion();
            }

            function showTimePortion()
            {
                document.getElementById('timeDisplay').value = padToMinimumLength(date.getHours(),2) + ':' + padToMinimumLength(date.getMinutes(),2) + ':' + padToMinimumLength(date.getSeconds(),2);
            }

            function padToMinimumLength(number, requiredLength)
            {
                var pads = requiredLength - (number + '').length;
                while (pads > 0)
                {
                    number = '0' + number;
                    pads--;
                }
                return number;
            }

            function addMinutes(n)
            {
                date.setMinutes(date.getMinutes() + n);
                showTimePortion();
            }

            function setTodaysTime()
            {
                var d = new Date();
                d.setHours(date.getHours());
                d.setMinutes(date.getMinutes());
                d.setSeconds(date.getSeconds());
                alert('the time is now ' + d.toString());
            }
        -->
    </script>
</head>
<body onload="initDateObject();">
    <form id="form1" runat="server">
    <div>
        <input type="text" id="timeDisplay" readonly="readonly"/>
        <a href="#" onclick="addMinutes(1)">+</a>
        <a href="#" onclick="addMinutes(-1)">-</a>
        <br />
        <a href="#" onclick="setTodaysTime()">Submit</a>
    </div>
    </form>
</body>

答案 1 :(得分:0)

嗯,如果你没有,我建议你花一些时间玩jQuery。希望它有所帮助。

jQuery UI

John Resig

lovemore-world有一篇很好的文章,希望能够激发你的灵感并获得创造力。