datetimeWidget.js

Go to the documentation of this file.

 
define( [
                'remoto!stdlib:js/widgets/widget.js',
                'include/modal/chooseDateTime/chooseDateTime',
                'remoto!stdlib:js/include/utils.js',
                'remoto!stdlib:js/include/date.js',
                'remoto!stdlib:js/widgets/widgets/datetimeWidget.css',
        ],
        function(widget,chooseDateTime,utils,date)
        {
                'use strict';
 
                datetimeWidget.prototype = new widget;
                function datetimeWidget( d )
                {
                        var value = d.value || null;
 
                        if (value === "NOW" || !value)
                                d.value = Date.now();
 
                        if (value === "NEXTHOUR")
                        {       var dd = new Date();
                                dd.setHours( dd.getHours() + 1 );
                                d.value = dd.getTime();
                        }
 
                        widget.call( this, d );
                }
 
                datetimeWidget.prototype.createWidget = function()
                {
                        if (this._widgetJq) return this._widgetJq;
 
                        widget.prototype.createWidget.call(this);
 
                        var THIS = this;
 
                        var e = this._widgetJq;
                        var r = e;
 
                        if (this._options.nowbutton)
                        {
                                //http://jsfiddle.net/EAEKc/
                                //http://stackoverflow.com/questions/1017880/expand-div-to-max-width-when-floatleft-is-set
 
                                var f = $("<div>");
                                //this._widgetJq = f;
                                r = f;
                                f.css( { "position": "relative",
                                        "padding-right":"20px"
                                } );
 
                                e.appendTo(f);//.css( { "margin-right":"20px" } );
 
                                var nb = $("<div>").addClass("dateTimeNowButton").appendTo(f);//.html("&nbsp;");//.html("&#9203;");//html("&#8986;");//.html("&#10026;");
                                var ni = $("<img>").appendTo(nb).css("width","90%");
                                ni.attr( "src","data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"-10 -10 398.311 398.311\" vector-effect=\"non-scaling-stroke\" stroke=\"white\" fill=\"black\"><circle cx=\"189\" cy=\"189\" r=\"160\" fill=\"white\"/><path d=\"M189.156 0C84.858 0 .001 84.858.001 189.155c0 104.298 84.857 189.155 189.155 189.155 104.304 0 189.154-84.857 189.154-189.155C378.31 84.858 293.46 0 189.156 0zm0 347.144c-87.117 0-157.988-70.87-157.988-157.988 0-87.115 70.871-157.988 157.988-157.988s157.986 70.873 157.986 157.988c0 87.117-70.87 157.988-157.986 157.988z\"/><path d=\"M204.739 182.963V75.841c0-8.606-6.977-15.584-15.583-15.584-8.605 0-15.582 6.978-15.582 15.584v113.314c0 4.839 2.25 9.101 5.703 11.962.146.176.245.373.397.546l58.438 66.354a15.572 15.572 0 0 0 11.701 5.279 15.5 15.5 0 0 0 10.289-3.888c6.461-5.692 7.084-15.537 1.398-21.998l-56.761-64.447z\"/></svg>");
                                nb.attr("title","Set to always be current date/time.");
 
                                nb.bind("click", function() {
                                        //e.val(0);
                                        THIS.value = 0;
                                        return false;
                                } );
 
                                f.val = function(v)
                                {
                                        return e.val(v);
                                };
                        }
 
                        e.val = function(v)
                        {
                                if (arguments.length > 0)
                                {
                                        var vv = "";
 
                                        if (v > 0)
                                        {
                                                var d = new Date();
                                                d.setTime(v);
 
                                        /*
                                                var fmt = 'm/d/Y';
 
                                                if (THIS._options.dateOnly)
                                                        fmt = 'm/d/Y';
                                                else
                                                        fmt = 'm/d/Y H:i T';
                                        */
 
                                        //      vv = d.dateFormat(fmt);
 
                                                if (THIS._options.dateOnly)
                                                {       vv = d.toLocaleDateString("en-US", {year:"numeric", month:"2-digit", day:"2-digit"});
                                                }
                                                else
                                                {       vv = d.toLocaleString("en-US", {hour12: false, year:"numeric", month:"2-digit", day:"2-digit", hour:"2-digit", minute:"2-digit", timeZoneName:"short"});
                                                }
 
                                                //manually create the "m/d/Y H:i T" format.
                                        /*      vv += THIS.spad(d.getMonth()+1,2);
                                                vv += "/" + THIS.spad(d.getDate(),2);
                                                vv += "/" + d.getFullYear();
 
                                                if (!THIS._options.dateOnly)
                                                {       vv += " " + THIS.spad(d.getHours(),2);
                                                        vv += ":" + THIS.spad(d.getMinutes(),2);
                                                        //vv += " " + d.getTimezone();          //bad implementation that requires the jquery plugin to override the Date prototype.  Ug.
 
                                                        var z = d.getTimezoneOffset();
                                                        var zh = Math.floor(z/60);
                                                        var zm = Math.floor(z%60);
                                                        var zs = (z > 0) ? "+" : "-";
                                                        vv += " GMT"+zs+THIS.spad(zh,2)+":"+THIS.spad(zm,2);
                                                }
                                        */
 
                                                //console.log(vv);
                                        }
                                        else
                                        {
                                                vv = "(current time/date)";
                                                //vv = "(will track with current time)";
                                                //vv = "";
                                        }
 
                                        //console.log(vv);
                                        //e.attr("value",vv);
                                        e.attr("date",v);
                                        //THIS.value = parseInt(v);
                                        e[0].value = vv;
                                }
 
                                //return THIS._value;
                                return e.attr("date");
                        }
 
                        this._widgetJq.val(this._value);
 
                        //return this._widgetJq;
                        return r;
                }
 
                datetimeWidget.prototype.activate = function()
                {
                        widget.prototype.activate.call(this);
 
                        this._widgetJq.css("cursor","pointer");
                        this._widgetJq.attr("readonly","readonly");
 
                        var ops = {};
                        if (this._options.dateOnly)
                        {
                                ops.format = 'm/d/Y';
                                ops.timepicker = false;
                                ops.closeOnDateSelect = true;
                        }
                        else
                        {
                                ops.format = 'm/d/Y H:i T';
                                ops.timepicker = true;
                                ops.closeOnDateSelect = false;
                        }
 
                        var THIS = this;
 
                        var e = this._widgetJq;
                        e.focus( function() {
 
                                var selectedSomething = false;
 
                                var dd = new Date(THIS.value);
 
                                e.datetimepicker({
                                        //lazyInit:             true,
                                        step:                   15,
                                        //format:               'm/d/Y H:i T',
                                        format:                 ops.format,
                                        timepicker:             ops.timepicker,
                                        closeOnDateSelect:      ops.closeOnDateSelect,
                                //      format:                 'unixtime',
                                        formatTime:             'H:i',
                                        formatDate:             'm/d/Y',
                                        yearStart:              2010,
                                        yearEnd:                2030,
                                        validateOnBlur:         false,
                                        scrollMonth:            false,
                                        scrollTime:             false,
                                        scrollInput:            false,
                                //      value:                  e.attr("date"),
                                        value:                  dd,
                                //      value:                  THIS.value,
                                        onSelectTime:           function(dp,$input){
                                                                        //e.val(dp.getTime());
                                                                        THIS.value = dp.getTime();
                                                                        selectedSomething = true;
                                                                },
                                        onChangeDateTime:       function(dp,$input){
                                                                        //e.val(dp.getTime());
                                                                        THIS.value = dp.getTime();
                                                                        selectedSomething = true;
                                                                },
                                        onClose:                function(dp,$input){
                                                                        //console.log(arguments);
                                                                        //console.log(dp.getTime());
                                                                        //if (selectedSomething)
                                                                        //      e.val(dp.getTime());
                                                                                //THIS.value = dp.getTime();
                                                        //              e.datetimepicker('destroy');
                                                                        $('body').unbind("modal.dismiss modal.accept");
                                                                        $input.blur();
                                                                },
                                        onShow:                 function(dp,$input){
                                                                        var dt = $input.data('xdsoft_datetimepicker');
                                                                        $('body').bind("modal.dismiss modal.accept", function() {
                                                                                //console.log("dismiss!");
                                                                                dt.trigger('close.xdsoft');
                                                                                dt.remove();
                                                                                //e.datetimepicker('destroy.xdsoft');
                                                                        } );
                                                                },
                                });
                                e.trigger('open.xdsoft');
                        });
                }
 
                datetimeWidget.prototype.deactivate = function()
                {
                        widget.prototype.deactivate.call(this);
                }
 
 
                datetimeWidget.prototype.spad = function(s,l)
                {
                        l = l || 6;
                        s = "000000"+s;
                        s = s.substr(s.length-l,l);
                        return s;
                }
 
                datetimeWidget.prototype.destroy = function()
                {
                        var dt = this._widgetJq.data('xdsoft_datetimepicker');
                        if (dt)
                        {
                                dt.trigger('close.xdsoft');
                                dt.remove();
                        }
 
                        widget.prototype.destroy.call(this);
                }
 
                datetimeWidget.prototype.__defineSetter__("value", function(v)
                {
                        v = parseInt(v,10);
 
                        widget.prototype.__lookupSetter__("value").call(this,v);
 
                        return v;
                });
 
                datetimeWidget.prototype.__defineGetter__("value", function()
                {
                        var v = widget.prototype.__lookupGetter__("value").call(this);
 
                        return parseInt(v,10);
                } );
 
                return datetimeWidget;
        }
);