JSFiddle - React, Tailwind, and code Playground

by Thomas Upton

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/../dijit/themes/claro/claro.css">
<body class="claro">
    <label for="progval">Drop down Time box:</label>
<input id="progval" />

JavaScript

require([
    'dojo/_base/declare',
    'dojo/_base/lang',
    'dijit/form/TimeTextBox',
    'dojo/date',
    'dojo/domReady!'
], function(declare, lang, TimeTextBox, date){
    var OpscTimeTextBox = declare([TimeTextBox], {

        compare: function(v1, v2){
            var cmpResult = this.inherited(arguments);
            if (cmpResult == 0){
                return cmpResult;
            }
            
            var isInvalid1 = this._isInvalidDate(v1);
			var isInvalid2 = this._isInvalidDate(v2);
            if (isInvalid1 || isInvalid2){
                return cmpResult;
            }
            
            var boundlessConstraints = lang.mixin({},
              this.constraints,
              {min: null, max: null});
            
            // Compare the value by using only the meaningful parts
            var fv1 = this.format(v1, boundlessConstraints),
                fv2 = this.format(v2, boundlessConstraints),
                pv1 = this.parse(fv1, boundlessConstraints),
                pv2 = this.parse(fv2, boundlessConstraints);
            
            return (fv1 == fv2) ? 0 : date.compare(pv1, pv2, this._selector);
        }
    });
    
    new OpscTimeTextBox({name: "progval", value: new Date(),
        constraints: {
            timePattern: 'HH:mm a',
            clickableIncrement: 'T00:15:00',
            visibleIncrement: 'T00:15:00',
            visibleRange: 'T01:00:00'
        }
    }, "progval").startup();
  
    var d = new Date();

    var t = new OpscTimeTextBox({});    
    t.set('value', d);
    var value1 = t.get('value');
    console.log('t1', value1, d);
    
    var t2 = new TimeTextBox({});
    t2.set('value', d);
    var value2 = t2.get('value');
    console.log('t2', value2, d);
});