Ticket #6250: TimeTextBox.patch

File TimeTextBox.patch, 7.2 kB (added by nathan, 10 months ago)

Implements a dojox.form.TimeTextBox? widget (really, it just extends dijit._TimePicker). Also includes a test case - which is mostly a copy of dijit/tests/form/test_TimeTextBox.html

  • dojox/form/tests/test_TimeTextBox.html

     
     1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
     2        "http://www.w3.org/TR/html4/strict.dtd"> 
     3<html> 
     4        <head> 
     5                <title>Test TimeTextBox Widget</title> 
     6 
     7                <style type="text/css"> 
     8                        @import "../../../dojo/resources/dojo.css"; 
     9                        @import "../../../dijit/tests/css/dijitTests.css"; 
     10 
     11                        .testExample { 
     12                                background-color:#fbfbfb; 
     13                                padding:1em; 
     14                                margin-bottom:1em; 
     15                                border:1px solid #bfbfbf; 
     16                        } 
     17 
     18                        body .medium { 
     19                                width: 10em; 
     20                        } 
     21 
     22                        .noticeMessage { 
     23                                color:#093669; 
     24                                font-size:0.95em; 
     25                                margin-left:0.5em; 
     26                        } 
     27 
     28                        .dojoTitlePaneLabel label { 
     29                                font-weight:bold; 
     30                        } 
     31                </style> 
     32                 
     33                <script type="text/javascript" src="../../../dojo/dojo.js" 
     34                        djConfig="isDebug: true, parseOnLoad: true, extraLocale: ['de-de', 'en-us']"></script> 
     35                <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> 
     36 
     37                <script type="text/javascript"> 
     38                        dojo.require("dijit.form.TextBox"); 
     39                        dojo.require("dijit.form.ValidationTextBox"); 
     40                        dojo.require("dijit.form.NumberTextBox"); 
     41                        dojo.require("dijit.form.CurrencyTextBox"); 
     42                        dojo.require("dijit.form.DateTextBox"); 
     43                        dojo.require("dojox.form.TimeTextBox"); 
     44                        dojo.require("dojo.currency"); 
     45                        dojo.require("dojo.date.locale"); 
     46                        dojo.require("dojo.parser");    // scan page for widgets and instantiate them 
     47                </script> 
     48        </head> 
     49 
     50        <body> 
     51                <h1 class="testTitle">Test TimeTextBox Widget</h1> 
     52                <!--    to test form submission, you'll need to create an action handler similar to 
     53                        http://www.utexas.edu/teamweb/cgi-bin/generic.cgi --> 
     54                <form id="form1" action="" name="example" method=""> 
     55 
     56        <div class="dojoTitlePaneLabel"> 
     57                <label for="q1">Time using local conventions with seconds</label> 
     58                <span class="noticeMessage">TimeTextBox class, 
     59                        Attributes: {formatLength:'medium'}</span> 
     60        </div> 
     61        <div class="testExample"> 
     62                <input id="q1" type="text" name="time1" class="medium" value="T17:45:00" 
     63                        dojoType="dojox.form.TimeTextBox" 
     64                        constraints="{formatLength:'medium'}" 
     65                        required="true" 
     66                        onChange="dojo.byId('oc1').value=arguments[0]" 
     67                        invalidMessage="Invalid time." /> 
     68                onChange:<input id="oc1" size="34" disabled value="not fired yet!" autocomplete="off"> 
     69        </div> 
     70 
     71        <div class="dojoTitlePaneLabel"> 
     72                <label for="q2">Time using local conventions without seconds, required, no invalid message tooltip</label> 
     73                <span class="noticeMessage">TimeTextBox class, 
     74                        Attributes: {formatLength:'short'}</span> 
     75        </div> 
     76        <div class="testExample"> 
     77                <input id="q2" type="text" name="time1a" class="medium" value="T17:45:00" 
     78                        dojoType="dojox.form.TimeTextBox" 
     79                        constraints="{formatLength:'short'}" 
     80                        required="true" 
     81                        invalidMessage="" /> 
     82        </div> 
     83 
     84        <div class="dojoTitlePaneLabel"> 
     85                <label for="q3"> 12 Hour Time </label> 
     86                <span class="noticeMessage">TimeTextBox class, 
     87                        Attributes: {timePattern:'h:mm:ss a'}</span> 
     88        </div> 
     89        <div class="testExample"> 
     90                <input id="q3" type="text" name="time1b" class="medium" value="T17:45:00" 
     91                        dojoType="dojox.form.TimeTextBox" 
     92                        constraints="{timePattern:'h:mm:ss a'}" 
     93                        required="true" 
     94                        invalidMessage="Invalid time." /> 
     95        </div> 
     96 
     97        <div class="dojoTitlePaneLabel"> 
     98                <label for="q4"> 24 Hour Time</label> 
     99                <span class="noticeMessage">TimeTextBox class, 
     100                        Attributes: {timePattern:'HH:mm:ss'}</span> 
     101        </div> 
     102        <div class="testExample"> 
     103                <input id="q4" type="text" name="time2" class="medium" value="T17:45:00" 
     104                        dojoType="dojox.form.TimeTextBox" 
     105                        constraints="{timePattern:'HH:mm:ss'}" 
     106                        required="true" 
     107                        invalidMessage="Invalid time. Use HH:mm:ss where HH is 00 - 23 hours."> 
     108        </div> 
     109 
     110        <div class="dojoTitlePaneLabel"> 
     111                <label for="q5">24 Hour Time with 1 Hour TimePicker</label> 
     112                <span class="noticeMessage">TimeTextBox class, 
     113                        Attributes: {timePattern:'HH:mm:ss', clickableIncrement:'T00:15:00', visibleIncrement:'T00:15:00', visibleRange:'T01:00:00'}</span> 
     114        </div> 
     115        <div class="testExample"> 
     116                <input id="q5" type="text" name="time2" class="medium" value="T17:45:00" 
     117                        dojoType="dojox.form.TimeTextBox" 
     118                        constraints="{timePattern:'HH:mm:ss', clickableIncrement:'T00:15:00', visibleIncrement:'T00:15:00', visibleRange:'T01:00:00'}" 
     119                        required="true" 
     120                        invalidMessage="Invalid time. Use HH:mm:ss where HH is 00 - 23 hours."> 
     121        </div> 
     122 
     123        <script> 
     124                function displayData() { 
     125                        var f = document.getElementById("form1"); 
     126                        var s = ""; 
     127                        for (var i = 0; i < f.elements.length; i++) { 
     128                                var elem = f.elements[i]; 
     129                                if (elem.name == "button")  { continue; } 
     130                                s += elem.name + ": " + elem.value + "\n"; 
     131                        } 
     132                        alert(s); 
     133                } 
     134        </script> 
     135 
     136                <div> 
     137                        <button name="button" onclick="displayData(); return false;">view data</button> 
     138                        <input type="submit" name="submit" /> 
     139                </div> 
     140 
     141                </form> 
     142        </body> 
     143</html> 

  • dojox/form/TimeTextBox.js

     
     1dojo.provide("dojox.form.TimeTextBox"); 
     2 
     3dojo.require("dijit._TimePicker"); 
     4dojo.require("dijit.form._DateTimeTextBox"); 
     5 
     6dojo.declare("dojox.form._TimePicker", dijit._TimePicker, { 
     7        // summary: 
     8        //              Extends the core time picker to connect hover events to the 
     9        //              up and down buttons for auto-scrolling 
     10        postCreate: function(){ 
     11                this.inherited(arguments); 
     12                 
     13                // Connect some callback functions to the hover event of the arrows 
     14                var triggerFx = function(cb){ 
     15                        return function(cnt){ 
     16                                // don't run on the first firing 
     17                                if(cnt > 0){cb.call(this, arguments);} 
     18                        }; 
     19                }; 
     20                var hoverFx = function(node, cb){ 
     21                        return function(e){ 
     22                                dojo.stopEvent(e); 
     23                                dijit.typematic.trigger(e, this, node, triggerFx(cb), node, 0.85, 250); 
     24                        }; 
     25                }; 
     26                this.connect(this.upArrow, "onmouseover", hoverFx(this.upArrow, this._onArrowUp)); 
     27                this.connect(this.downArrow, "onmouseover", hoverFx(this.downArrow, this._onArrowDown)); 
     28        } 
     29}); 
     30 
     31/*===== 
     32dojo.declare( 
     33        "dojox.form.TimeTextBox.__Constraints", 
     34        [dijit.form._DateTimeTextBox.__Constraints, dijit._TimePicker.__Constraints] 
     35); 
     36=====*/ 
     37 
     38dojo.declare("dojox.form.TimeTextBox", dijit.form._DateTimeTextBox, { 
     39                // summary: 
     40                //              A validating, serializable, range-bound time text box with a popup time picker 
     41 
     42                popupClass: "dojox.form._TimePicker", 
     43                _selector: "time" 
     44 
     45/*===== 
     46                , 
     47                // constraints: dojox.form.TimeTextBox.__Constraints  
     48                constraints:{} 
     49=====*/ 
     50        } 
     51); 

  • dojox/form/README

     
    3737        * DropDownSelect - an extension to dijit.form.DropDownButton which is 
    3838                                                meant to mirror the html <select> drop down 
    3939 
     40        * TimeTextBox - an widget, similar to dijit.form.TimeTextBox which will 
     41                                                auto-scroll the list when you hover over the up/down 
     42                                                arrows