Anyone have a duration picker editor plugin?

washuit-iamm

I need something like this

I can build it myself but I was hoping someone had one. Couldnt find one out there on google for DTE yet.

colin

Hi @washuit-iamm ,

I've not seen one either, so suspect you'll to create it. We're happy to add it as a plugin if you're happy to share afterwards,

Cheers,

Colin

washuit-iamm

@colin

Screenshot:

Library:

https://github.com/koss-lebedev/bootstrap-duration-picker

Notes:

• Leverages moment.
• Value is set and extracted as seconds from the input.
• Value is returned from get with format "D.hh:mm:ss", TODO move this to config as a default. The reason for this format is C# can parse this from JSON directly into a TimeSpan.

Plugin:

(function (factory) {
  if (typeof define === "function" && define.amd) {
    // AMD
    define(["jquery", "moment", "datatables", "datatables-editor"], factory);
  } else if (typeof exports === "object") {
    // Node / CommonJS
    module.exports = function ($, dt) {
      if (!$) {
        $ = require("jquery");
      }
      factory($, dt || $.fn.dataTable || require("datatables"));
    };
  } else if (jQuery && moment) {
    // Browser standard
    factory(jQuery, moment, jQuery.fn.dataTable);
  }
})(function ($, moment, DataTable) {
  "use strict";

  if (!DataTable.ext.editorFields) {
    DataTable.ext.editorFields = {};
  }

  DataTable.ext.editorFields.duration = {
    create: function (conf) {
      conf._input = $('<input type="text" />');
      return conf._input;
    },

    get: function (conf) {
      var value = conf._input.val();
      var formattedDuration = moment
        .duration(parseInt(value), "seconds")
        .format("D.hh:mm:ss");
      return formattedDuration;
    },

    set: function (conf, val) {
      if (!conf.initComplete) {
        conf._input.durationPicker(conf.opts);
        conf.initComplete = true;
      }

      var duration = moment.duration(val);
      // Find the orig input, and pull the durationPicker instance out.
      conf._input.data("durationPicker").setValue(duration.asSeconds());
    },
  };
});

Hope this helps someone.

colin

Thanks for posting!

Colin