Commit a66561a6 authored by Oleksandr Gotgelf's avatar Oleksandr Gotgelf
Browse files

CREF-342: Improve date of birth input handling

parent 46501b3b
define([
'jquery'
], function ($) {
'use strict';
return {
initialize: function(params) {
// apply defaults
if (typeof (params.dayDefault) == "undefined") {
params.dayDefault = "Day";
}
if (typeof (params.monthDefault) == "undefined") {
params.monthDefault = "Month";
}
if (typeof (params.yearDefault) == "undefined") {
params.yearDefault = "Year";
}
if (typeof (params.minimumAge) == "undefined") {
params.minimumAge = 12;
}
if (typeof (params.maximumAge) == "undefined") {
params.maximumAge = 100;
}
// find elements
var dayElement = $(params.daySelector);
var monthElement = $(params.monthSelector);
var yearElement = $(params.yearSelector);
// set days
dayElement.append("<option value=\"\">" + params.dayDefault + "</option>");
for (var i = 1; i <= 31; i++) {
var day = "" + i;
var value = i > 9 ? "" + i : "0" + i;
dayElement.append("<option value=\"" + value + "\">" + day + "</option>");
}
// set months
var months = [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12"
];
monthElement.append("<option value=\"\">" + params.monthDefault + "</option>");
for (var i = 1; i <= 12; i++) {
var month = months[i - 1];
var value = i > 9 ? "" + i : "0" + i;
monthElement.append("<option value=\"" + value + "\">" + month + "</option>");
}
// set years
var now = (new Date()).getFullYear();
var minimum = now - params.minimumAge;
var maximum = minimum - params.maximumAge;
yearElement.append("<option value=\"\">" + params.yearDefault + "</option>");
for (i = minimum; i >= maximum; i--) {
var year = "" + i;
var value = year;
yearElement.append("<option value=\"" + value + "\">" + year + "</option>");
}
// disable months
dayElement.change(function () {
monthElement.selectedIndex = 0;
yearElement.selectedIndex = 0;
yearElement.find("option").removeAttr("disabled");
var day = parseInt(dayElement.val());
if (day >= 1 && day <= 29) {
monthElement.find("option").removeAttr("disabled");
} else if (day == 30) {
monthElement.find("option").removeAttr("disabled");
monthElement.find("option[value=\"02\"]").attr("disabled", "disabled");
} else if (day == 31) {
monthElement.find("option").removeAttr("disabled");
monthElement.find("option[value=\"02\"]").attr("disabled", "disabled");
monthElement.find("option[value=\"04\"]").attr("disabled", "disabled");
monthElement.find("option[value=\"06\"]").attr("disabled", "disabled");
monthElement.find("option[value=\"09\"]").attr("disabled", "disabled");
monthElement.find("option[value=\"11\"]").attr("disabled", "disabled");
}
});
// disable years
monthElement.change(function () {
yearElement.selectedIndex = 0;
yearElement.find("option").removeAttr("disabled");
var day = parseInt(dayElement.val());
var month = parseInt(monthElement.val());
if (day == 29 && month == 2) {
yearElement.find("option").each(function (index, value) {
if (index > 0) {
var option = $(value);
var year = parseInt(option.attr("value"));
if (year % 4 == 0) {
option.attr("disabled", "disabled");
}
}
});
}
});
},
setDate: function(elements, values) {
$(elements.yearSelector).val(values[0]);
$(elements.monthSelector).val(values[1]);
$(elements.daySelector).val(values[2]);
}
}
});
......@@ -7,9 +7,10 @@ define(
'Magento_Checkout/js/view/payment/default',
'Trilix_CrefoPay/js/view/payment/adapter',
'Magento_Customer/js/customer-data',
'Magento_Checkout/js/model/quote'
'Magento_Checkout/js/model/quote',
'Trilix_CrefoPay/js/lib/dobpicker'
],
function (ko, $, Component, adapter, customerData, quote) {
function (ko, $, Component, adapter, customerData, quote, dobpicker) {
'use strict';
return Component.extend({
......@@ -28,7 +29,7 @@ define(
};
if (this.useDateOfBirthAndGenderFields()) {
data['additional_data'] = {
'dateOfBirth': $('#crefopay-bill-dob-value').val(),
'dateOfBirth': $('#crefopay-bill-dob-year').val() + '-' + $('#crefopay-bill-dob-month').val() + '-' + $('#crefopay-bill-dob-day').val(),
'salutation': this.gender()
}
}
......@@ -55,19 +56,31 @@ define(
},
initializeDobField: function () {
$('#crefopay-bill-dob').calendar({
dateFormat: window.checkoutConfig.payment[this.getCode()].dateFormat,
altField: '#crefopay-bill-dob-value',
altFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
yearRange: "-120y:c+nn",
currentText: 'Go Today',
closeText: 'Close',
showWeek: true,
var day = '#crefopay-bill-dob-day';
var month = '#crefopay-bill-dob-month';
var year = '#crefopay-bill-dob-year';
dobpicker.initialize({
daySelector: day, /* Required */
monthSelector: month, /* Required */
yearSelector: year, /* Required */
dayDefault: ' Day', /* Optional */
monthDefault: 'Month', /* Optional */
yearDefault: 'Year', /* Optional */
minimumAge: 12, /* Optional */
maximumAge: 88 /* Optional */
});
$('#crefopay-bill-dob').datepicker('setDate', this.getCustomerDob());
if (this.getCustomerDob()) {
console.log(this.getCustomerDob().split('-'));
dobpicker.setDate(
{
daySelector: day,
monthSelector: month,
yearSelector: year,
},
this.getCustomerDob().split('-')
);
}
},
getCustomerDob: function () {
......
......@@ -8,9 +8,10 @@ define(
'Trilix_CrefoPay/js/view/payment/adapter',
'Magento_Customer/js/customer-data',
'Magento_Vault/js/view/payment/vault-enabler',
'Magento_Checkout/js/model/quote'
'Magento_Checkout/js/model/quote',
'Trilix_CrefoPay/js/lib/dobpicker'
],
function (ko, $, Component, adapter, customerData, VaultEnabler, quote) {
function (ko, $, Component, adapter, customerData, VaultEnabler, quote, dobpicker) {
'use strict';
return Component.extend({
......@@ -56,7 +57,7 @@ define(
if (this.useDateOfBirthAndGenderFields()) {
data['additional_data'] = {
'paymentInstrumentId': this.paymentInstrumentId,
'dateOfBirth': $('#crefopay-dd-dob-value').val(),
'dateOfBirth': $('#crefopay-dd-dob-year').val() + '-' + $('#crefopay-dd-dob-month').val() + '-' + $('#crefopay-dd-dob-day').val(),
'salutation': this.gender()
}
} else {
......@@ -98,19 +99,29 @@ define(
},
initializeDobField: function () {
$('#crefopay-dd-dob').calendar({
dateFormat: window.checkoutConfig.payment[this.getCode()].dateFormat,
altField: '#crefopay-dd-dob-value',
altFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
yearRange: "-120y:c+nn",
currentText: 'Go Today',
closeText: 'Close',
showWeek: true,
var day = '#crefopay-dd-dob-day';
var month = '#crefopay-dd-dob-month';
var year = '#crefopay-dd-dob-year';
dobpicker.initialize({
daySelector: day, /* Required */
monthSelector: month, /* Required */
yearSelector: year, /* Required */
dayDefault: ' Day', /* Optional */
monthDefault: 'Month', /* Optional */
yearDefault: 'Year', /* Optional */
minimumAge: 12, /* Optional */
maximumAge: 88 /* Optional */
});
$('#crefopay-dd-dob').datepicker('setDate', this.getCustomerDob());
if (this.getCustomerDob()) {
dobpicker.setDate(
{
daySelector: day,
monthSelector: month,
yearSelector: year,
},
this.getCustomerDob().split('-')
);
}
},
getCustomerDob: function () {
......
......@@ -45,18 +45,27 @@
optionsCaption: $t('Choose...')
" data-validate="{required:true}"></select>
</div>
</div>
<div class="field date field-dob required" afterRender="initializeDobField">
<label class="label" for="crefopay-bill-dob">
<label class="label">
<span><!-- ko i18n: 'Date of birth'--><!-- /ko --></span>
</label>
<div class="control customer-dob">
<input type="text" class="input-text" id="crefopay-bill-dob"
style="width: auto" name="payment[dob]" />
<input type="hidden" class="date" id="crefopay-bill-dob-value" />
<button type="button" class="ui-datepicker-trigger v-middle">
<span>Select Date</span>
</button>
<div class="control">
<table style="width: 30em">
<tr>
<td style="padding-left: 0">
<select id="crefopay-bill-dob-day"></select>
</td>
<td style="padding-left: 0">
<select id="crefopay-bill-dob-month"></select>
</td>
<td style="padding-left: 0">
<select id="crefopay-bill-dob-year"></select>
</td>
</tr>
</table>
</div>
</div>
</fieldset>
......
......@@ -49,16 +49,23 @@
</div>
</div>
<div class="field date field-dob required" afterRender="initializeDobField">
<label class="label" for="crefopay-dd-dob">
<label class="label">
<span><!-- ko i18n: 'Date of birth'--><!-- /ko --></span>
</label>
<div class="control customer-dob">
<input type="text" class="input-text" id="crefopay-dd-dob"
style="width: auto" name="payment[dob]"/>
<input type="hidden" class="date" id="crefopay-dd-dob-value" />
<button type="button" class="ui-datepicker-trigger v-middle">
<span>Select Date</span>
</button>
<div class="control">
<table style="width: 30em">
<tr>
<td style="padding-left: 0">
<select id="crefopay-dd-dob-day"></select>
</td>
<td style="padding-left: 0">
<select id="crefopay-dd-dob-month"></select>
</td>
<td style="padding-left: 0">
<select id="crefopay-dd-dob-year"></select>
</td>
</tr>
</table>
</div>
</div>
<!-- /ko -->
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment