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

[Todd]

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.

[OnaBai]

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" />

[Todd]

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.

[OnaBai]

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

[Todd]

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!

[OnaBai]

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!

[Todd]

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

min-max data Attribute coming in future release