does know easy date picker use in angular 2 app?
i cant seem jquery ui date picker working?
does know easy 1 implement.
i've tried html date doesnt work in browsers.
i'm using typescript html5 , angular2
i tried installing one: http://jankuri.com/components/angular2-datepicker
bug 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>
you chould try following angular2-compliant libraries:
to use ng2-datepicker, put following systemjs configuration in 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 moment library in scripts:
<script src="node_modules/moment/moment.js"></script> i use datepicker library in component, described below:
import {datepicker} 'ng2-datepicker/ng2-datepicker'; @component({ template: ` <datepicker [(ngmodel)]="company.date"></datepicker> `, directives: [datepicker] }) i have following error:
exception: exception: error during instantiation of datepicker!. original exception: typeerror: moment not function original stacktrace: (...) to make work commented following line in ng2-datepicker.ts file:
import * moment 'moment'; hope helps you, thierry
Comments
Post a Comment