display time in a textbox and modify with up down arrows_问答_开发者

I want to display time in textbox or in something like a numericupdownextender used in AJAX so that the user can change time as he desires..

i have used the control to show numbers and increase accordingly..

is there a way to do this..

new code but not what is desired...

<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>

the code behind is:

 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;

        txtMi开发者_运维技巧nute.Text = sMinutes;

        txtDayPart.Text = sDayPart;
    }

Yes this should be pretty simple to achieve using the updownextender. Just attach web service methods to the serviceupmethod and servicedownmethod which increment/decrement your datetime by the required timespan. you haven't posted any code so it's difficult to know where you are stuck.

UPDATE: ok, so having thought about this, I don't think there is any real reason to use an updownextender with server call backs. A quick google discovered that javascript already has some basic date manipulation functions, so it's easy enough to do everything client side.

I'm not a javascript expert, so the following code is possibly of questionable quality, but it seems to work ok and hopefully will get you set on the right track. Let me know if you still get stuck.

<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>

Hrmm, I recommend you spend some time playing around with jQuery if you haven't. Hope it helps.

jQuery UI

John Resig

lovemore-world has a good article that hopefuly can inspire you and get the creative juices going.