Setting HTML property with JQuery

Question

I am using a combination of JQuery, Modernizr, and Angular to achieve a custom Datepicker solution for a table generated via ng-repeat. The solution works if I hard-code the Angular directive of "datepicker" into the HTML.

So, for example, within my table using ng-repeat"revenue in runway.revenues" this works:

 <td> 
     <input type="date" class="form-control" ng-model="revenue.date" placeholder="YYYY-MM-DD" datepicker required/> 
 </td>

But I would like for this to only be put into place when the user is in a browser that requires it. So, with this in mind, I have deleted datepicker from the above HTML, and written this in JS:

    $(function() {
        var nativeDateInputIsSupported = Modernizr.inputtypes.date;
        if (!nativeDateInputIsSupported) {
            $('input[type="date"]').prop("datepicker", true)
        }
    });

However, when I land on the page in Firefox, it does not appear to work.

Further, if I try to debug by doing something like console.log($('input[type="date"]').prop("class")) the value returned will be undefined (which should be form-control).

Any tips would be greatly appreciated!

I'm not sure about the main problem because I have least experience in angular & modernizr, but the last one should be: console.log($('input[type="date"]').attr("class")) or console.log($('input[type="date"]').prop("className")) — Taufik Nur Rahmanda
– Taufik Nur Rahmanda, Commented Sep 27, 2017 at 1:31
@TaufikNurRahmanda, I tried those too and neither worked (still returns undefined). And for the guest friend, that does not work. I have done .attr("datepicker", "") which does nothing. Also, as of September, that doesn't seem to work with JQuery according to a few other Stack Overflow users. — Alex Gelinas
– Alex Gelinas, Commented Sep 27, 2017 at 1:37
@AlexGelinas I suspect the problem is because of conflict between libraries (jquery+angular+modernizr), is there any console error message? if no, try console.log($('input[type="date"]').length) (it will get the number of matched element exist in DOM, if there's more than 1, .attr() or .prop() won't work), if result is 1, then try console.log($('input[type="date"]').prop('outerHTML')) (maybe really there's no class attribute) — Taufik Nur Rahmanda
– Taufik Nur Rahmanda, Commented Sep 27, 2017 at 1:53
Hm, if I try console.log($('input[type="date"]').length), the returned result is 0. This occurs if I include it within a $(document).ready(... as well — Alex Gelinas
– Alex Gelinas, Commented Sep 27, 2017 at 2:00

guest271314 · Accepted Answer · 2017-09-27 01:40:59Z

1

Use .attr() or .setAttribute() to set attribute at HTML

document.querySelector("input").setAttribute("datepicker", true);

console.log(document.querySelector("input").outerHTML);

<input type="text">

$("input").attr("datepicker", true);

console.log($("input")[0].outerHTML);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<input type="text">

$("input").prop("datepicker", true);

console.log($("input")[0].outerHTML); // attribute not set at HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<input type="text">

edited Sep 27, 2017 at 1:40

answered Sep 27, 2017 at 1:36

guest271314

1

Sign up to request clarification or add additional context in comments.

6 Comments

Alex Gelinas Over a year ago

This didn't seem to work for me. Please bear in mind there are 7 different inputs on this table (I only included the date for brevity), hence why I was using 'input[type="date"]'. Also, it should not be datepicker="true" in the HTML, it should simply be datepicker (like in the HTML example at the top, or if you were to use required for an input). That's why I was using prop('datepicker',true).

guest271314 Over a year ago

@AlexGelinas Can you describe "didn't seem to work"? Whether one or more <input> elements the same result should occur, where correct selector is used. Why is only datepicker attribute at HTML without a value the expected result?

Alex Gelinas Over a year ago

"Didn't seem to work" as in had no effect. The datepicker attribute is a directive I created in Angular, as mentioned in the initial question =) I had given an example of what worked with the top block of HTML code.

Alex Gelinas Over a year ago

I'm wondering if this is possibly to do with the fact that the section of HTML I am referring to doesn't technically exist in the DOM. It is what is being used to generate the table with ng-repeat. But if I try to do the same thing(s) after a $(document).ready(... it is still not effective.

guest271314 Over a year ago

"it should simply be datepicker" At which browser did you try setting datepicker attribute without a value and the HTML rendered <input datepicker> and not <input datepicker="">?

|

Alex Gelinas · Accepted Answer · 2017-09-27 02:30:28Z

I was able to get this to work by taking an idea from user @guest271314 and expanding on it a bit!

Rather than adding the attribute to the HTML based on Modernizr, I set a $scope variable equal to a boolean value.

  $(function() {
        var nativeDateInputIsSupported = Modernizr.inputtypes.date;
        if (!nativeDateInputIsSupported) {
            $scope.datePickerValue = "true"
        }
    });

Within my directive, I added this:

function link(scope, element, attrs, controller) {
        var requiredParam = attrs.datepicker === 'true'; //This was what was added
        if (requiredParam) { //Checking for boolean value
            element.datepicker({
                dateFormat: "yy-mm-dd",
                maxDate: '0'
            });
        }
    }

Which meant that in my HTML I added datepicker="{{datePickerValue}}" to the Date inputs, which now works!! Thank you for all of the help, I wouldn't have come back to this without your input =)

Collectives™ on Stack Overflow

Setting HTML property with JQuery

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related