Skip to content
This repository was archived by the owner on Oct 5, 2019. It is now read-only.

Commit 96a7efb

Browse files
Nikola KalinovNikola Kalinov
Nikola Kalinov
authored and
Nikola Kalinov
committed
Source files (Initial commit)
1 parent 07a3430 commit 96a7efb

31 files changed

Lines changed: 887 additions & 1 deletion

‎.gitignore‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# Created by .ignore support plugin (hsz.mobi)
2+
### JetBrains template
3+
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio
4+
5+
*.iml
6+
7+
## Directory-based project format:
8+
.idea/
9+
# if you remove the above rule, at least ignore the following:
10+
11+
# User-specific stuff:
12+
# .idea/workspace.xml
13+
# .idea/tasks.xml
14+
# .idea/dictionaries
15+
16+
# Sensitive or high-churn files:
17+
# .idea/dataSources.ids
18+
# .idea/dataSources.xml
19+
# .idea/sqlDataSources.xml
20+
# .idea/dynamic.xml
21+
# .idea/uiDesigner.xml
22+
23+
# Gradle:
24+
# .idea/gradle.xml
25+
# .idea/libraries
26+
27+
# Mongo Explorer plugin:
28+
# .idea/mongoSettings.xml
29+
30+
## File-based project format:
31+
*.ipr
32+
*.iws
33+
34+
## Plugin-specific files:
35+
36+
# IntelliJ
37+
/out/
38+
39+
# mpeltonen/sbt-idea plugin
40+
.idea_modules/
41+
42+
# JIRA plugin
43+
atlassian-ide-plugin.xml
44+
45+
# Crashlytics plugin (for Android Studio and IntelliJ)
46+
com_crashlytics_export_strings.xml
47+
crashlytics.properties
48+
crashlytics-build.properties
49+
50+
node_modules/
51+
typings/

‎.npmignore‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.idea
2+
3+
demo
4+
node_modules
5+
test
6+
typings
7+
8+
index.html
9+
karma.conf.js
10+
tsconfig.json

‎README.md‎

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,48 @@
11
# ng2-datetime
2-
Datetime picker plugins wrapper for Angular2
2+
Datetime picker plugins wrapper for Angular2.
3+
Tested with __angular 2.0.0-beta.9__
4+
5+
##### DEMO: https://nkalinov.github.io/ng2-datetime
6+
7+
## Dependencies
8+
- [Bootstrap3 (__CSS only__)](http://getbootstrap.com/)
9+
- [jQuery 2.x](http://jquery.com/)
10+
- [Bootstrap-timepicker __(JS+CSS)__](http://jdewit.github.io/bootstrap-timepicker/)
11+
`npm install --save bootstrap-datepicker` or use the bundled version from `src/vendor/bootstrap-datepicker`
12+
- [Bootstrap-datepicker __(JS+CSS)__](http://eternicode.github.io/bootstrap-datepicker/)
13+
`npm install --save bootstrap-timepicker` or use the bundled version from `src/vendor/bootstrap-timepicker`
14+
15+
## Installation
16+
`npm install --save ng2-datetime`
17+
18+
## Usage
19+
1. import some way or another the required dependencies
20+
If you want to use the bundled versions, you can import them like this:
21+
```
22+
import 'ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker.min.js';
23+
import 'ng2-datetime/src/vendor/bootstrap-timepicker/bootstrap-timepicker.min.js';
24+
```
25+
The bundled CSS is in the same folder, it's up to you to decide how to import those.
26+
2. `import {NKDatetime} from 'ng2-datetime/ng2-datetime';`
27+
3. Add to your component's directives property
28+
```
29+
@Component({
30+
...
31+
directives: [NKDatetime],
32+
...
33+
})
34+
```
35+
- Basic usage: `<datetime [(ngModel)]="date"></datetime>`
36+
See the [__DEMO__](https://nkalinov.github.io/ng2-datetime) and it [__source__](https://github.com/nkalinov/ng2-datetime/tree/master/demo) for more information.
37+
38+
## Contributing
39+
Fork > Create > Pull request
40+
__ISSUES:__ https://github.com/nkalinov/ng2-datetime/issues
41+
42+
### Thanks
43+
- @jdewit for the [timepicker plugin](https://github.com/jdewit/bootstrap-timepicker)
44+
- @eternicode for the [datepicker plugin](https://github.com/eternicode/bootstrap-datepicker)
45+
46+
## TODO:
47+
- find out how to test implemented ControlValueAccessor interface
48+
- test jQuery plugins init and events

‎demo/app.component.html‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<main class="container">
2+
<div class="page-header">
3+
<h1>Angular2 datetime component
4+
<small>v1.0.0</small>
5+
</h1>
6+
</div>
7+
<section>
8+
<h3>Dependencies:</h3>
9+
<ul>
10+
<li>
11+
<a href="http://getbootstrap.com/" target="_blank">Bootstrap3 <strong>(CSS only)</strong></a>
12+
</li>
13+
<li>
14+
<a href="http://jquery.com/" target="_blank">jQuery 2.x</a>
15+
</li>
16+
<li>
17+
<a href="http://jdewit.github.io/bootstrap-timepicker/" target="_blank">
18+
Bootstrap-timepicker <strong>(JS+CSS)</strong>
19+
</a> (version included in src files)
20+
</li>
21+
<li>
22+
<a href="http://eternicode.github.io/bootstrap-datepicker/" target="_blank">
23+
Bootstrap-datepicker <strong>(JS+CSS)</strong>
24+
</a> (version included in src files)
25+
</li>
26+
</ul>
27+
</section>
28+
<hr>
29+
<section class="panel panel-default">
30+
<div class="panel-heading">
31+
<h3 class="panel-title">
32+
Default behaviour (plugins default options)
33+
</h3>
34+
</div>
35+
<div class="panel-body">
36+
<p>
37+
<code>&lt;datetime [(ngModel)]="date">&lt;/datetime></code>
38+
</p>
39+
<datetime [(ngModel)]="date"></datetime>
40+
<h5><strong>ngModel:</strong> {{getDate(date) | date: "medium"}}</h5>
41+
</div>
42+
</section>
43+
<section class="panel panel-default">
44+
<div class="panel-heading">
45+
<h3 class="panel-title">
46+
Timepicker options
47+
<a href="http://jdewit.github.io/bootstrap-timepicker/" target="_blank">
48+
(see all)
49+
</a>
50+
</h3>
51+
</div>
52+
<div class="panel-body">
53+
<p>
54+
<code>&lt;datetime [timepicker]="{showMeridian: false, minuteStep: 1}"
55+
[(ngModel)]="date2">&lt;/datetime></code>
56+
</p>
57+
<datetime [(ngModel)]="date2" [timepicker]="{showMeridian: false, minuteStep: 1}"></datetime>
58+
<h5><strong>ngModel:</strong> {{getDate(date2) | date: "medium"}}</h5>
59+
</div>
60+
</section>
61+
<section class="panel panel-default">
62+
<div class="panel-heading">
63+
<h3 class="panel-title">
64+
Datepicker options
65+
<a href="http://bootstrap-datepicker.readthedocs.org/en/latest/options.html" target="_blank">
66+
(see all)
67+
</a>
68+
</h3>
69+
</div>
70+
<div class="panel-body">
71+
<p>
72+
<code>&lt;datetime [datepicker]="{daysOfWeekDisabled: [0,6]}"
73+
[(ngModel)]="date3">&lt;/datetime></code>
74+
</p>
75+
<datetime [(ngModel)]="date3" [datepicker]="{daysOfWeekDisabled: [0,6]}"></datetime>
76+
<h5><strong>ngModel:</strong> {{getDate(date3) | date: "medium"}}</h5>
77+
</div>
78+
</section>
79+
<section class="panel panel-default">
80+
<div class="panel-heading">
81+
<h3 class="panel-title">
82+
Empty model (date4 === undefined)
83+
</h3>
84+
</div>
85+
<div class="panel-body">
86+
<p>
87+
<code>&lt;datetime (ngModel)]="date4">&lt;/datetime></code>
88+
</p>
89+
<datetime [(ngModel)]="date4"></datetime>
90+
<h5><strong>ngModel:</strong> {{getDate(date4) | date: "medium"}}</h5>
91+
</div>
92+
</section>
93+
</main>

‎demo/app.component.js‎

Lines changed: 35 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/app.component.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/app.component.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import {Component} from 'angular2/core';
2+
import {Control, DatePipe} from 'angular2/common';
3+
import {NKDatetime} from '../src/ng2-datetime/ng2-datetime';
4+
5+
@Component({
6+
selector: 'my-app',
7+
directives: [NKDatetime],
8+
pipes: [DatePipe],
9+
templateUrl: 'demo/app.component.html'
10+
})
11+
export class AppComponent {
12+
date:Date = new Date();
13+
date2:Date = new Date('2016-06-08 10:00:00');
14+
date3:Date = new Date('2016-09-12 23:30:00');
15+
date4;
16+
17+
public getDate(dt):number {
18+
return dt && dt.getTime();
19+
}
20+
}

‎demo/main.js‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/main.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/main.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { bootstrap } from 'angular2/platform/browser';
2+
import { AppComponent } from './app.component';
3+
4+
bootstrap(AppComponent);

0 commit comments

Comments
 (0)