How to create datepicker directive in angular?

Question

1.00/5 (1 vote)

See more:

I am trying to grab the custom directive of Angular in deep.

With some online post, I got a basic understanding on the syntax. Have heard a lot on datepicker directive.

So can someone please post an example of datepicker angular directive step by step?

Please ans this queries along with it:-

1)What is the use of require attribute?

2)When should I use 'A','E' for restrict option?(For ex datepicker)

3)What is the difference between compile & link function?

What I have tried:

app.directive('datetimepicker', function () {
return {
    restrict : 'AE',
    require :'ngModel',
    link : function(scope,ele, attr){}
    });

Posted 5-Jan-17 0:48am

Member 12906141

Updated 18-Feb-17 6:32am

OriginalGriff

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

David_Wimbley · Answer 1 · 2017-01-05T07:06:00

Quote:
1)What is the use of require attribute?

The require attribute will try to access another directive called (in your case) ngModel.

Quote:
2)When should I use 'A','E' for restrict option?(For ex datepicker)

This restricts the use of a your directive to a specific method of using it.

A = attribute. So something like <span datetimepicker=""></span>
E = Element. So something like <datetimepicker>
C = Class. So something like <span class="datetimepicker"></span>
M = Comment. So it would be something like 

I don't think you can use both AE for creating a directing but Im not 100% on that.

Quote:
3)What is the difference between compile & link function?

For this I would direct you to this link for an explanation: javascript - What is the difference between compile and link function in angularjs - Stack Overflow[^]

Then as for your request for someone to provide you step by step instructions for creating a date picker directive, I'd direct you to use google. This is beyond the scope of Quick Answers and isn't meant to provide tutorials.

Here are some promising links:

angularjs-datepicker[^]

javascript - AngularJS custom datepicker directive - Stack Overflow[^]

GitHub - g00fy-/angular-datepicker: calendar and datepicker directives for angular[^]

[Material Angular Js - DatePicker]

I'd also recommend you take a look at the Directive documentation for angular:

[Angular JS Directive]

pankaj287 · Answer 2 · 2017-02-18T06:32:00

Solution 2

You could simply consider using `ui-bootstrap` plugin `datepicker` component. It has simple syntax uib-datepicker. UI-bootstrap also has converted almost all bootstrap component to angularized version of it.

<div uib-datepicker ng-model="dt"></div>

Posted 18-Feb-17 6:32am

pankaj287