Skip to content

Commit 68a33b4

Browse files
hexadecyhexadecy
committed
#81 Single click to select
1 parent 6499b74 commit 68a33b4

File tree

3 files changed

+64
-48
lines changed

3 files changed

+64
-48
lines changed

‎README.md‎

Lines changed: 40 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,24 @@
22

33
Originally designed for Bootstrap Material, this has been modified to work with [Angular Material](https://material.angularjs.org/). This is an Android style date-time picker for Angular Material. Some added features include:
44

5-
- Double click to select date or time
6-
- Swipe left to go to next month or Swipe right to go to previous month.
5+
- Double or single click to select date and/or time
6+
- Swipe left to go to next month or Swipe right to go to previous month
7+
- Configurable first day of the week
8+
- Support 24 hours format display
9+
- Can disable dates, not selectable by user
10+
- Can disable minutes view
11+
- Compatible with right-to-left direction
712

813
## Updates
914

10-
** I have kept this section of the document as an acknowledgement for all the work done on the original Bootstrap Material plugin **
11-
12-
| Date | Author | Description |
13-
| ----------------- | ----------------- | ------------------------------------------------------ |
14-
| 2017-01-30 | hexadecy | Add support only for angular 1.5.x - 1.6.x ($onInit) |
15-
| 2015-11-12 | logbon72 | Adapted plugin for Angular Material |
16-
| 2015-10-19 | benletchford | Fixed not being able to tab into input |
17-
| 2015-10-19 | drblue | Fixed erroneous package.json-file |
18-
| 2015-10-19 | Perdona | Fix auto resize when month has 6 weeks |
19-
| 2015-07-01 | T00rk | Redesigned element without using modal |
20-
| 2015-06-16 | T00rk | Use Timepicker alone / Display short time (12 hours) |
21-
| 2015-06-13 | T00rk | Fixed issue with HTML value tag |
22-
| 2015-05-25 | T00rk | Changed repo name to bootstrap-material-datetimepicker * |
23-
| 2015-05-12 | T00rk | Added parameters for button text |
24-
| 2015-05-05 | Sovanna | FIX undefined _minDate in isBeforeMaxDate func |
25-
| 2015-04-10 | T00rk | Little change in clock design |
26-
| 2015-04-10 | Peterzen | Added bower and requirejs support |
27-
| 2015-04-08 | T00rk | Fixed problem on locale switch |
28-
| 2015-03-04 | T00rk | Added Time picker |
15+
| Date | Author | Description |
16+
| ---------- | -------- | ---------------------------------------------------- |
17+
| 2017-04-17 | hexadecy | Single click to select |
18+
| 2017-02-27 | hexadecy | Can hide minutes view, Month next and prev buttons |
19+
| 2017-02-22 | hexadecy | Fix for rtl website |
20+
| 2017-02-15 | hexadecy | Fix inputs are not bluring after selection is made |
21+
| 2017-01-30 | hexadecy | Add support only for angular 1.5.x - 1.6.x ($onInit) |
22+
| 2015-11-12 | logbon72 | Adapted plugin for Angular Material |
2923

3024
### Dependencies
3125

@@ -56,15 +50,15 @@ bower install ng-material-datetimepicker
5650

5751
## CDN
5852
```
59-
<script src="https://unpkg.com/[email protected].10/dist/angular-material-datetimepicker.min.js"></script>
60-
<script src="https://unpkg.com/[email protected].10/dist/angular-material-datetimepicker.min.js.map"></script>
61-
<link href="https://unpkg.com/[email protected].10/dist/material-datetimepicker.min.css rel="stylesheet" type="text/css">
53+
<script src="https://unpkg.com/[email protected].12/dist/angular-material-datetimepicker.min.js"></script>
54+
<script src="https://unpkg.com/[email protected].12/dist/angular-material-datetimepicker.min.js.map"></script>
55+
<link href="https://unpkg.com/[email protected].12/dist/material-datetimepicker.min.css rel="stylesheet" type="text/css">
6256
```
6357
or
6458
```
65-
<script src="https://cdn.rawgit.com/beenote/angular-material-datetimepicker/v1.5.10/dist/angular-material-datetimepicker.min.js"></script>
66-
<script src="https://cdn.rawgit.com/beenote/angular-material-datetimepicker/v1.5.10/dist/angular-material-datetimepicker.min.js.map"></script>
67-
<link href="https://cdn.rawgit.com/beenote/angular-material-datetimepicker/v1.5.10/dist/material-datetimepicker.min.css" rel="stylesheet" type="text/css">
59+
<script src="https://cdn.rawgit.com/beenote/angular-material-datetimepicker/v1.5.12/dist/angular-material-datetimepicker.min.js"></script>
60+
<script src="https://cdn.rawgit.com/beenote/angular-material-datetimepicker/v1.5.12/dist/angular-material-datetimepicker.min.js.map"></script>
61+
<link href="https://cdn.rawgit.com/beenote/angular-material-datetimepicker/v1.5.12/dist/material-datetimepicker.min.css" rel="stylesheet" type="text/css">
6862
```
6963

7064
## Live Example
@@ -103,23 +97,24 @@ This plugin exposes a directive which should be used as an attribute for an inpu
10397

10498
The directive accepts several attributes which are described below:
10599

106-
| Name | Type | Description |
107-
| ----------------- | ----------------------------- | --------------------------------------------- |
108-
| **ng-model** | (String\|Date\|Moment) | Initial Date or model to assign the date to |
109-
| **ng-change** | Function | A function to call when the input value changes. |
110-
| **format** | String | [MomentJS Format](momentjs.com/docs/#/parsing/string-format/),defaults to `HH:mm` for time picker only, `YYYY-MM-DD` for date picker only and `YYYY-MM-DD HH:mm` for both timepicker and date picker |
111-
| **short-time** | Boolean | true => Display 12 hours AM\|PM (default: false) |
112-
| **min-date** | (String\|Date\|Moment) | Minimum selectable date |
113-
| **max-date** | (String\|Date\|Moment) | Maximum selectable date |
114-
| **date** | Boolean | true => Has Datepicker (default: true) |
115-
| **time** | Boolean | true => Has Timepicker (default: true) |
116-
| **minutes** | Boolean | true => Has Timepicker minutes (default: true) |
117-
| **cancel-text** | String | Text for the cancel button (default: Cancel) |
118-
| **today-text** | String | Text for the today button (default: Today) |
119-
| **ok-text** | String | Text for the OK button (default: OK) |
120-
| **week-start** | Number | First day of the week (default: 0 => Sunday) |
121-
| **disable-dates** | Date[] | Dates to be disabled or not selectable by user.|
122-
| **disable-parent-scroll** | Boolean | true => Disable scrolling while the dialog is open (default : false) |
100+
| Name | Type | Description |
101+
| ------------------------- | ----------------------- | -------------------------------------------------------------------- |
102+
| **ng-model** | (String\|Date\|Moment | Initial Date or model to assign the date to |
103+
| **ng-change** | Function | A function to call when the input value changes. |
104+
| **format** | String | [MomentJS Format](momentjs.com/docs/#/parsing/string-format/),defaults to `HH:mm` for time picker only, `YYYY-MM-DD` for date picker only and `YYYY-MM-DD HH:mm` for both timepicker and date picker |
105+
| **short-time** | Boolean | true => Display 12 hours AM\|PM (default: false) |
106+
| **min-date** | (String\|Date\|Moment) | Minimum selectable date |
107+
| **max-date** | (String\|Date\|Moment) | Maximum selectable date |
108+
| **date** | Boolean | true => Has Datepicker (default: true) |
109+
| **time** | Boolean | true => Has Timepicker (default: true) |
110+
| **minutes** | Boolean | true => Has Timepicker minutes (default: true) |
111+
| **cancel-text** | String | Text for the cancel button (default: Cancel) |
112+
| **today-text** | String | Text for the today button (default: Today) |
113+
| **ok-text** | String | Text for the OK button (default: OK) |
114+
| **week-start** | Number | First day of the week (default: 0 => Sunday) |
115+
| **disable-dates** | Date[] | Dates to be disabled or not selectable by user. |
116+
| **disable-parent-scroll** | Boolean | true => Disable scrolling while the dialog is open (default : false) |
117+
| **auto-ok** | Boolean | true => Single click (default: false) |
123118

124119
### Date/Time Dialog Service
125120

@@ -166,5 +161,6 @@ The `mdcDateTimeDialog.show` accepts the same options as the directive.
166161
pmText: {string} ='PM',
167162
disableDates: {date[]} =[],
168163
disableParentScroll: {boolean} = false,
164+
autoOk: {boolean} =false
169165
}
170166
```

‎index.html‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ <h1>Angular Material DatePicker</h1>
3636
<div class="md-toolbar-tools">
3737
<h2>Datetime Pickers</h2>
3838
<div flex></div>
39-
<md-select ng-model="selectedLang" ng-change="changeLanguage()">
39+
<md-select ng-model="selectedLang" ng-change="changeLanguage()" aria-label="change language">
4040
<md-option ng-repeat="lang in langs" ng-value="lang.value" ng-selected="$first">{{lang.label}}</md-option>
4141
</md-select>
4242
<div flex></div>
@@ -93,6 +93,17 @@ <h2>Datetime Pickers</h2>
9393
<div flex-gt-md="grow" ex-source-code target="input"></div>
9494
</div>
9595

96+
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
97+
<md-input-container flex-gt-md="30">
98+
<label>Date/Time Picker auto ok</label>
99+
<input mdc-datetime-picker date="true" time="true" type="text" id="datetimeauto"
100+
placeholder="Date" show-todays-date minutes="true"
101+
min-date="date" auto-ok="true"
102+
ng-model="dateTime">
103+
</md-input-container>
104+
<div flex-gt-md="grow" ex-source-code target="input"></div>
105+
</div>
106+
96107
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
97108
<md-input-container flex-gt-md="30">
98109
<label>Date Picker with lang</label>

‎js/angular-material-datetimepicker.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,8 @@
9696
pmText: 'PM',
9797
todayText: 'Today',
9898
disableDates: [],
99-
disableParentScroll: false
99+
disableParentScroll: false,
100+
autoOk: false
100101
};
101102
return default_params;
102103
}])
@@ -125,7 +126,8 @@
125126
pmText: '@',
126127
showTodaysDate: '@',
127128
todayText: '@',
128-
disableParentScroll: '='
129+
disableParentScroll: '=',
130+
autoOk: '='
129131
},
130132
link: function (scope, element, attrs, ngModel) {
131133
var isOn = false;
@@ -231,7 +233,8 @@
231233
amText: {string} ='AM',
232234
pmText: {string} ='PM',
233235
disableDates: {date[]} =[],
234-
disableParentScroll: {boolean} =false
236+
disableParentScroll: {boolean} =false,
237+
autoOk: {boolean} =false
235238
}
236239
@return promise
237240
*/
@@ -725,6 +728,9 @@
725728
return picker.ok();
726729
}
727730
picker.selectDate(moment(date).hour(calendar.date.hour()).minute(calendar.date.minute()));
731+
if (picker.params.autoOk) {
732+
picker.ok();
733+
}
728734
}
729735
};
730736

@@ -1002,6 +1008,9 @@
10021008
picker.currentDate.minute(val);
10031009
}
10041010
picker.currentDate.second(0);
1011+
if (picker.params.autoOk) {
1012+
picker.ok();
1013+
}
10051014
};
10061015

10071016
scope.pointAvailable = function (point) {

0 commit comments

Comments
 (0)