@ionic/core 8.8.12 → 8.8.13-nightly.20260626
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ion-datetime-button.js +1 -1
- package/components/ion-datetime.js +1 -1
- package/components/p-Cf2jSDS8.js +4 -0
- package/dist/cjs/{data-DLTUw-KF.js → format-PxvGiOik.js} +8 -532
- package/dist/cjs/ion-datetime-button.cjs.entry.js +17 -15
- package/dist/cjs/ion-datetime_3.cjs.entry.js +603 -70
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/datetime/datetime.js +38 -2
- package/dist/collection/components/datetime-button/datetime-button.js +8 -7
- package/dist/docs.json +6 -1
- package/dist/esm/{data-DZI70dKr.js → format-CAmvpAez.js} +1 -524
- package/dist/esm/ion-datetime-button.entry.js +9 -7
- package/dist/esm/ion-datetime_3.entry.js +536 -3
- package/dist/esm/ionic.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-5c255ce3.entry.js +4 -0
- package/dist/ionic/p-C0eMdTCW.js +4 -0
- package/dist/ionic/p-c38b648e.entry.js +4 -0
- package/dist/types/components/datetime/datetime.d.ts +8 -0
- package/dist/types/components.d.ts +6 -2
- package/hydrate/index.js +22 -9
- package/hydrate/index.mjs +22 -9
- package/package.json +4 -4
- package/components/p-BAYYcg3o.js +0 -4
- package/dist/ionic/p-0d005398.entry.js +0 -4
- package/dist/ionic/p-81ea5652.entry.js +0 -4
- package/dist/ionic/p-DAAFkPFT.js +0 -4
|
@@ -1112,527 +1112,4 @@ const formatValue = (value) => {
|
|
|
1112
1112
|
return Array.isArray(value) ? value.join(',') : value;
|
|
1113
1113
|
};
|
|
1114
1114
|
|
|
1115
|
-
|
|
1116
|
-
* Returns the current date as
|
|
1117
|
-
* an ISO string in the user's
|
|
1118
|
-
* time zone.
|
|
1119
|
-
*/
|
|
1120
|
-
const getToday = () => {
|
|
1121
|
-
/**
|
|
1122
|
-
* ion-datetime intentionally does not
|
|
1123
|
-
* parse time zones/do automatic time zone
|
|
1124
|
-
* conversion when accepting user input.
|
|
1125
|
-
* However when we get today's date string,
|
|
1126
|
-
* we want it formatted relative to the user's
|
|
1127
|
-
* time zone.
|
|
1128
|
-
*
|
|
1129
|
-
* When calling toISOString(), the browser
|
|
1130
|
-
* will convert the date to UTC time by either adding
|
|
1131
|
-
* or subtracting the time zone offset.
|
|
1132
|
-
* To work around this, we need to either add
|
|
1133
|
-
* or subtract the time zone offset to the Date
|
|
1134
|
-
* object prior to calling toISOString().
|
|
1135
|
-
* This allows us to get an ISO string
|
|
1136
|
-
* that is in the user's time zone.
|
|
1137
|
-
*/
|
|
1138
|
-
return removeDateTzOffset(new Date()).toISOString();
|
|
1139
|
-
};
|
|
1140
|
-
const minutes = [
|
|
1141
|
-
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31,
|
|
1142
|
-
32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59,
|
|
1143
|
-
];
|
|
1144
|
-
// h11 hour system uses 0-11. Midnight starts at 0:00am.
|
|
1145
|
-
const hour11 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
|
|
1146
|
-
// h12 hour system uses 0-12. Midnight starts at 12:00am.
|
|
1147
|
-
const hour12 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
|
|
1148
|
-
// h23 hour system uses 0-23. Midnight starts at 0:00.
|
|
1149
|
-
const hour23 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23];
|
|
1150
|
-
// h24 hour system uses 1-24. Midnight starts at 24:00.
|
|
1151
|
-
const hour24 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 0];
|
|
1152
|
-
/**
|
|
1153
|
-
* Given a locale and a mode,
|
|
1154
|
-
* return an array with formatted days
|
|
1155
|
-
* of the week. iOS should display days
|
|
1156
|
-
* such as "Mon" or "Tue".
|
|
1157
|
-
* MD should display days such as "M"
|
|
1158
|
-
* or "T".
|
|
1159
|
-
*/
|
|
1160
|
-
const getDaysOfWeek = (locale, mode, firstDayOfWeek = 0) => {
|
|
1161
|
-
/**
|
|
1162
|
-
* Nov 1st, 2020 starts on a Sunday.
|
|
1163
|
-
* ion-datetime assumes weeks start on Sunday,
|
|
1164
|
-
* but is configurable via `firstDayOfWeek`.
|
|
1165
|
-
*/
|
|
1166
|
-
const weekdayFormat = mode === 'ios' ? 'short' : 'narrow';
|
|
1167
|
-
const intl = new Intl.DateTimeFormat(locale, { weekday: weekdayFormat });
|
|
1168
|
-
const startDate = new Date('11/01/2020');
|
|
1169
|
-
const daysOfWeek = [];
|
|
1170
|
-
/**
|
|
1171
|
-
* For each day of the week,
|
|
1172
|
-
* get the day name.
|
|
1173
|
-
*/
|
|
1174
|
-
for (let i = firstDayOfWeek; i < firstDayOfWeek + 7; i++) {
|
|
1175
|
-
const currentDate = new Date(startDate);
|
|
1176
|
-
currentDate.setDate(currentDate.getDate() + i);
|
|
1177
|
-
daysOfWeek.push(intl.format(currentDate));
|
|
1178
|
-
}
|
|
1179
|
-
return daysOfWeek;
|
|
1180
|
-
};
|
|
1181
|
-
/**
|
|
1182
|
-
* Returns an array containing all of the
|
|
1183
|
-
* days in a month for a given year. Values are
|
|
1184
|
-
* aligned with a week calendar starting on
|
|
1185
|
-
* the firstDayOfWeek value (Sunday by default)
|
|
1186
|
-
* using null values.
|
|
1187
|
-
*/
|
|
1188
|
-
const getDaysOfMonth = (month, year, firstDayOfWeek, showAdjacentDays = false) => {
|
|
1189
|
-
const numDays = getNumDaysInMonth(month, year);
|
|
1190
|
-
let previousNumDays; //previous month number of days
|
|
1191
|
-
if (month === 1) {
|
|
1192
|
-
// If the current month is January, the previous month should be December of the previous year.
|
|
1193
|
-
previousNumDays = getNumDaysInMonth(12, year - 1);
|
|
1194
|
-
}
|
|
1195
|
-
else {
|
|
1196
|
-
// Otherwise, the previous month should be the current month - 1 of the same year.
|
|
1197
|
-
previousNumDays = getNumDaysInMonth(month - 1, year);
|
|
1198
|
-
}
|
|
1199
|
-
const firstOfMonth = new Date(`${month}/1/${year}`).getDay();
|
|
1200
|
-
/**
|
|
1201
|
-
* To get the first day of the month aligned on the correct
|
|
1202
|
-
* day of the week, we need to determine how many "filler" days
|
|
1203
|
-
* to generate. These filler days as empty/disabled buttons
|
|
1204
|
-
* that fill the space of the days of the week before the first
|
|
1205
|
-
* of the month.
|
|
1206
|
-
*
|
|
1207
|
-
* There are two cases here:
|
|
1208
|
-
*
|
|
1209
|
-
* 1. If firstOfMonth = 4, firstDayOfWeek = 0 then the offset
|
|
1210
|
-
* is (4 - (0 + 1)) = 3. Since the offset loop goes from 0 to 3 inclusive,
|
|
1211
|
-
* this will generate 4 filler days (0, 1, 2, 3), and then day of week 4 will have
|
|
1212
|
-
* the first day of the month.
|
|
1213
|
-
*
|
|
1214
|
-
* 2. If firstOfMonth = 2, firstDayOfWeek = 4 then the offset
|
|
1215
|
-
* is (6 - (4 - 2)) = 4. Since the offset loop goes from 0 to 4 inclusive,
|
|
1216
|
-
* this will generate 5 filler days (0, 1, 2, 3, 4), and then day of week 5 will have
|
|
1217
|
-
* the first day of the month.
|
|
1218
|
-
*/
|
|
1219
|
-
const offset = firstOfMonth >= firstDayOfWeek ? firstOfMonth - (firstDayOfWeek + 1) : 6 - (firstDayOfWeek - firstOfMonth);
|
|
1220
|
-
let days = [];
|
|
1221
|
-
for (let i = 1; i <= numDays; i++) {
|
|
1222
|
-
days.push({ day: i, dayOfWeek: (offset + i) % 7, isAdjacentDay: false });
|
|
1223
|
-
}
|
|
1224
|
-
if (showAdjacentDays) {
|
|
1225
|
-
for (let i = 0; i <= offset; i++) {
|
|
1226
|
-
// Using offset create previous month adjacent day, starting from last day
|
|
1227
|
-
days = [{ day: previousNumDays - i, dayOfWeek: (previousNumDays - i) % 7, isAdjacentDay: true }, ...days];
|
|
1228
|
-
}
|
|
1229
|
-
// Calculate positiveOffset
|
|
1230
|
-
// The calendar will display 42 days (6 rows of 7 columns)
|
|
1231
|
-
// Knowing this the offset is 41 (we start at index 0)
|
|
1232
|
-
// minus (the previous offset + the current month days)
|
|
1233
|
-
const positiveOffset = 41 - (numDays + offset);
|
|
1234
|
-
for (let i = 0; i < positiveOffset; i++) {
|
|
1235
|
-
days.push({ day: i + 1, dayOfWeek: (numDays + offset + i) % 7, isAdjacentDay: true });
|
|
1236
|
-
}
|
|
1237
|
-
}
|
|
1238
|
-
else {
|
|
1239
|
-
for (let i = 0; i <= offset; i++) {
|
|
1240
|
-
days = [{ day: null, dayOfWeek: null, isAdjacentDay: false }, ...days];
|
|
1241
|
-
}
|
|
1242
|
-
}
|
|
1243
|
-
return days;
|
|
1244
|
-
};
|
|
1245
|
-
/**
|
|
1246
|
-
* Returns an array of pre-defined hour
|
|
1247
|
-
* values based on the provided hourCycle.
|
|
1248
|
-
*/
|
|
1249
|
-
const getHourData = (hourCycle) => {
|
|
1250
|
-
switch (hourCycle) {
|
|
1251
|
-
case 'h11':
|
|
1252
|
-
return hour11;
|
|
1253
|
-
case 'h12':
|
|
1254
|
-
return hour12;
|
|
1255
|
-
case 'h23':
|
|
1256
|
-
return hour23;
|
|
1257
|
-
case 'h24':
|
|
1258
|
-
return hour24;
|
|
1259
|
-
default:
|
|
1260
|
-
throw new Error(`Invalid hour cycle "${hourCycle}"`);
|
|
1261
|
-
}
|
|
1262
|
-
};
|
|
1263
|
-
/**
|
|
1264
|
-
* Given a local, reference datetime parts and option
|
|
1265
|
-
* max/min bound datetime parts, calculate the acceptable
|
|
1266
|
-
* hour and minute values according to the bounds and locale.
|
|
1267
|
-
*/
|
|
1268
|
-
const generateTime = (locale, refParts, hourCycle = 'h12', minParts, maxParts, hourValues, minuteValues) => {
|
|
1269
|
-
const computedHourCycle = getHourCycle(locale, hourCycle);
|
|
1270
|
-
const use24Hour = is24Hour(computedHourCycle);
|
|
1271
|
-
let processedHours = getHourData(computedHourCycle);
|
|
1272
|
-
let processedMinutes = minutes;
|
|
1273
|
-
let isAMAllowed = true;
|
|
1274
|
-
let isPMAllowed = true;
|
|
1275
|
-
if (hourValues) {
|
|
1276
|
-
processedHours = processedHours.filter((hour) => hourValues.includes(hour));
|
|
1277
|
-
}
|
|
1278
|
-
if (minuteValues) {
|
|
1279
|
-
processedMinutes = processedMinutes.filter((minute) => minuteValues.includes(minute));
|
|
1280
|
-
}
|
|
1281
|
-
if (minParts) {
|
|
1282
|
-
/**
|
|
1283
|
-
* If ref day is the same as the
|
|
1284
|
-
* minimum allowed day, filter hour/minute
|
|
1285
|
-
* values according to min hour and minute.
|
|
1286
|
-
*/
|
|
1287
|
-
if (isSameDay(refParts, minParts)) {
|
|
1288
|
-
/**
|
|
1289
|
-
* Users may not always set the hour/minute for
|
|
1290
|
-
* min value (i.e. 2021-06-02) so we should allow
|
|
1291
|
-
* all hours/minutes in that case.
|
|
1292
|
-
*/
|
|
1293
|
-
if (minParts.hour !== undefined) {
|
|
1294
|
-
processedHours = processedHours.filter((hour) => {
|
|
1295
|
-
const convertedHour = refParts.ampm === 'pm' ? (hour + 12) % 24 : hour;
|
|
1296
|
-
return (use24Hour ? hour : convertedHour) >= minParts.hour;
|
|
1297
|
-
});
|
|
1298
|
-
isAMAllowed = minParts.hour < 13;
|
|
1299
|
-
}
|
|
1300
|
-
if (minParts.minute !== undefined) {
|
|
1301
|
-
/**
|
|
1302
|
-
* The minimum minute range should not be enforced when
|
|
1303
|
-
* the hour is greater than the min hour.
|
|
1304
|
-
*
|
|
1305
|
-
* For example with a minimum range of 09:30, users
|
|
1306
|
-
* should be able to select 10:00-10:29 and beyond.
|
|
1307
|
-
*/
|
|
1308
|
-
let isPastMinHour = false;
|
|
1309
|
-
if (minParts.hour !== undefined && refParts.hour !== undefined) {
|
|
1310
|
-
if (refParts.hour > minParts.hour) {
|
|
1311
|
-
isPastMinHour = true;
|
|
1312
|
-
}
|
|
1313
|
-
}
|
|
1314
|
-
processedMinutes = processedMinutes.filter((minute) => {
|
|
1315
|
-
if (isPastMinHour) {
|
|
1316
|
-
return true;
|
|
1317
|
-
}
|
|
1318
|
-
return minute >= minParts.minute;
|
|
1319
|
-
});
|
|
1320
|
-
}
|
|
1321
|
-
/**
|
|
1322
|
-
* If ref day is before minimum
|
|
1323
|
-
* day do not render any hours/minute values
|
|
1324
|
-
*/
|
|
1325
|
-
}
|
|
1326
|
-
else if (isBefore(refParts, minParts)) {
|
|
1327
|
-
processedHours = [];
|
|
1328
|
-
processedMinutes = [];
|
|
1329
|
-
isAMAllowed = isPMAllowed = false;
|
|
1330
|
-
}
|
|
1331
|
-
}
|
|
1332
|
-
if (maxParts) {
|
|
1333
|
-
/**
|
|
1334
|
-
* If ref day is the same as the
|
|
1335
|
-
* maximum allowed day, filter hour/minute
|
|
1336
|
-
* values according to max hour and minute.
|
|
1337
|
-
*/
|
|
1338
|
-
if (isSameDay(refParts, maxParts)) {
|
|
1339
|
-
/**
|
|
1340
|
-
* Users may not always set the hour/minute for
|
|
1341
|
-
* max value (i.e. 2021-06-02) so we should allow
|
|
1342
|
-
* all hours/minutes in that case.
|
|
1343
|
-
*/
|
|
1344
|
-
if (maxParts.hour !== undefined) {
|
|
1345
|
-
processedHours = processedHours.filter((hour) => {
|
|
1346
|
-
const convertedHour = refParts.ampm === 'pm' ? (hour + 12) % 24 : hour;
|
|
1347
|
-
return (use24Hour ? hour : convertedHour) <= maxParts.hour;
|
|
1348
|
-
});
|
|
1349
|
-
isPMAllowed = maxParts.hour >= 12;
|
|
1350
|
-
}
|
|
1351
|
-
if (maxParts.minute !== undefined && refParts.hour === maxParts.hour) {
|
|
1352
|
-
// The available minutes should only be filtered when the hour is the same as the max hour.
|
|
1353
|
-
// For example if the max hour is 10:30 and the current hour is 10:00,
|
|
1354
|
-
// users should be able to select 00-30 minutes.
|
|
1355
|
-
// If the current hour is 09:00, users should be able to select 00-60 minutes.
|
|
1356
|
-
processedMinutes = processedMinutes.filter((minute) => minute <= maxParts.minute);
|
|
1357
|
-
}
|
|
1358
|
-
/**
|
|
1359
|
-
* If ref day is after minimum
|
|
1360
|
-
* day do not render any hours/minute values
|
|
1361
|
-
*/
|
|
1362
|
-
}
|
|
1363
|
-
else if (isAfter(refParts, maxParts)) {
|
|
1364
|
-
processedHours = [];
|
|
1365
|
-
processedMinutes = [];
|
|
1366
|
-
isAMAllowed = isPMAllowed = false;
|
|
1367
|
-
}
|
|
1368
|
-
}
|
|
1369
|
-
return {
|
|
1370
|
-
hours: processedHours,
|
|
1371
|
-
minutes: processedMinutes,
|
|
1372
|
-
am: isAMAllowed,
|
|
1373
|
-
pm: isPMAllowed,
|
|
1374
|
-
};
|
|
1375
|
-
};
|
|
1376
|
-
/**
|
|
1377
|
-
* Given DatetimeParts, generate the previous,
|
|
1378
|
-
* current, and and next months.
|
|
1379
|
-
*/
|
|
1380
|
-
const generateMonths = (refParts, forcedDate) => {
|
|
1381
|
-
const current = { month: refParts.month, year: refParts.year, day: refParts.day };
|
|
1382
|
-
/**
|
|
1383
|
-
* If we're forcing a month to appear, and it's different from the current month,
|
|
1384
|
-
* ensure it appears by replacing the next or previous month as appropriate.
|
|
1385
|
-
*/
|
|
1386
|
-
if (forcedDate !== undefined && (refParts.month !== forcedDate.month || refParts.year !== forcedDate.year)) {
|
|
1387
|
-
const forced = { month: forcedDate.month, year: forcedDate.year, day: forcedDate.day };
|
|
1388
|
-
const forcedMonthIsBefore = isBefore(forced, current);
|
|
1389
|
-
return forcedMonthIsBefore
|
|
1390
|
-
? [forced, current, getNextMonth(refParts)]
|
|
1391
|
-
: [getPreviousMonth(refParts), current, forced];
|
|
1392
|
-
}
|
|
1393
|
-
return [getPreviousMonth(refParts), current, getNextMonth(refParts)];
|
|
1394
|
-
};
|
|
1395
|
-
const getMonthColumnData = (locale, refParts, minParts, maxParts, monthValues, formatOptions = {
|
|
1396
|
-
month: 'long',
|
|
1397
|
-
}) => {
|
|
1398
|
-
const { year } = refParts;
|
|
1399
|
-
const months = [];
|
|
1400
|
-
if (monthValues !== undefined) {
|
|
1401
|
-
let processedMonths = monthValues;
|
|
1402
|
-
if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.month) !== undefined) {
|
|
1403
|
-
processedMonths = processedMonths.filter((month) => month <= maxParts.month);
|
|
1404
|
-
}
|
|
1405
|
-
if ((minParts === null || minParts === void 0 ? void 0 : minParts.month) !== undefined) {
|
|
1406
|
-
processedMonths = processedMonths.filter((month) => month >= minParts.month);
|
|
1407
|
-
}
|
|
1408
|
-
processedMonths.forEach((processedMonth) => {
|
|
1409
|
-
const date = new Date(`${processedMonth}/1/${year} GMT+0000`);
|
|
1410
|
-
const monthString = new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, formatOptions), { timeZone: 'UTC' })).format(date);
|
|
1411
|
-
months.push({ text: monthString, value: processedMonth });
|
|
1412
|
-
});
|
|
1413
|
-
}
|
|
1414
|
-
else {
|
|
1415
|
-
const maxMonth = maxParts && maxParts.year === year ? maxParts.month : 12;
|
|
1416
|
-
const minMonth = minParts && minParts.year === year ? minParts.month : 1;
|
|
1417
|
-
for (let i = minMonth; i <= maxMonth; i++) {
|
|
1418
|
-
/**
|
|
1419
|
-
*
|
|
1420
|
-
* There is a bug on iOS 14 where
|
|
1421
|
-
* Intl.DateTimeFormat takes into account
|
|
1422
|
-
* the local timezone offset when formatting dates.
|
|
1423
|
-
*
|
|
1424
|
-
* Forcing the timezone to 'UTC' fixes the issue. However,
|
|
1425
|
-
* we should keep this workaround as it is safer. In the event
|
|
1426
|
-
* this breaks in another browser, we will not be impacted
|
|
1427
|
-
* because all dates will be interpreted in UTC.
|
|
1428
|
-
*
|
|
1429
|
-
* Example:
|
|
1430
|
-
* new Intl.DateTimeFormat('en-US', { month: 'long' }).format(new Date('Sat Apr 01 2006 00:00:00 GMT-0400 (EDT)')) // "March"
|
|
1431
|
-
* new Intl.DateTimeFormat('en-US', { month: 'long', timeZone: 'UTC' }).format(new Date('Sat Apr 01 2006 00:00:00 GMT-0400 (EDT)')) // "April"
|
|
1432
|
-
*
|
|
1433
|
-
* In certain timezones, iOS 14 shows the wrong
|
|
1434
|
-
* date for .toUTCString(). To combat this, we
|
|
1435
|
-
* force all of the timezones to GMT+0000 (UTC).
|
|
1436
|
-
*
|
|
1437
|
-
* Example:
|
|
1438
|
-
* Time Zone: Central European Standard Time
|
|
1439
|
-
* new Date('1/1/1992').toUTCString() // "Tue, 31 Dec 1991 23:00:00 GMT"
|
|
1440
|
-
* new Date('1/1/1992 GMT+0000').toUTCString() // "Wed, 01 Jan 1992 00:00:00 GMT"
|
|
1441
|
-
*/
|
|
1442
|
-
const date = new Date(`${i}/1/${year} GMT+0000`);
|
|
1443
|
-
const monthString = new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, formatOptions), { timeZone: 'UTC' })).format(date);
|
|
1444
|
-
months.push({ text: monthString, value: i });
|
|
1445
|
-
}
|
|
1446
|
-
}
|
|
1447
|
-
return months;
|
|
1448
|
-
};
|
|
1449
|
-
/**
|
|
1450
|
-
* Returns information regarding
|
|
1451
|
-
* selectable dates (i.e 1st, 2nd, 3rd, etc)
|
|
1452
|
-
* within a reference month.
|
|
1453
|
-
* @param locale The locale to format the date with
|
|
1454
|
-
* @param refParts The reference month/year to generate dates for
|
|
1455
|
-
* @param minParts The minimum bound on the date that can be returned
|
|
1456
|
-
* @param maxParts The maximum bound on the date that can be returned
|
|
1457
|
-
* @param dayValues The allowed date values
|
|
1458
|
-
* @returns Date data to be used in ion-picker-column
|
|
1459
|
-
*/
|
|
1460
|
-
const getDayColumnData = (locale, refParts, minParts, maxParts, dayValues, formatOptions = {
|
|
1461
|
-
day: 'numeric',
|
|
1462
|
-
}) => {
|
|
1463
|
-
const { month, year } = refParts;
|
|
1464
|
-
const days = [];
|
|
1465
|
-
/**
|
|
1466
|
-
* If we have max/min bounds that in the same
|
|
1467
|
-
* month/year as the refParts, we should
|
|
1468
|
-
* use the define day as the max/min day.
|
|
1469
|
-
* Otherwise, fallback to the max/min days in a month.
|
|
1470
|
-
*/
|
|
1471
|
-
const numDaysInMonth = getNumDaysInMonth(month, year);
|
|
1472
|
-
const maxDay = (maxParts === null || maxParts === void 0 ? void 0 : maxParts.day) !== null && (maxParts === null || maxParts === void 0 ? void 0 : maxParts.day) !== undefined && maxParts.year === year && maxParts.month === month
|
|
1473
|
-
? maxParts.day
|
|
1474
|
-
: numDaysInMonth;
|
|
1475
|
-
const minDay = (minParts === null || minParts === void 0 ? void 0 : minParts.day) !== null && (minParts === null || minParts === void 0 ? void 0 : minParts.day) !== undefined && minParts.year === year && minParts.month === month
|
|
1476
|
-
? minParts.day
|
|
1477
|
-
: 1;
|
|
1478
|
-
if (dayValues !== undefined) {
|
|
1479
|
-
let processedDays = dayValues;
|
|
1480
|
-
processedDays = processedDays.filter((day) => day >= minDay && day <= maxDay);
|
|
1481
|
-
processedDays.forEach((processedDay) => {
|
|
1482
|
-
const date = new Date(`${month}/${processedDay}/${year} GMT+0000`);
|
|
1483
|
-
const dayString = new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, formatOptions), { timeZone: 'UTC' })).format(date);
|
|
1484
|
-
days.push({ text: dayString, value: processedDay });
|
|
1485
|
-
});
|
|
1486
|
-
}
|
|
1487
|
-
else {
|
|
1488
|
-
for (let i = minDay; i <= maxDay; i++) {
|
|
1489
|
-
const date = new Date(`${month}/${i}/${year} GMT+0000`);
|
|
1490
|
-
const dayString = new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, formatOptions), { timeZone: 'UTC' })).format(date);
|
|
1491
|
-
days.push({ text: dayString, value: i });
|
|
1492
|
-
}
|
|
1493
|
-
}
|
|
1494
|
-
return days;
|
|
1495
|
-
};
|
|
1496
|
-
const getYearColumnData = (locale, refParts, minParts, maxParts, yearValues) => {
|
|
1497
|
-
var _a, _b;
|
|
1498
|
-
let processedYears = [];
|
|
1499
|
-
if (yearValues !== undefined) {
|
|
1500
|
-
processedYears = yearValues;
|
|
1501
|
-
if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.year) !== undefined) {
|
|
1502
|
-
processedYears = processedYears.filter((year) => year <= maxParts.year);
|
|
1503
|
-
}
|
|
1504
|
-
if ((minParts === null || minParts === void 0 ? void 0 : minParts.year) !== undefined) {
|
|
1505
|
-
processedYears = processedYears.filter((year) => year >= minParts.year);
|
|
1506
|
-
}
|
|
1507
|
-
}
|
|
1508
|
-
else {
|
|
1509
|
-
const { year } = refParts;
|
|
1510
|
-
const maxYear = (_a = maxParts === null || maxParts === void 0 ? void 0 : maxParts.year) !== null && _a !== void 0 ? _a : year;
|
|
1511
|
-
const minYear = (_b = minParts === null || minParts === void 0 ? void 0 : minParts.year) !== null && _b !== void 0 ? _b : year - 100;
|
|
1512
|
-
for (let i = minYear; i <= maxYear; i++) {
|
|
1513
|
-
processedYears.push(i);
|
|
1514
|
-
}
|
|
1515
|
-
}
|
|
1516
|
-
return processedYears.map((year) => ({
|
|
1517
|
-
text: getYear(locale, { year, month: refParts.month, day: refParts.day }),
|
|
1518
|
-
value: year,
|
|
1519
|
-
}));
|
|
1520
|
-
};
|
|
1521
|
-
/**
|
|
1522
|
-
* Given a starting date and an upper bound,
|
|
1523
|
-
* this functions returns an array of all
|
|
1524
|
-
* month objects in that range.
|
|
1525
|
-
*/
|
|
1526
|
-
const getAllMonthsInRange = (currentParts, maxParts) => {
|
|
1527
|
-
if (currentParts.month === maxParts.month && currentParts.year === maxParts.year) {
|
|
1528
|
-
return [currentParts];
|
|
1529
|
-
}
|
|
1530
|
-
return [currentParts, ...getAllMonthsInRange(getNextMonth(currentParts), maxParts)];
|
|
1531
|
-
};
|
|
1532
|
-
/**
|
|
1533
|
-
* Creates and returns picker items
|
|
1534
|
-
* that represent the days in a month.
|
|
1535
|
-
* Example: "Thu, Jun 2"
|
|
1536
|
-
*/
|
|
1537
|
-
const getCombinedDateColumnData = (locale, todayParts, minParts, maxParts, dayValues, monthValues) => {
|
|
1538
|
-
let items = [];
|
|
1539
|
-
let parts = [];
|
|
1540
|
-
/**
|
|
1541
|
-
* Get all month objects from the min date
|
|
1542
|
-
* to the max date. Note: Do not use getMonthColumnData
|
|
1543
|
-
* as that function only generates dates within a
|
|
1544
|
-
* single year.
|
|
1545
|
-
*/
|
|
1546
|
-
let months = getAllMonthsInRange(minParts, maxParts);
|
|
1547
|
-
/**
|
|
1548
|
-
* Filter out any disallowed month values.
|
|
1549
|
-
*/
|
|
1550
|
-
if (monthValues) {
|
|
1551
|
-
months = months.filter(({ month }) => monthValues.includes(month));
|
|
1552
|
-
}
|
|
1553
|
-
/**
|
|
1554
|
-
* Get all of the days in the month.
|
|
1555
|
-
* From there, generate an array where
|
|
1556
|
-
* each item has the month, date, and day
|
|
1557
|
-
* of work as the text.
|
|
1558
|
-
*/
|
|
1559
|
-
months.forEach((monthObject) => {
|
|
1560
|
-
const referenceMonth = { month: monthObject.month, day: null, year: monthObject.year };
|
|
1561
|
-
const monthDays = getDayColumnData(locale, referenceMonth, minParts, maxParts, dayValues, {
|
|
1562
|
-
month: 'short',
|
|
1563
|
-
day: 'numeric',
|
|
1564
|
-
weekday: 'short',
|
|
1565
|
-
});
|
|
1566
|
-
const dateParts = [];
|
|
1567
|
-
const dateColumnItems = [];
|
|
1568
|
-
monthDays.forEach((dayObject) => {
|
|
1569
|
-
const isToday = isSameDay(Object.assign(Object.assign({}, referenceMonth), { day: dayObject.value }), todayParts);
|
|
1570
|
-
/**
|
|
1571
|
-
* Today's date should read as "Today" (localized)
|
|
1572
|
-
* not the actual date string
|
|
1573
|
-
*/
|
|
1574
|
-
dateColumnItems.push({
|
|
1575
|
-
text: isToday ? getTodayLabel(locale) : dayObject.text,
|
|
1576
|
-
value: `${referenceMonth.year}-${referenceMonth.month}-${dayObject.value}`,
|
|
1577
|
-
});
|
|
1578
|
-
/**
|
|
1579
|
-
* When selecting a date in the wheel picker
|
|
1580
|
-
* we need access to the raw datetime parts data.
|
|
1581
|
-
* The picker column only accepts values of
|
|
1582
|
-
* type string or number, so we need to return
|
|
1583
|
-
* two sets of data: A data set to be passed
|
|
1584
|
-
* to the picker column, and a data set to
|
|
1585
|
-
* be used to reference the raw data when
|
|
1586
|
-
* updating the picker column value.
|
|
1587
|
-
*/
|
|
1588
|
-
dateParts.push({
|
|
1589
|
-
month: referenceMonth.month,
|
|
1590
|
-
year: referenceMonth.year,
|
|
1591
|
-
day: dayObject.value,
|
|
1592
|
-
});
|
|
1593
|
-
});
|
|
1594
|
-
parts = [...parts, ...dateParts];
|
|
1595
|
-
items = [...items, ...dateColumnItems];
|
|
1596
|
-
});
|
|
1597
|
-
return {
|
|
1598
|
-
parts,
|
|
1599
|
-
items,
|
|
1600
|
-
};
|
|
1601
|
-
};
|
|
1602
|
-
const getTimeColumnsData = (locale, refParts, hourCycle, minParts, maxParts, allowedHourValues, allowedMinuteValues) => {
|
|
1603
|
-
const computedHourCycle = getHourCycle(locale, hourCycle);
|
|
1604
|
-
const use24Hour = is24Hour(computedHourCycle);
|
|
1605
|
-
const { hours, minutes, am, pm } = generateTime(locale, refParts, computedHourCycle, minParts, maxParts, allowedHourValues, allowedMinuteValues);
|
|
1606
|
-
const hoursItems = hours.map((hour) => {
|
|
1607
|
-
return {
|
|
1608
|
-
text: getFormattedHour(hour, computedHourCycle),
|
|
1609
|
-
value: getInternalHourValue(hour, use24Hour, refParts.ampm),
|
|
1610
|
-
};
|
|
1611
|
-
});
|
|
1612
|
-
const minutesItems = minutes.map((minute) => {
|
|
1613
|
-
return {
|
|
1614
|
-
text: addTimePadding(minute),
|
|
1615
|
-
value: minute,
|
|
1616
|
-
};
|
|
1617
|
-
});
|
|
1618
|
-
const dayPeriodItems = [];
|
|
1619
|
-
if (am && !use24Hour) {
|
|
1620
|
-
dayPeriodItems.push({
|
|
1621
|
-
text: getLocalizedDayPeriod(locale, 'am'),
|
|
1622
|
-
value: 'am',
|
|
1623
|
-
});
|
|
1624
|
-
}
|
|
1625
|
-
if (pm && !use24Hour) {
|
|
1626
|
-
dayPeriodItems.push({
|
|
1627
|
-
text: getLocalizedDayPeriod(locale, 'pm'),
|
|
1628
|
-
value: 'pm',
|
|
1629
|
-
});
|
|
1630
|
-
}
|
|
1631
|
-
return {
|
|
1632
|
-
minutesData: minutesItems,
|
|
1633
|
-
hoursData: hoursItems,
|
|
1634
|
-
dayPeriodData: dayPeriodItems,
|
|
1635
|
-
};
|
|
1636
|
-
};
|
|
1637
|
-
|
|
1638
|
-
export { getClosestValidDate as A, generateMonths as B, getNumDaysInMonth as C, getCombinedDateColumnData as D, getMonthColumnData as E, getDayColumnData as F, getYearColumnData as G, isMonthFirstLocale as H, getTimeColumnsData as I, isLocaleDayPeriodRTL as J, calculateHourFromAMPM as K, getDaysOfWeek as L, getMonthAndYear as M, getDaysOfMonth as N, getHourCycle as O, getLocalizedTime as P, getLocalizedDateTime as Q, formatValue as R, isAfter as a, getNextMonth as b, isSameDay as c, getDay as d, generateDayAriaLabel as e, getPartsFromCalendarDay as f, getPreviousMonth as g, getNextYear as h, isBefore as i, getPreviousYear as j, getEndOfWeek as k, getStartOfWeek as l, getPreviousDay as m, getNextDay as n, getPreviousWeek as o, getNextWeek as p, parseMinParts as q, parseMaxParts as r, parseDate as s, parseAmPm as t, clampDate as u, validateParts as v, warnIfValueOutOfBounds as w, convertToArrayOfNumbers as x, convertDataToISO as y, getToday as z };
|
|
1115
|
+
export { getNextWeek as A, parseMinParts as B, parseMaxParts as C, parseDate as D, warnIfValueOutOfBounds as E, parseAmPm as F, clampDate as G, convertToArrayOfNumbers as H, convertDataToISO as I, getClosestValidDate as J, isMonthFirstLocale as K, isLocaleDayPeriodRTL as L, calculateHourFromAMPM as M, getMonthAndYear as N, getLocalizedTime as O, getLocalizedDateTime as P, formatValue as Q, getPreviousMonth as a, getTodayLabel as b, getYear as c, getHourCycle as d, getInternalHourValue as e, getFormattedHour as f, getNextMonth as g, addTimePadding as h, isSameDay as i, getLocalizedDayPeriod as j, isBefore as k, isAfter as l, is24Hour as m, getNumDaysInMonth as n, getDay as o, generateDayAriaLabel as p, getPartsFromCalendarDay as q, removeDateTzOffset as r, getNextYear as s, getPreviousYear as t, getEndOfWeek as u, validateParts as v, getStartOfWeek as w, getPreviousDay as x, getNextDay as y, getPreviousWeek as z };
|
|
@@ -5,7 +5,7 @@ import { r as registerInstance, j as printIonError, h, d as Host, g as getElemen
|
|
|
5
5
|
import { f as addEventListener, c as componentOnReady } from './helpers-HEqiOzXb.js';
|
|
6
6
|
import { c as createColorClasses } from './theme-DiVJyqlX.js';
|
|
7
7
|
import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
|
|
8
|
-
import {
|
|
8
|
+
import { D as parseDate, d as getHourCycle, P as getLocalizedDateTime, O as getLocalizedTime } from './format-CAmvpAez.js';
|
|
9
9
|
|
|
10
10
|
const datetimeButtonIosCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.time-active) #time-button,:host(.date-active) #date-button{color:var(--ion-color-base)}:host(.datetime-button-disabled){pointer-events:none}:host(.datetime-button-disabled) button{opacity:0.4}:host button{-webkit-padding-start:13px;padding-inline-start:13px;-webkit-padding-end:13px;padding-inline-end:13px;padding-top:7px;padding-bottom:7px}:host button.ion-activated{color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}`;
|
|
11
11
|
|
|
@@ -48,7 +48,7 @@ const DatetimeButton = class {
|
|
|
48
48
|
* ion-datetime and then format it according
|
|
49
49
|
* to the locale specified on ion-datetime.
|
|
50
50
|
*/
|
|
51
|
-
this.setDateTimeText = () => {
|
|
51
|
+
this.setDateTimeText = async () => {
|
|
52
52
|
var _a, _b, _c, _d, _e;
|
|
53
53
|
const { datetimeEl, datetimePresentation } = this;
|
|
54
54
|
if (!datetimeEl) {
|
|
@@ -57,10 +57,12 @@ const DatetimeButton = class {
|
|
|
57
57
|
const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
|
|
58
58
|
const parsedValues = this.getParsedDateValues(value);
|
|
59
59
|
/**
|
|
60
|
-
* Both ion-datetime and ion-datetime-button default
|
|
61
|
-
*
|
|
60
|
+
* Both ion-datetime and ion-datetime-button default to today's date and
|
|
61
|
+
* time if no value is set. We read the datetime's computed default so the
|
|
62
|
+
* button respects the same constraints (min, max, minuteValues, etc.) that
|
|
63
|
+
* the datetime applies to its own fallback, instead of using a raw "now".
|
|
62
64
|
*/
|
|
63
|
-
const parsedDatetimes =
|
|
65
|
+
const parsedDatetimes = parsedValues.length > 0 ? parseDate(parsedValues) : [await datetimeEl.getDefaultPart()];
|
|
64
66
|
if (!parsedDatetimes) {
|
|
65
67
|
return;
|
|
66
68
|
}
|
|
@@ -335,11 +337,11 @@ const DatetimeButton = class {
|
|
|
335
337
|
render() {
|
|
336
338
|
const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
|
|
337
339
|
const mode = getIonMode(this);
|
|
338
|
-
return (h(Host, { key: '
|
|
340
|
+
return (h(Host, { key: 'c28e5e428111f18eaceb030dca8aba5579867eaa', class: createColorClasses(color, {
|
|
339
341
|
[mode]: true,
|
|
340
342
|
[`${selectedButton}-active`]: datetimeActive,
|
|
341
343
|
['datetime-button-disabled']: disabled,
|
|
342
|
-
}) }, dateText && (h("button", { key: '
|
|
344
|
+
}) }, dateText && (h("button", { key: 'a08f41b3150ef7171d0f1d9b3d69b51be67b7b84', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { key: '35ee68ca1cea59f03e1b59b72606e618141c8e1f', name: "date-target" }, dateText), mode === 'md' && h("ion-ripple-effect", { key: '4be53227aaf0acd20e8ebbff9f645140e8a96f33' }))), timeText && (h("button", { key: 'ab500f9b78f8c194180073eaf7325041adbd02f7', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { key: '5822486dfdedba6c071a0f5233cc06f8321a1f5d', name: "time-target" }, timeText), mode === 'md' && h("ion-ripple-effect", { key: '054a4acb811a98cc6d9bb6a3cf51232a1f09b0ea' })))));
|
|
343
345
|
}
|
|
344
346
|
get el() { return getElement(this); }
|
|
345
347
|
};
|