Menu
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>
278
If the Controls task pane is not visible, click More Controls on the Insert menu, or press ALT+I, C. Under Insert controls, click Date Picker. In the Date Picker Binding dialog box, select the field in which you want to store the date picker data, and then click OK.
Date picker is a terminology widely used in the context of app UI/UX. This is defined as an input field that allows a user to choose a date via text input or app interaction with a calendar interface.
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
121
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
