hust-epi/admin-ui/yvanui/yvanui.datetimebox.js

/**
 * YvanUI
 *
 * Copyright (c) 2018 www.yvanui.com. All rights reserved.
 * @author luoyifan@qq.com
 * @time 2018-12-18 20:16:00
 */
(function ($) {
  function createBox(target) {
    var state = $.data(target, "datetimebox");
    var opts = state.options;

    $(target).datebox($.extend({}, opts, {
      onShowPanel: function () {
        var value = $(this).datetimebox("getValue");
        setValue(this, value, true);
        opts.onShowPanel.call(this);
      }, formatter: $.fn.datebox.defaults.formatter, parser: $.fn.datebox.defaults.parser
    }));

    $(target).removeClass("datebox-f").addClass("datetimebox-f");
    $(target).datebox("calendar").calendar({
      showTime: true,
      onSelect: function (value) {
        opts.onSelect.call(this.target, value);
      }
    });

    if (!state.spinner) {
      var panel = $(target).datebox("panel");
      var p = $("<div style=\"padding:2px\"><input></div>").insertAfter(panel.children("div.datebox-calendar-inner"));
      state.spinner = p.children("input");
    }

    state.spinner.timespinner({ width: opts.spinnerWidth, showSeconds: opts.showSeconds, separator: opts.timeSeparator });
    $(target).datetimebox("initValue", opts.value);
  }

  function getDate(target) {
    var dateControl = $(target).datetimebox("calendar");
    var timeControl = $(target).datetimebox("spinner");
    var date = dateControl.calendar("options").current;
    return new Date(date.getFullYear(), date.getMonth(), date.getDate(), timeControl.timespinner("getHours"), timeControl.timespinner("getMinutes"), timeControl.timespinner("getSeconds"));
  }

  function doQuery(target, q) {
    setValue(target, q, true);
  }

  function doEnter(target) {
    var opts = $.data(target, "datetimebox").options;
    var date = getDate(target);
    setValue(target, opts.formatter.call(target, date));
    $(target).combo("hidePanel");
  }

  function setValue(target, value, remainText) {
    var opts = $.data(target, "datetimebox").options;
    $(target).combo("setValue", value);
    if (!remainText) {
      if (value) {
        var parsedValue = opts.parser.call(target, value);
        $(target).combo("setText", opts.formatter.call(target, parsedValue));
        $(target).combo("setValue", opts.formatter.call(target, parsedValue));
      } else {
        $(target).combo("setText", value);
      }
    }
    var parsedValue = opts.parser.call(target, value);
    $(target).datetimebox("calendar").calendar("moveTo", parsedValue);
    $(target).datetimebox("spinner").timespinner("setValue", getTimeString(parsedValue));

    function getTimeString(date) {
      function padz(value) {
        return (value < 10 ? "0" : "") + value;
      };
      var tt = [padz(date.getHours()), padz(date.getMinutes())];
      if (opts.showSeconds) {
        tt.push(padz(date.getSeconds()));
      }
      return tt.join($(target).datetimebox("options").timeSeparator);
    }
  }

  $.fn.datetimebox = function (options, param) {
    if (typeof options == "string") {
      var method = $.fn.datetimebox.methods[options];
      if (method) {
        return method(this, param);
      } else {
        return this.datebox(options, param);
      }
    }
    options = options || {};
    return this.each(function () {
      var state = $.data(this, "datetimebox");
      if (state) {
        $.extend(state.options, options);
      } else {
        $.data(this, "datetimebox", { options: $.extend({}, $.fn.datetimebox.defaults, $.fn.datetimebox.parseOptions(this), options) });
      }
      createBox(this);
    });
  };

  $.fn.datetimebox.methods = {
    options: function (jq) {
      var copts = jq.datebox("options");
      return $.extend($.data(jq[0], "datetimebox").options, {
        originalValue: copts.originalValue,
        disabled: copts.disabled,
        readonly: copts.readonly
      });
    },

    cloneFrom: function (jq, from) {
      return jq.each(function () {
        $(this).datebox("cloneFrom", from);
        $.data(this, "datetimebox", {
          options: $.extend(true, {}, $(from).datetimebox("options")),
          spinner: $(from).datetimebox("spinner")
        });
        $(this).removeClass("datebox-f").addClass("datetimebox-f");
      });
    },

    spinner: function (jq) {
      return $.data(jq[0], "datetimebox").spinner;
    },

    initValue: function (jq, value) {
      return jq.each(function () {
        var opts = $(this).datetimebox("options");
        var value = opts.value;
        if (value) {
          value = opts.formatter.call(this, opts.parser.call(this, value));
        }
        $(this).combo("initValue", value).combo("setText", value);
      });
    },

    setValue: function (jq, value) {
      return jq.each(function () {
        setValue(this, value);
      });
    },

    reset: function (jq) {
      return jq.each(function () {
        var opts = $(this).datetimebox("options");
        $(this).datetimebox("setValue", opts.originalValue);
      });
    }
  };

  $.fn.datetimebox.parseOptions = function (target) {
    var t = $(target);
    return $.extend({},
      $.fn.datebox.parseOptions(target),
      $.parser.parseOptions(target,
        ["timeSeparator", "spinnerWidth", { showSeconds: "boolean" }])
    );
  };

  $.fn.datetimebox.defaults = $.extend({}, $.fn.datebox.defaults,
    {
      //spinnerWidth: "100%",
      panelWidth: 422,
      panelHeight: 301,
      showSeconds: true,
      timeSeparator: ":",
      panelEvents: {
        mousedown: function (e) {
        }
      },
      keyHandler: {
        up: function (e) { },
        down: function (e) { },
        left: function (e) { },
        right: function (e) { },
        enter: function (e) { doEnter(this); },
        query: function (q, e) { doQuery(this, q); }
      },
      buttons: [
        {
          text: function (target) {
            return $(target).datetimebox("options").currentText;
          },
          handler: function (target) {
            var opts = $(target).datetimebox("options");
            setValue(target, opts.formatter.call(target, new Date()));
            $(target).datetimebox("hidePanel");
          }
        },
        {
          text: function (target) {
            return $(target).datetimebox("options").okText;
          },
          handler: function (target) {
            doEnter(target);
          }
        },
        {
          text: function (target) {
            return $(target).datetimebox("options").closeText;
          },
          handler: function (target) {
            $(target).datetimebox("hidePanel");
          }
        }
      ],

      formatter: function (date) {
        var h = date.getHours();
        var M = date.getMinutes();
        var s = date.getSeconds();

        function padz(v) {
          return (v < 10 ? "0" : "") + v;
        };
        var opts = $(this).datetimebox("options");
        var sep = opts.timeSeparator;
        var r = $.fn.datebox.defaults.formatter(date) + " " + padz(h) + sep + padz(M);
        if ($(this).datetimebox("options").showSeconds) {
          r += sep + padz(s);
        }
        return r;
      },

      parser: function (s) {
        if ($.trim(s) == "") {
          return new Date();
        }
        var dt = s.split(" ");
        var d = $.fn.datebox.defaults.parser(dt[0]);
        if (dt.length < 2) {
          return d;
        }
        var sep = $(this).datetimebox("options").timeSeparator;
        var tt = dt[1].split(sep);
        var hh = parseInt(tt[0], 10) || 0;
        var mm = parseInt(tt[1], 10) || 0;
        var ss = parseInt(tt[2], 10) || 0;
        return new Date(d.getFullYear(), d.getMonth(), d.getDate(), hh, mm, ss);
      }
    });
})(jQuery);