Skip to content

Commit 6e6472d

Browse files
mchapmanmchapman
committed
Include code from zhaber's project
1 parent 471a64e commit 6e6472d

6 files changed

+562
-16
lines changed

‎LICENSE

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
MIT License
22

33
Copyright (c) 2017 Mark Chapman
4+
Copyright (c) 2012-2013 the AngularUI Team, https://github.com/organizations/angular-ui/teams/291112
45

56
Permission is hereby granted, free of charge, to any person obtaining a copy
67
of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +19,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1819
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1920
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2021
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21-
THE SOFTWARE.
22+
THE SOFTWARE.

‎README.md

+188-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# fng-bootstrap-datetime
22

3-
Plugin for forms-angular that adds datetime picker (github.com/zhaber/angular-js-bootstrap-datetimepicker) support.
3+
Plugin for forms-angular that adds datetime picker support.
44

55
## Usage
66

@@ -27,10 +27,10 @@ In your Mongoose schemas you can set up fields like this:
2727
},
2828

2929
Options can be added to a fngUiBootstrapDatetimePicker object within the form object as illustrated by the examples above.
30-
A complete list of setting options can be found in the Settings section of [this page](https://github.com/zhaber/angular-js-bootstrap-datetimepicker). Any setting
30+
A complete list of setting options can be found in the Settings section below. Any setting
3131
Date options (see [uib-datepicker](https://angular-ui.github.io/bootstrap/#!#datepicker) settings can be added as a JSON string as shown above.
3232

33-
For (my) convenience, the following defaults have been changed from https://github.com/zhaber/angular-js-bootstrap-datetimepicker:
33+
For (my) convenience, the following defaults have been changed from the defaults shown below:
3434

3535
show-button-bar: false,
3636
show-meridian: false,
@@ -40,4 +40,188 @@ For (my) convenience, the following defaults have been changed from https://gith
4040
###Known Limitations:
4141

4242
Styling in (unsupported) Bootstrap 2 applications (such as the forms-angular.org website at the time of writing) has a few issues,
43-
including inline help placing and the width of the first columnof the dropdown when weeks are not shown.
43+
including inline help placing and the width of the first columnof the dropdown when weeks are not shown.
44+
45+
##Readme from github.com/zhaber/angular-js-bootstrap-datetimepicker (now Angular 4+ only)
46+
47+
The plugin is based on AngularUI [Datepicker](https://github.com/angular-ui/bootstrap/tree/master/src/datepicker) and [Timepicker](https://github.com/angular-ui/bootstrap/tree/master/src/timepicker).
48+
49+
Demo: [Plunker](http://plnkr.co/edit/qRhNlfTWlt9wIexa3WbB?p=preview)
50+
51+
Date is formatted using the [date filter](http://docs.angularjs.org/api/ng.filter:date) and is localized.
52+
53+
## Install
54+
55+
### NPM
56+
Run `npm install angular-ui-bootstrap-datetimepicker` to install. Use the `--save` option to add it to your package.json's dependencies.
57+
58+
If you're using browserify, you can simply `require('angular-ui-bootstrap-datetimepicker')` to make it available in your angular project. Ensure that your angular module depends on `ui.bootstrap.datetimepicker`. You must be using the `ui.bootstrap` module as well - also availbe via npm.
59+
60+
Also include the stylesheet `datetimepicker.css` in your html. Note that this is the same stylesheet that the package.json's `style` declaration has.
61+
62+
### Bower
63+
64+
Run `bower install angular-ui-bootstrap-datetimepicker --save` to persist it to `bower.json`
65+
66+
Include the `ui.bootstrap.datetimepicker` module in your `app.js` file. You must be using the `ui.bootstrap` module as well.
67+
68+
### NuGet
69+
70+
See https://www.nuget.org/packages/Angular-js-bootstrap-datetimepicker/
71+
72+
## Usage Sample
73+
~~~javascript
74+
// Disable weekend selection
75+
$scope.isDisabledDate = function(currentDate, mode) {
76+
return mode === 'day' && (currentDate.getDay() === 0 || currentDate.getDay() === 6);
77+
};
78+
~~~
79+
~~~html
80+
<datetimepicker ng-model="date"
81+
date-format="dd-MMM-yyyy"
82+
date-options="dateOptions"
83+
date-disabled="isDisabledDate(date, mode)">
84+
</datetimepicker>
85+
~~~
86+
87+
## Datetimepicker Settings
88+
89+
* `clear-text`
90+
_(Default: 'Clear')_ :
91+
The text to display for the clear button.
92+
93+
* `close-text`
94+
_(Default: 'Done')_ :
95+
The text to display for the close popup button.
96+
97+
* `current-text`
98+
_(Default: 'Today')_ :
99+
The text to display for the current day button.
100+
101+
* `datepicker-append-to-body`
102+
_(Default: false)_ :
103+
Append the datepicker popup element to body, rather than inserting after datepicker-popup.
104+
105+
* `datepicker-popup-template-url`
106+
_(Default: uib/template/datepickerPopup/popup.html)_ :
107+
Add the ability to override the template used on the component.
108+
109+
* `datepicker-template-url`
110+
_(Default: uib/template/datepicker/datepicker.html)_ :
111+
Add the ability to override the template used on the component (inner uib-datepicker).
112+
113+
* `date-disabled (date, mode)`
114+
_(Default: null)_ :
115+
An optional expression to disable visible options based on passing date and current mode _(day|month|year)_.
116+
117+
* `date-format`
118+
_(Default: 'yyyy-MM-dd')_ :
119+
The format for displayed dates.
120+
121+
* `date-ng-click`
122+
_(Default: null)_ :
123+
A function called when a date input is clicked.
124+
125+
* `date-opened`
126+
_(Default: false)_ :
127+
Whether or not to show the datepicker.
128+
129+
* `date-options` attribute.
130+
_(Default: {})_ :
131+
Options for datepicker in JSON format. E.g. minDate and maxDate, which define the minimum and maximum available date and time.
132+
133+
* `day-format`
134+
_(Default: 'dd')_ :
135+
Format of day in month.
136+
137+
* `day-header-format`
138+
_(Default: 'EEE')_ :
139+
Format of day in week header.
140+
141+
* `day-title-format`
142+
_(Default: 'MMMM yyyy')_ :
143+
Format of title when selecting day.
144+
145+
* `disabled-date`
146+
_(Defaults: false)_ :
147+
Whether the date input is disabled.
148+
149+
* `hidden-date`
150+
_(Defaults: false)_ :
151+
Whether a user can see the date input.
152+
153+
* `hidden-time`
154+
_(Defaults: false)_ :
155+
Whether a user can see the hours & minutes input.
156+
157+
* `hour-step` <i class="icon-eye-open"></i>
158+
_(Defaults: 1)_ :
159+
Number of hours to increase or decrease when using a button.
160+
161+
* `max-time`
162+
_(Defaults: ['12:59 PM'])_ :
163+
Maximum time for time picker (Date).
164+
165+
* `meridians`
166+
_(Defaults: ['AM', 'PM'])_ :
167+
Meridian labels
168+
169+
* `min-time`
170+
_(Defaults: ['0:00 AM'])_ :
171+
Minumum time for time picker (Date).
172+
173+
* `minute-step` <i class="icon-eye-open"></i>
174+
_(Defaults: 1)_ :
175+
Number of minutes to increase or decrease when using a button.
176+
177+
* `month-format`
178+
_(Default: 'MMMM')_ :
179+
Format of month in year.
180+
181+
* `month-title-format`
182+
_(Default: 'yyyy')_ :
183+
Format of title when selecting month.
184+
185+
* `mousewheel`
186+
_(Defaults: true)_ :
187+
Whether user can scroll inside the hours & minutes input to increase or decrease it's values.
188+
189+
* `ng-model`
190+
:
191+
The date and time object.
192+
193+
* `readonly-date`
194+
_(Defaults: false)_ :
195+
Whether a user can type inside the date input.
196+
197+
* `readonly-time`
198+
_(Defaults: false)_ :
199+
Whether a user can type inside the hours & minutes input.
200+
201+
* `required`
202+
_(Defaults: false)_ :
203+
Whether a non-empty value is required.
204+
205+
* `show-button-bar`
206+
_(Defaults: true)_ :
207+
Whether or not to display a button bar underneath the uib-datepicker..
208+
209+
* `show-meridian` <i class="icon-eye-open"></i>
210+
_(Defaults: true)_ :
211+
Whether to display 12H or 24H mode.
212+
213+
* `show-spinners`
214+
_(Defaults: true)_ :
215+
Shows spinner arrows above and below the inputs.
216+
217+
* `timepicker-template-url`
218+
_(Defaults: uib/template/timepicker/timepicker.html)_ :
219+
Add the ability to override the template used on the component.
220+
221+
* `year-format`
222+
_(Default: 'yyyy')_ :
223+
Format of year in year range.
224+
225+
* `year-range`
226+
_(Default: 20)_ :
227+
Number of years displayed in year selection.

‎bower.json

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
{
22
"name": "fng-bootstrap-datetime",
3-
"description": "datetime input plugin for forms-angular, using angular-ui-bootstrap-datetimepicker",
3+
"description": "datetime input plugin for forms-angular",
44
"version":"0.11.0",
55
"main": [
66
"fng-bootstrap-datetime.js",
77
"fng-bootstrap-datetime.css"
88
],
99
"authors": [
10-
"Mark Chapman"
10+
"Mark Chapman",
11+
"Vitalii Fedorenko"
1112
],
1213
"license": "MIT",
1314
"keywords": [
@@ -20,8 +21,5 @@
2021
"bower_components",
2122
"test",
2223
"tests"
23-
],
24-
"dependencies": {
25-
"angular-ui-bootstrap-datetimepicker":"latest"
26-
}
24+
]
2725
}

‎fng-bootstrap-datetime.css

+16-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
1+
.datetimepicker-wrapper {
2+
vertical-align: middle;
3+
display: inline-block;
4+
}
5+
6+
.datetimepicker-wrapper > input {
7+
margin-bottom: 0 !important;
8+
width: 130px;
9+
}
10+
11+
.datetimepicker-wrapper [ng-model=hours],
12+
.datetimepicker-wrapper [ng-model=minutes] {
13+
width: 46px !important;
14+
}
15+
116
.dtwrap {
217
min-width: 230px;
3-
}
18+
}

0 commit comments

Comments
 (0)