Skip to content

Commit c26d168

Browse files
vlio20vlio20
committed
forcing drops/opens config
1 parent a4cb2ce commit c26d168

File tree

5 files changed

+37
-22
lines changed

5 files changed

+37
-22
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,10 +69,10 @@ Here are the available configurations:
6969
| appendTo | `String\|HTMLElement` | `undefined` | All | The selector/element to which the calendar popup will append to (this is useful for `overflow: hidden` container issues). Please note that the `appendTo` element will be set with position `absolute` if it has position `static` (the default position). |
7070
| locale | `String` | [`moment.locale()`](https://momentjs.com/docs/#/i18n/getting-locale/) | All | Localisation of language (see in the demo all supported locales) |
7171
| disableKeypress | `Boolean` | `false` | All | Disables the possibility to change the date value by typing it - changing the date would be possible only from the picker |
72-
| drops | `'up'\|'down'` | `down` | All | Whether the picker appears below or above the input element. |
7372
| format | `String` | `"DD-MM-YYYY"` | All | If ngModel provided as `String` the format is required, this format also will be used as the input format style. |
7473
| onOpenDelay | `Number` | `0` | All | The delay (in ms) between the date picker focusing and the date-picker popup apparel |
75-
| opens | `'right'\|'left'` | `right` | All | Whether the picker appears aligned to the left or to the right the input element. |
74+
| drops | `'up'\|'down'` | `undefined` down if possible | All | Whether the picker appears below or above the input element. |
75+
| opens | `'right'\|'left'` | `undefined` right if possible | All | Whether the picker appears aligned to the left or to the right the input element. |
7676
| closeOnSelect | `Boolean` | `true` | `day\|month` | If set to `true` will close the date-picker after choosing a date from the calender, otherwise, won't. |
7777
| openOnClick | `Boolean` | `true` | `day\|month\|daytime` | If set to `false` will not open the date-picker when input gets clicked, otherwise, will. |
7878
| openOnFocus | `Boolean` | `true` | `day\|month\|daytime` | If set to `false` will not open the date-picker when input gets focused, otherwise, will. |

‎src/app/common/services/dom-appender/dom-appender.service.ts

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -70,23 +70,27 @@ export class DomHelper {
7070
}
7171

7272
setElementPosition({element, container, anchor, dimElem, drops, opens}: IAppendToArgs) {
73-
DomHelper.setYAxisPosition(element, container, anchor, drops);
74-
DomHelper.setXAxisPosition(element, container, anchor, dimElem, opens);
75-
76-
if (drops === 'down' && !DomHelper.isBottomInView(dimElem)) {
77-
DomHelper.setYAxisPosition(element, container, anchor, 'up');
78-
}
79-
80-
if (drops === 'up' && !DomHelper.isTopInView(dimElem)) {
81-
DomHelper.setYAxisPosition(element, container, anchor, 'down');
82-
}
83-
84-
if (opens === 'right' && !DomHelper.isRightInView(dimElem)) {
85-
DomHelper.setXAxisPosition(element, container, anchor, dimElem, 'left');
73+
DomHelper.setYAxisPosition(element, container, anchor, 'down');
74+
DomHelper.setXAxisPosition(element, container, anchor, dimElem, 'right');
75+
76+
if (drops !== 'down' && drops !== 'up') {
77+
if (DomHelper.isBottomInView(dimElem)) {
78+
DomHelper.setYAxisPosition(element, container, anchor, 'down');
79+
} else if (DomHelper.isTopInView(dimElem)) {
80+
DomHelper.setYAxisPosition(element, container, anchor, 'up');
81+
}
82+
} else {
83+
DomHelper.setYAxisPosition(element, container, anchor, drops);
8684
}
8785

88-
if (opens === 'left' && !DomHelper.isLeftInView(dimElem)) {
89-
DomHelper.setXAxisPosition(element, container, anchor, dimElem, 'right');
86+
if (opens !== 'left' && opens !== 'right') {
87+
if (DomHelper.isRightInView(dimElem)) {
88+
DomHelper.setXAxisPosition(element, container, anchor, dimElem, 'right');
89+
} else if (DomHelper.isLeftInView(dimElem)) {
90+
DomHelper.setXAxisPosition(element, container, anchor, dimElem, 'left');
91+
}
92+
} else {
93+
DomHelper.setXAxisPosition(element, container, anchor, dimElem, opens);
9094
}
9195
}
9296
}

‎src/app/date-picker/date-picker.service.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,6 @@ export class DatePickerService {
2121
onOpenDelay: 0,
2222
disableKeypress: false,
2323
showNearMonthDays: true,
24-
drops: 'down',
25-
opens: 'right',
2624
showWeekNumbers: false,
2725
enableMonthSelector: true,
2826
showGoToCurrent: true,

‎src/app/demo/demo/demo.component.html

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -856,9 +856,17 @@ <h3 class="dp-options-section">Config options</h3>
856856
<label>Up
857857
<input type="radio"
858858
[(ngModel)]="config.drops"
859-
name="drops" value="up"
859+
name="drops"
860+
value="up"
860861
(ngModelChange)="configChanged('drops', 'up')">
861862
</label>
863+
<label>Auto
864+
<input type="radio"
865+
[(ngModel)]="config.drops"
866+
name="drops"
867+
value="null"
868+
(ngModelChange)="configChanged('drops', null)">
869+
</label>
862870
</div>
863871
</div>
864872

@@ -881,6 +889,13 @@ <h3 class="dp-options-section">Config options</h3>
881889
value="left"
882890
(ngModelChange)="configChanged('opens', 'left')">
883891
</label>
892+
<label>Auto
893+
<input type="radio"
894+
[(ngModel)]="config.opens"
895+
name="opens"
896+
value="null"
897+
(ngModelChange)="configChanged('opens', null)">
898+
</label>
884899
</div>
885900
</div>
886901

‎src/app/demo/demo/demo.component.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -190,8 +190,6 @@ export class DemoComponent {
190190
onOpenDelay: 0,
191191
weekDayFormat: 'ddd',
192192
appendTo: document.body,
193-
drops: 'down',
194-
opens: 'right',
195193
showNearMonthDays: true,
196194
showWeekNumbers: false,
197195
enableMonthSelector: true,

0 commit comments

Comments
 (0)