Does anyone know a easy date picker to use in an angular 2 app?

Question

Does anyone know a easy date picker to use in an angular 2 app?

I cant seem to get jquery ui date picker working?

does anyone know an easy one to implement.

I've tried html date but it doesnt work in all browsers.

I'm using typescript with html5 and angular2

I tried installing this one: http://jankuri.com/components/angular2-datepicker

Bug I get this bug:

My current index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>test</title>
    <base href="/"></base>

    <meta charset="UTF-8">      
    <meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <link rel="icon" type="image/png" href="/favicon32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicon96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="/favicon16.png" sizes="16x16">

    <link rel="stylesheet" type="text/css" href="/css/animate.css" /> 
    <link rel="stylesheet" type="text/css" href="/bootstraptheme.css" />
    <link rel="stylesheet" type="text/css" href="/css/styles.css" /> 
    <link href='https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300italic,300,400italic,700italic,900,700,900italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>


    <script src="node_modules/moment/moment.js"></script>


    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.src.js"></script>   

    <script>
        System.config({
            transpiler: 'typescript',
            defaultJSExtensions: true,  
            typescriptOptions: {
                emitDecoratorMetadata: true,
            },          
            packages: {
                'angular2-google-maps': {
                  defaultExtension: 'js'
                }
            },
            map: {
                'ng2-datepicker': 'node_modules/ng2-datepicker'/*,
                'moment': 'node_modules/moment/moment.js'*/
            }
        });

    </script>


    <script src="/angular2_google_maps.js"></script>

    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>

    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/router.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/http.js"></script>  

    <script src="/firebase/firebaseNew.js"></script>

    <!--<script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>-->

  </head>

  <body id="container">

    <app></app>

    <script>      
      System.import('/app/app.component');
    </script>

    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-22148347-4', 'auto');
      ga('send', 'pageview');
    </script>

  </body>
</html>

Thierry Templier · Answer 1 · 2016-01-29T14:03:03.607

3

You chould try the following Angular2-compliant libraries:

To use ng2-datepicker, I put the following SystemJS configuration in my index.html file:

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      },
      'ng2-datepicker': {
        format: 'register',
        defaultExtension: 'js'
      }
    },
      map: {
        'ng2-datepicker': 'node_modules/ng2-datepicker'/*,
        'moment': 'node_modules/moment/moment.js'*/
      }
  });
</script>

and add the moment library in my scripts:

<script src="node_modules/moment/moment.js"></script>

I use the datepicker library in my component, as described below:

import {DatePicker} from 'ng2-datepicker/ng2-datepicker';

@Component({
  template: `
    <datepicker [(ngModel)]="company.date"></datepicker>
  `,
  directives: [DatePicker]
})

I have the following error:

EXCEPTION: EXCEPTION: Error during instantiation of DatePicker!.
ORIGINAL EXCEPTION: TypeError: moment is not a function
ORIGINAL STACKTRACE:
(...)

To make it work I commented the following line in the ng2-datepicker.ts file:

import * as moment from 'moment';

Hope it helps you, Thierry

edited Jan 29 '16 at 14:03

answered Jan 29 '16 at 11:32

Thierry Templier

198,364
44
396
360

Hi, I have tried this one before. I had trouble implementing it in my index file for the SystemJS.config part. I use System.config in my index instead so not sure how to do that – AngularM Jan 29 '16 at 11:33
I tried adding it but I get the above console error – AngularM Jan 29 '16 at 11:40
I edited my answer. I have problems with the moment library and SystemJS... By commenting a line in the library, I make it work. – Thierry Templier Jan 29 '16 at 12:14
still not work - i get error : cannot find namespace moment – AngularM Jan 29 '16 at 13:58
Did you add: ``? Remove: `import * as moment from 'moment';`? and comment the line: `import * as moment from 'moment';` in the `ng2-datepicker.ts` file? – Thierry Templier Jan 29 '16 at 14:02
Did you install moment using `npm install moment` in your project? – Thierry Templier Jan 29 '16 at 14:07
yeh did that. but it doesnt have a moment.d.ts file, just has a moment.js file – AngularM Jan 29 '16 at 14:08
ive just added my index file above – AngularM Jan 29 '16 at 14:14
Could you check in the Network tab of your browser that the `node_modules/moment/moment.js` file is actually loaded? – Thierry Templier Jan 29 '16 at 14:17
The website wont load now at all. Is there another date picker I could use. this one seems too hard work for what i need – AngularM Jan 29 '16 at 14:52
Which website? Did you try the other option of my answer? – Thierry Templier Jan 29 '16 at 14:54
my app just doesnt load at all. do you know any other date pickers i can use that wire up easier – AngularM Jan 29 '16 at 14:54

score 1 · Answer 2 · edited May 23 '17 at 12:02

1

You can try this one without importing extra files. I made this datepicker component using bootflat as styling framework and one datepicker library. For more info you can refer here.

edited May 23 '17 at 12:02

Community

1
1

answered Feb 03 '16 at 17:35

Pardeep Jain

84,110
37
165
215

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/11753228) – Panther Mar 24 '16 at 05:58
yeah exactly but referenced link is directly from my github repo so i cant be change most probably so linked to answer, – Pardeep Jain Mar 27 '16 at 13:04

Bhuvana L · Answer 3 · 2016-03-24T17:58:12.083

We wanted to develop a custom datepicker for our project and we couldn't find a lot of Angular2 Datepickers at that point and hence ended up writing a simple one myself.

It's a simple one which selects the date and you can also specify dates that you want to disable before and after. It uses event emitter and sets the selected date in a text field. It is published in npm and I am working on improving it as well.

https://www.npmjs.com/package/angular2-simple-datepicker

Hope it helps.

All feedback welcome.

Update - Added screenshot of the Datepicker with input date highlighted (orange) and hover color displayed (grey). Click here This can be downloaded from the npmjs link, do npm install and then npm run to view the Datepicker demo. It includes an app.js file which uses the datepicker component as ""

could you include an example of code how to implement? – Demodave Aug 17 '17 at 18:02 — Demodave, Aug 17 '17 at 18:02

vlio20 · Answer 4 · 2018-05-16T13:04:39.000

1

Take a look at this one: https://github.com/vlio20/ng2-date-picker, here is a demo: https://vlio20.github.io/angular-datepicker/ . It is highly configurable and has a material theme.

edited May 16 '18 at 13:04

answered Nov 20 '16 at 10:59

vlio20

8,955
18
95
180

1

You provided a links-only question, and now one of your links is no longer active and the other has changed. This needs to be updated to reflect these changes. – Grungondola May 16 '18 at 12:53
1

thanks. I figured it was just an oversight when you changed the name of the library. – Grungondola May 16 '18 at 18:24

Does anyone know a easy date picker to use in an angular 2 app?

4 Answers4

Linked