Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Dateinput] Replacing built in input type=date results in extra field shown on screen #95

Closed
rroesler opened this issue Jun 25, 2010 · 12 comments

Comments

@rroesler
Copy link

in Chrome, fix ...

    // Replace built-in date input: NOTE: input.attr("type", "text") throws exception by the browser
    if (input.attr("type") == 'date') {
        var tmp = $('<input debug="true"/>');
        $.each("name,readonly,disabled,value,required".split(","), function(i, attr)  {
            tmp.attr(attr, input.attr(attr));       
        });         
        input.replaceWith(tmp);
        input = tmp;
        input.hide();  // fix 
    }
@ghost
Copy link

ghost commented Jun 29, 2010

Hummmmmm...
Excuse me but where do you put this code ???
And what is this "input" variable ???
Thank's.

@tipiirai
Copy link
Contributor

the "native" HTML5 date input is being replaced with a regular input field. we want to avoid the build in calendar to appear. Just using chrome and there is no redundant field.

can I see a page with unexpected behaviour

@rroesler
Copy link
Author

rroesler commented Aug 5, 2010

tipiirai: I'll simplify my work and post or send a zip. The problem with replacing the supplied input field is that a) the existing field can not just be copied because that would not allow you to replace the type attribute; b) any simple "copy" schema will not know which attributes of the original tag to copy, which in-turn breaks other jquery plugins such as the ztInputHint with depends on the title attribute.

ben-22: The lines I replaced were in function Dateinput(input, conf) around line 200 in my copy. Just search for the comment // Replace built-in

@tipiirai
Copy link
Contributor

tipiirai commented Aug 9, 2010

the fact is that the type attribute needs to be changed and since it's not possible I cannot think of other way than copying a field and all the attributes.

or what do you have in mind?

@tipiirai
Copy link
Contributor

This is now fixed. Here is the commit:

http://github.com/jquerytools/jquerytools/commit/488efa04bc808f30ee1efd964e93d9dd9a069570

now every valid input attribute is copied for the cloned field

@MarcusJT
Copy link

Hmmm, not every valid attribute... what about HTML5 "data-xxx" attributes?

May I suggest that copying all the attributes from one element to another should be broken out into a separate function that can be reused, as this surely won't be the only case where an HTML5 field needs to be replaced by a jQueryTools widget?

Also, I think the approach should be to loop through the existing attributes of the source element and copy them across, except for attributes matching a blacklist (in this case just the "type" attribute should be ignored) rather than the current method of providing a whitelist... this would be more elegant, avoid missing attributes, and generally be more versatile IMHO.

@jquerytools
Copy link
Collaborator

surely this is a better approach. last time I inspected this I could not find a way to loop trough the arguments. the only thing I could use is outerHTML() method but that's only available for IE. do you know anything ? ... well hmm by the time or writing I came up with an idea: get the outerHTML with parent().innerHTML() and parse from there .. yea: i'll do that.

@MarcusJT
Copy link

See mapAttributes script posted at http://code.google.com/p/jquery-list-attributes/ - just add some code to filter out blacklisted fields specified in a parameter (e.g. "type") from the map, then you can use the map to directly populate the new input element attributes in one go using jQuery's built-in .attr(map) - http://api.jquery.com/attr/#attr2

And please make this a reusable function, it will come in handy elsewhere...

@MarcusJT
Copy link

I was thinking, perhaps it could also be achieved by using jQuery's .extend() method to merge the attributes of the source element with attributes of the new target element?

@rroesler
Copy link
Author

Sorry .. been on holidays ...

There is also placeholder attribute, min & max attributes, and perhaps a few of the other HTML5 common attributes.

And for people using XHTML, other non-standard attributes are allowed.

I like idea of using moving the original element into a wrapper and then trying innerHTML , but have not tried this myself.

@MarcusJT
Copy link

I've filed a feature request (for retrieving element attributes) in the Developing jQuery Core forum @ http://forum.jquery.com/topic/retrieving-all-attributes-of-a-given-element-and-their-values

A response has already suggested that mapAttributes script I suggested earlier may contain flaws (in IE - surprise)... so perhaps another route is needed... hopefully productive discussion will take place there which will result in an immediate solution to address the particular case here, as well as adding generic jQuery core support in the long term.

@jquerytools
Copy link
Collaborator

great. in the meantime I may attempt to use a custom script for this.

This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants