Widget initialization using data-attributes: can you set min/max for date/time?

7 posts, 0 answers
  1. Todd
    Todd avatar
    26 posts
    Member since:
    Sep 2012

    Posted 12 Sep 2012 Link to this post

    When using widget initialization with "data-attributes", can you set min/max date/time for the date/time pickers?

    I've tried using "data-min" for both the date and time pickers, but Kendo doesn't like it.

    http://jsfiddle.net/q3FPV/3/

    Thanks.
  2. OnaBai
    OnaBai avatar
    55 posts
    Member since:
    Aug 2012

    Posted 12 Sep 2012 Link to this post

    The problem is that min values are literals and not evaluated.
    Same happens if you say:
    <input type="number" data-role="numerictextbox" data-min="12 + 3" />
    or
    <input type="number" data-role="numerictextbox" data-min="(12 + 3)" />
    but works perfectly for:
    <input type="number" data-role="numerictextbox" data-min="15" />
  3. Kendo UI is VS 2017 Ready
  4. Todd
    Todd avatar
    26 posts
    Member since:
    Sep 2012

    Posted 12 Sep 2012 Link to this post

    Thanks OnaBai, but that logic doesn't seem to apply to the timepicker.  I tried using this: data-min="6:00 AM" and data-min="1/1/2011 6:00 AM",  but both cause the timepicker to not intialize (the drop-down of time choices won't show).

    It appears that the date/time pickers don't allow min/max values from data-attributes, which is strange since other widgets do.
  5. OnaBai
    OnaBai avatar
    55 posts
    Member since:
    Aug 2012

    Posted 13 Sep 2012 Link to this post

    Todd,

    You are right! Taking a look into their code I see that when they parse options the check for null, true, false, float and json objects in this order. So something like 10:00 is returned as 10 (matches as float). When they try to get the hours of this object obviously fails since a getHours function does not exist.

    I have a "fix" for their code (I think it doesn't have side effects) and if you want I can share it with you BUT you have to change their code and I'm not sure if you are willing to do it.

    Anyhow I will submit it to Telerik just in case they want to include it in future releases.

    Best regards
  6. Todd
    Todd avatar
    26 posts
    Member since:
    Sep 2012

    Posted 13 Sep 2012 Link to this post

    Yes, please show me your fix, I'd like to use it.  I already have a couple of changes to their code (a fix to get case-insensitive sorting being one), so I don't mind making another.

    Thanks!
  7. OnaBai
    OnaBai avatar
    55 posts
    Member since:
    Aug 2012

    Posted 13 Sep 2012 Link to this post

    Hi Todd,

    The syntax for using it is:
    <input type="text" data-role="datepicker" data-min="eval(new Date('5/1/2010'))" /><br />
    <input type="text" data-role="timepicker" data-min="eval(new Date(2000,1,1,6,0,0))" />
    Basically enclose DATE_XYZ object into an eval(DATE_XYZ).
    Then you have to change in kendo.core.js parseObject such as:
    var templateRegExp = /template$/i,
        jsonRegExp = /^\s*(?:\{(?:.|\n)*\}|\[(?:.|\n)*\])\s*$/,
        jsonFormatRegExp = /^\{(\d+)(:[^\}]+)?\}/,
        evalRegExp = /^eval\((.*)\)/,
        dashRegExp = /([A-Z])/g;
     
    function parseOption(element, option) {
        var value;
     
        if (option.indexOf("data") === 0) {
            option = option.substring(4);
            option = option.charAt(0).toLowerCase() + option.substring(1);
        }
     
        option = option.replace(dashRegExp, "-$1");
        value = element.getAttribute("data-" + kendo.ns + option);
     
        if (value === null) {
            value = undefined;
        } else if (value === "null") {
            value = null;
        } else if (value === "true") {
            value = true;
        } else if (value === "false") {
            value = false;
        } else if (!isNaN(parseFloat(value))) {
            value = parseFloat(value);
        } else if (jsonRegExp.test(value) && !jsonFormatRegExp.test(value)) {
            value = $.parseJSON(value);
        } else if (evalRegExp.test(value)) {
            var res = evalRegExp.exec(value);
            if (res[1] !== null) {
                value = eval(res[1]);
            }
        }
     
        return value;
    }
    I also attach kendo.web.js and kendo.core.js for your convinience BUT make sure that we are using the same version and you did not modify something else otherwise just copy the parseObject function PLUS add evalRegExp definition.

    Hope it works for you!
  8. Todd
    Todd avatar
    26 posts
    Member since:
    Sep 2012

    Posted 14 Sep 2012 Link to this post

    Thanks.  See Telerik's response to my other post about it here:

    min-max data Attribute coming in future release
Back to Top
Kendo UI is VS 2017 Ready