Angular directive for Zurb Foundation Datepicker

angular-foundation-datepicker.js

/**
 * Author: Hasibur Rahman Omi.
 * Email: [email protected].
 * Author URI: http://www.hasibomi.com.
 */

class FoundationDatepicker {
    constructor() {
        this.restrict = "E";
        this.replace = true;
        this.scope = {
            format: "@",
            disableDblClickSelection: "@",
            language: "@",
            pickTime: "@",
            model: "=",
            name: "@",
            id: "@"
        };
        this.template = '<input type="text" name="{{ name }}" id="{{ id }}" ng-model="model">';
        this.link = this.linkFunc;
    }

    /**
     * Directive link function.
     *
     * @param scope
     * @param elm
     * @param attr
     */
    linkFunc(scope, elm, attr) {
        elm.fdatepicker({
            format: attr.format || "mm-dd-yyyy",
            disableDblClickSelection: attr.disableDblClickSelection || true,
            language: attr.language || "vi",
            pickTime: attr.pickTime || false
        });
    }
}

angular.module("angular-foundation-datepicker", []).directive("foundationDatepicker", () => new FoundationDatepicker);

Exaple: <foundation-datepicker model="vm.fields.date" name="date" id="date"></foundation-datepicker>