CODEWITHSUNDEEP
javascripthtmljquery
Behnam
Behnam

Reputation: 1063

Grouping HTML elements and create a new eleme

Please consider I am having below codes which is a set of elements for selecting and showing date.

<div>
   <input type="text" class="txt txtDate"/>
   <input type="button" class="btn btnDate" value="Select from Calendar"/>
   <span class="remainedDays"></span>
<div>

Here I have an input for entering date, a button for selecting date from a calendar, and a label which shows difference between selected date and current date. All calculations and form interactions is handling by JavaScript and jQuery.

Since I use this date picker in many forms I'm looking for a way to define this elements in a new element and use new element. If I can do this I will write less codes and any change in in definition of new element will be automatically applied in all forms.

I am looking for something like this:

<mydatepicker class="dt1"></mydatepicker> or <mydatepicker class="dt1"/>

which should be rendered in browser as

    <div class="dt1">
       <input type="text" class="txt txtDate"/>
       <input type="button" class="btn btnDate" value="Select from Calendar"/>
       <span class="remainedDays"></span>
    <div>

Upvotes: 0

Views: 279

Answers (2)

Alireza Ahmadi
Alireza Ahmadi

Reputation: 9923

You need something like angular.js directive or Angular Component with pure JavaScript code.

You can create Web Component by extending HTMLElement and also you can get all attributes and class list of that custom Element to create more powerful and dynamic component:

class mydatepicker  extends HTMLElement {
            Classes;
            CustomLabel;
            constructor() {
                super();
                this.classes = this.classList.value;
                this.CustomLabel = this.getAttribute("CustomLabel");
            }


            connectedCallback() {
                this.innerHTML = `
                <div class="${this.classes}">
                      <label> ${this.CustomLabel} </label>
                       <input type="text" class="txt txtDate"/>
                       <input type="button" class="btn btnDate" value="Select from Calendar"/>
                       <span class="remainedDays"></span>
                <div>
              `;
            }

        }

        customElements.define("my-datepicker", mydatepicker);
.dt1{
   color:red;
}
<my-datepicker  class="dt1 dt2" CustomLabel="this is custome lable"> </my-datepicker>

Note that you can pass some classes and custom attribute you want

Upvotes: 0

Amirhossein Shahbazi
Amirhossein Shahbazi

Reputation: 1111

You can create a custom element in Vanilla JavaScript, but really not worth the hassle, I suggest you start using JavaScript frameworks for this kind of thing.

But anyway, you can do it in vanilla javascript like this:

First create a JavaScript file (e.g, c-element.js) and extend the HTMLElement class. Inside it's connectedCallback method, write the HTML content you'd like to render.

Then add the script to your HTML file, and just use the custom element's tag!

Of course, this is just a really simple example, you can add to it however you want. You can read the documentation on creating custom elements here.

class CElement extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        this.innerHTML = `
      <div class="c-element">
      <div class="c-element__heading">
      <h1> This is a custom element (CElement)</h1>
        </div>
        </div>
      `;
    }
}

customElements.define("c-element", CElement);
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<c-element> </c-element>
<script src="c-element.js"></script>
</body>
</html>

Upvotes: 1

Related Questions