@widergy/mobile-ui 2.17.0 → 2.17.1

package/CHANGELOG.md

@@ -1,9 +1,15 @@
-# [2.17.0](https://github.com/widergy/mobile-ui/compare/v2.16.0...v2.17.0) (2026-06-03)
+## [2.17.1](https://github.com/widergy/mobile-ui/compare/v2.17.0...v2.17.1) (2026-06-05)
 
 
-### Features
+### Bug Fixes
+
+* [DIS-1103] ut date picker ([#507](https://github.com/widergy/mobile-ui/issues/507)) ([ffd6db3](https://github.com/widergy/mobile-ui/commit/ffd6db3c847dca170a5df955c1149a880c7f42cb))
+
+# [2.17.0](https://github.com/widergy/mobile-ui/compare/v2.16.0...v2.17.0) (2026-06-03)
+
+### Novedades y Mejoras
 
-* [DIS-1102] utbanner upgrade ([#505](https://github.com/widergy/mobile-ui/issues/505)) ([6f4a16f](https://github.com/widergy/mobile-ui/commit/6f4a16f927728b1f790d5793e34d8abe9a083a2a))
+* Se amplió el componente de banner con nuevas opciones de presentación: categoría encima del título, texto de ayuda debajo de la descripción, disposición del ícono y los botones en fila o columna, un segundo botón opcional y la posibilidad de cerrarlo desde una esquina. [#505](https://github.com/widergy/Energy-UI-Mobile/pull/505) [DIS-1102](https://widergy.atlassian.net/browse/DIS-1102)
 
 # [2.16.0](https://github.com/widergy/mobile-ui/compare/v2.15.0...v2.16.0) (2026-05-15)
 

package/lib/components/UTBottomSheet/index.js

@@ -96,6 +96,7 @@ const UTBottomSheet = ({
   }, [height]);
 
   const ChildrenContainer = scrolleable ? ScrollView : View;
+  const hasHeader = !!(title || buttonText || description);
 
   const actionAlignment =
     actionAlignment_ || [primaryAction, secondaryAction, tertiaryAction].filter(Boolean).length === 2
@@ -118,44 +119,46 @@ const UTBottomSheet = ({
     >
       <Animated.View style={[styles.animatedContainer(theme), { height: modalHeight }, pan.getLayout()]}>
         <SafeAreaView onLayout={onLayout} style={styles.content(adjustableHeight)}>
-          <View style={styles.dragHandle}>
+          <View style={styles.dragHandle(hasHeader)}>
             <View style={styles.handleIndicator(theme)} />
           </View>
           <View style={styles.content(adjustableHeight)}>
-            <View style={styles.header}>
-              <View style={styles.headerTopRow}>
-                <UTFieldLabel
-                  required={required}
-                  style={styles.title}
-                  variant="subtitle1"
-                  weight="medium"
-                  dataTestId={dataTestId ? `${dataTestId}.${titleTestId}` : undefined}
-                  {...titleProps}
-                >
-                  {title}
-                </UTFieldLabel>
-                {buttonText && (
-                  <UTButton
-                    colorTheme="primary"
-                    onPress={onButtonPress ?? onClose}
-                    variant="semitransparent"
-                    dataTestId={dataTestId ? `${dataTestId}.${closeButton}` : undefined}
-                    {...onCloseProps}
+            {hasHeader && (
+              <View style={styles.header}>
+                <View style={styles.headerTopRow}>
+                  <UTFieldLabel
+                    required={required}
+                    style={styles.title}
+                    variant="subtitle1"
+                    weight="medium"
+                    dataTestId={dataTestId ? `${dataTestId}.${titleTestId}` : undefined}
+                    {...titleProps}
                   >
-                    {buttonText}
-                  </UTButton>
+                    {title}
+                  </UTFieldLabel>
+                  {buttonText && (
+                    <UTButton
+                      colorTheme="primary"
+                      onPress={onButtonPress ?? onClose}
+                      variant="semitransparent"
+                      dataTestId={dataTestId ? `${dataTestId}.${closeButton}` : undefined}
+                      {...onCloseProps}
+                    >
+                      {buttonText}
+                    </UTButton>
+                  )}
+                </View>
+                {description && (
+                  <UTLabel
+                    colorTheme="gray"
+                    variant="small"
+                    dataTestId={dataTestId ? `${dataTestId}.${descriptionTestId}` : undefined}
+                  >
+                    {description}
+                  </UTLabel>
                 )}
               </View>
-              {description && (
-                <UTLabel
-                  colorTheme="gray"
-                  variant="small"
-                  dataTestId={dataTestId ? `${dataTestId}.${descriptionTestId}` : undefined}
-                >
-                  {description}
-                </UTLabel>
-              )}
-            </View>
+            )}
             <ChildrenContainer
               keyboardShouldPersistTaps="handled"
               style={styles.childrenContainer(adjustableHeight, withBodyPadding)}

package/lib/components/UTBottomSheet/styles.js

@@ -42,11 +42,12 @@ const styles = StyleSheet.create({
   content: adjustableHeight => ({
     flexGrow: adjustableHeight ? 0 : 1
   }),
-  dragHandle: {
+  dragHandle: hasHeader => ({
     alignItems: 'center',
     backgroundColor: 'transparent',
-    padding: 16
-  },
+    padding: 16,
+    paddingBottom: hasHeader ? 16 : 0
+  }),
   handleIndicator: theme => ({
     backgroundColor: theme.Palette.light['04'],
     borderRadius: 2.5,

package/lib/components/UTDatePicker/README.md

@@ -0,0 +1,73 @@
+# UTDatePicker
+
+Selector de fechas con calendario modal y soporte de entrada manual. Adaptación mobile del componente `UTDatePicker` de Energy-UI web (V1).
+
+## Props
+
+| Nombre      | Tipo                      | Default       | Descripción                                                           |
+|-------------|---------------------------|---------------|-----------------------------------------------------------------------|
+| clearable   | `bool`                    | `true`        | Muestra botón para limpiar la fecha seleccionada                      |
+| CustomIcon  | `elementType`             | —             | Ícono personalizado para el botón del calendario                      |
+| disabled    | `bool`                    | —             | Deshabilita toda interacción                                          |
+| error       | `string`                  | `''`          | Mensaje de error externo                                              |
+| helpText    | `string`                  | —             | Texto de ayuda debajo del campo                                       |
+| modalProps  | `object`                  | —             | Props adicionales para el Modal de React Native (equivalente mobile de `popoverProps` en web) |
+| onChange    | `func`                    | `() => {}`   | Callback al seleccionar una fecha. Recibe string en formato `DD/MM/YYYY` |
+| placeholder | `string`                  | `'DD/MM/AAAA'`| Texto placeholder del campo                                           |
+| range       | `{ maxDate, minDate }`    | —             | Restricción de rango. Fechas en formato `DD/MM/YYYY`                  |
+| readOnly    | `bool`                    | `false`       | Modo solo lectura                                                     |
+| required    | `bool`                    | —             | Marca el título como requerido                                        |
+| size        | `'sm' \| 'md'`            | `'sm'`        | Tamaño del campo de entrada                                           |
+| style       | `{ root: ViewStyle }`     | —             | Estilos personalizados para el contenedor raíz                        |
+| title       | `string`                  | —             | Etiqueta superior del campo                                           |
+| value       | `string`                  | `''`          | Fecha seleccionada en formato `DD/MM/YYYY`                            |
+| variant     | `'select' \| 'picker'`    | `'select'`    | Variante visual del campo. `'picker'` usa fondo transparente sin borde |
+
+## Variantes
+
+### `variant='select'` (default)
+Campo con borde y fondo blanco. Muestra el mensaje de error debajo del campo.
+
+### `variant='picker'`
+Fondo transparente sin borde. El error no se muestra debajo (se maneja externamente).
+
+## Adaptaciones mobile vs web
+
+- El calendario se abre mediante el ícono de calendario (no al hacer foco en el input, como en web).
+- El `Popover` de MUI fue reemplazado por un `Modal` de React Native. Usar `modalProps` en lugar de `popoverProps`.
+- Los estilos usan `StyleSheet` y el sistema de theming de la librería (no CSS Modules).
+- La entrada de texto usa teclado numérico (`type='number'`).
+
+## Ejemplos
+
+```jsx
+// Básico
+<UTDatePicker
+  onChange={date => console.log(date)}
+  title="Fecha de nacimiento"
+  value={selectedDate}
+/>
+
+// Con rango y error
+<UTDatePicker
+  error="La fecha no es válida"
+  onChange={setDate}
+  range={{ minDate: '01/01/2020', maxDate: '31/12/2030' }}
+  title="Seleccioná una fecha"
+  value={date}
+/>
+
+// Variante picker (transparente)
+<UTDatePicker
+  onChange={setDate}
+  value={date}
+  variant="picker"
+/>
+
+// Solo lectura
+<UTDatePicker
+  readOnly
+  title="Fecha registrada"
+  value="15/06/2024"
+/>
+```

package/lib/components/UTDatePicker/components/Calendar/constants.js

@@ -0,0 +1,3 @@
+export const CALENDAR_LOCALE = 'es';
+export const PICKER_ITEM_HEIGHT = 40;
+export const WEEK_KEY_FORMAT = 'YYYY-MM-DD';

package/lib/components/UTDatePicker/components/Calendar/index.js

@@ -0,0 +1,197 @@
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import dayjs from 'dayjs';
+import 'dayjs/locale/es';
+import { View } from 'react-native';
+import { func, object, string } from 'prop-types';
+
+import UTButton from '../../../UTButton';
+import UTLabel from '../../../UTLabel';
+import { TEST_IDS } from '../../../../constants/testIds';
+import {
+  CALENDAR_VIEWS,
+  DAY_UNIT,
+  MONTH_LABELS,
+  MONTH_UNIT,
+  MONTH_YEAR_FORMAT,
+  OUTPUT_LABEL_MASK,
+  WEEKDAYS_LABELS
+} from '../../constants';
+import styles from '../../styles';
+import { getWeeks, getYearRange } from '../../utils';
+import Day from '../Day';
+import PickerColumn from '../PickerColumn';
+
+import { CALENDAR_LOCALE, PICKER_ITEM_HEIGHT, WEEK_KEY_FORMAT } from './constants';
+
+const { UTDatePicker: datePickerTestIds } = TEST_IDS;
+
+const Calendar = ({ dataTestId, maxDate, minDate, onDaySelect, pickedDate }) => {
+  const monthScrollRef = useRef(null);
+  const yearScrollRef = useRef(null);
+  const [currentMonth, setCurrentMonth] = useState(pickedDate?.isValid() ? pickedDate : dayjs());
+  const [viewMode, setViewMode] = useState(CALENDAR_VIEWS.calendar);
+
+  useEffect(() => {
+    if (pickedDate?.isValid()) setCurrentMonth(pickedDate);
+  }, [pickedDate]);
+
+  const weeks = getWeeks(currentMonth);
+  const years = useMemo(() => getYearRange(minDate, maxDate), [minDate, maxDate]);
+  const selectedYear = pickedDate?.isValid() ? pickedDate.year() : null;
+  const selectedMonth = pickedDate?.isValid() ? pickedDate.month() : null;
+
+  const visibleMonths = useMemo(() => {
+    const viewedYear = currentMonth.year();
+    const parsedMin = minDate ? dayjs(minDate, OUTPUT_LABEL_MASK) : null;
+    const parsedMax = maxDate ? dayjs(maxDate, OUTPUT_LABEL_MASK) : null;
+    const minMonthBound = parsedMin?.year() === viewedYear ? parsedMin.month() : 0;
+    const maxMonthBound = parsedMax?.year() === viewedYear ? parsedMax.month() : 11;
+    return MONTH_LABELS.map((label, index) => ({ index, label })).filter(
+      ({ index }) => index >= minMonthBound && index <= maxMonthBound
+    );
+  }, [currentMonth, minDate, maxDate]);
+
+  const handlePrevMonth = () => setCurrentMonth(prev => prev.subtract(1, MONTH_UNIT));
+  const handleNextMonth = () => setCurrentMonth(prev => prev.add(1, MONTH_UNIT));
+
+  const handleMonthSelect = month => {
+    setCurrentMonth(prev => prev.month(month));
+  };
+
+  const handleYearSelect = year => {
+    setCurrentMonth(prev => prev.year(year));
+  };
+
+  const isInYearView = viewMode === CALENDAR_VIEWS.year;
+  const rawMonthLabel = currentMonth.locale(CALENDAR_LOCALE).format(MONTH_YEAR_FORMAT);
+  const monthYearLabel = rawMonthLabel.charAt(0).toUpperCase() + rawMonthLabel.slice(1);
+
+  const toggleViewMode = () =>
+    setViewMode(prev => (prev === CALENDAR_VIEWS.calendar ? CALENDAR_VIEWS.year : CALENDAR_VIEWS.calendar));
+
+  useEffect(() => {
+    if (!isInYearView) return;
+    const targetMonth = selectedMonth ?? currentMonth.month();
+    const monthScrollPos = visibleMonths.findIndex(m => m.index === targetMonth);
+    const yearIdx = years.findIndex(y => y === (selectedYear ?? currentMonth.year()));
+    const id = setTimeout(() => {
+      if (monthScrollPos >= 0) {
+        monthScrollRef.current?.scrollTo({ animated: false, y: monthScrollPos * PICKER_ITEM_HEIGHT });
+      }
+      if (yearIdx >= 0) yearScrollRef.current?.scrollTo({ animated: false, y: yearIdx * PICKER_ITEM_HEIGHT });
+    }, 50);
+    return () => clearTimeout(id);
+  }, [isInYearView, visibleMonths, years, selectedMonth, selectedYear, currentMonth]);
+
+  const isDisabled = date => {
+    if (minDate && date.isBefore(dayjs(minDate, OUTPUT_LABEL_MASK), DAY_UNIT)) return true;
+    if (maxDate && date.isAfter(dayjs(maxDate, OUTPUT_LABEL_MASK), DAY_UNIT)) return true;
+    return false;
+  };
+
+  const monthItems = visibleMonths.map(({ index, label }) => ({
+    key: label,
+    label,
+    onPress: () => handleMonthSelect(index),
+    selected: index === currentMonth.month(),
+    testID: `${datePickerTestIds.monthItem}.${label}`
+  }));
+
+  const yearItems = years.map(year => ({
+    key: year,
+    label: String(year),
+    onPress: () => handleYearSelect(year),
+    selected: year === currentMonth.year(),
+    testID: `${datePickerTestIds.yearItem}.${year}`
+  }));
+
+  return (
+    <View style={styles.calendarRoot} testID={dataTestId || datePickerTestIds.calendar}>
+      <View style={styles.nav}>
+        {isInYearView ? (
+          <View style={styles.navSpacer} />
+        ) : (
+          <UTButton
+            colorTheme="secondary"
+            dataTestId={datePickerTestIds.calendarPrevBtn}
+            Icon="IconChevronLeft"
+            onPress={handlePrevMonth}
+            size="small"
+            variant="text"
+          />
+        )}
+
+        <UTButton
+          colorTheme="secondary"
+          dataTestId={datePickerTestIds.calendarMonthYear}
+          Icon={isInYearView ? 'IconChevronUp' : 'IconChevronDown'}
+          iconPlacement="right"
+          onPress={toggleViewMode}
+          size="small"
+          style={{ root: styles.navLabel }}
+          variant="text"
+        >
+          {monthYearLabel}
+        </UTButton>
+
+        {isInYearView ? (
+          <View style={styles.navSpacer} />
+        ) : (
+          <UTButton
+            colorTheme="secondary"
+            dataTestId={datePickerTestIds.calendarNextBtn}
+            Icon="IconChevronRight"
+            onPress={handleNextMonth}
+            size="small"
+            variant="text"
+          />
+        )}
+      </View>
+
+      {isInYearView ? (
+        <View style={styles.pickerContainer}>
+          <PickerColumn items={monthItems} scrollRef={monthScrollRef} testID={datePickerTestIds.monthView} />
+          <PickerColumn items={yearItems} scrollRef={yearScrollRef} testID={datePickerTestIds.yearView} />
+        </View>
+      ) : (
+        <View style={styles.month}>
+          <View style={styles.week}>
+            {WEEKDAYS_LABELS.map(label => (
+              <UTLabel colorTheme="gray" key={label} style={styles.dayCell} variant="small" weight="medium">
+                {label}
+              </UTLabel>
+            ))}
+          </View>
+
+          {weeks.map(week => (
+            <View key={week[0].format(WEEK_KEY_FORMAT)} style={styles.week}>
+              {week.map(date => {
+                const dayInCurrentMonth = date.month() === currentMonth.month();
+                return (
+                  <Day
+                    date={date}
+                    dayInCurrentMonth={dayInCurrentMonth}
+                    isDisabled={isDisabled(date)}
+                    key={date.format(WEEK_KEY_FORMAT)}
+                    onClick={onDaySelect}
+                    pickedDate={pickedDate}
+                  />
+                );
+              })}
+            </View>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+};
+
+Calendar.propTypes = {
+  dataTestId: string,
+  maxDate: string,
+  minDate: string,
+  onDaySelect: func,
+  pickedDate: object
+};
+
+export default Calendar;

package/lib/components/UTDatePicker/components/Day/index.js

@@ -0,0 +1,44 @@
+import React, { memo } from 'react';
+import dayjs from 'dayjs';
+import { View } from 'react-native';
+import { bool, func, object } from 'prop-types';
+
+import { useTheme } from '../../../../theming';
+import UTButton from '../../../UTButton';
+import { DAY_NUMBER_FORMAT } from '../../constants';
+import { getDayCellButtonStyle } from '../../theme';
+import { isSelected } from '../../utils';
+
+import styles from './styles';
+
+const Day = ({ date, dayInCurrentMonth, isDisabled, onClick, pickedDate }) => {
+  const theme = useTheme();
+  const selected = isSelected(date, pickedDate);
+
+  if (!dayInCurrentMonth) return <View style={styles.otherMonthCell} />;
+
+  const buttonStyle = getDayCellButtonStyle(selected, theme);
+
+  return (
+    <UTButton
+      colorTheme={selected ? 'primary' : 'secondary'}
+      disabled={isDisabled}
+      onPress={() => onClick(date)}
+      size="small"
+      style={buttonStyle}
+      variant={selected ? 'filled' : 'text'}
+    >
+      {dayjs(date).format(DAY_NUMBER_FORMAT)}
+    </UTButton>
+  );
+};
+
+Day.propTypes = {
+  date: object,
+  dayInCurrentMonth: bool,
+  isDisabled: bool,
+  onClick: func,
+  pickedDate: object
+};
+
+export default memo(Day);

package/lib/components/UTDatePicker/components/Day/styles.js

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  otherMonthCell: {
+    flex: 1,
+    height: 36
+  }
+});

package/lib/components/UTDatePicker/components/PickerColumn/index.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+import { arrayOf, bool, func, number, object, oneOfType, shape, string } from 'prop-types';
+
+import { useTheme } from '../../../../theming';
+import UTButton from '../../../UTButton';
+import { getYearItemStyle } from '../../theme';
+import styles from '../../styles';
+
+const PickerColumn = ({ items, scrollRef, testID }) => {
+  const theme = useTheme();
+
+  return (
+    <View style={styles.pickerColumn}>
+      <ScrollView
+        contentContainerStyle={styles.pickerScrollContent}
+        ref={scrollRef}
+        showsVerticalScrollIndicator={false}
+        style={styles.pickerScroll}
+        testID={testID}
+      >
+        {items.map(({ key, label, onPress, selected, testID: itemTestID }) => {
+          const itemTheme = getYearItemStyle(selected, theme);
+          return (
+            <UTButton
+              colorTheme={selected ? 'primary' : 'secondary'}
+              dataTestId={itemTestID}
+              key={key}
+              onPress={onPress}
+              size="small"
+              style={{ root: { ...styles.yearItem, ...itemTheme } }}
+              variant={selected ? 'filled' : 'text'}
+            >
+              {label}
+            </UTButton>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+};
+
+PickerColumn.propTypes = {
+  items: arrayOf(
+    shape({
+      key: oneOfType([number, string]),
+      label: string,
+      onPress: func,
+      selected: bool,
+      testID: string
+    })
+  ),
+  scrollRef: object,
+  testID: string
+};
+
+export default PickerColumn;

package/lib/components/UTDatePicker/constants.js

@@ -0,0 +1,48 @@
+export const OUTPUT_LABEL_MASK = 'DD/MM/YYYY';
+
+export const WEEKDAYS_LABELS = ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'];
+
+export const MONTH_YEAR_FORMAT = 'MMMM YYYY';
+
+export const DAY_NUMBER_FORMAT = 'DD';
+
+export const DEFAULT_PLACEHOLDER = 'DD/MM/AAAA';
+
+export const TYPING_ERROR_MESSAGE = 'Fecha inválida';
+
+export const VARIANTS = {
+  picker: 'picker',
+  select: 'select'
+};
+
+export const SIZES = {
+  md: 'md',
+  sm: 'sm'
+};
+
+export const DAY_UNIT = 'day';
+export const MONTH_UNIT = 'month';
+
+export const CALENDAR_VIEWS = {
+  calendar: 'calendar',
+  year: 'year'
+};
+
+export const MONTH_LABELS = [
+  'Ene',
+  'Feb',
+  'Mar',
+  'Abr',
+  'May',
+  'Jun',
+  'Jul',
+  'Ago',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dic'
+];
+
+export const YEAR_RANGE_BEFORE = 50;
+export const YEAR_RANGE_AFTER = 10;
+export const YEARS_PER_ROW = 3;

package/lib/components/UTDatePicker/index.js

@@ -0,0 +1,135 @@
+import React, { useState, useEffect } from 'react';
+import { Keyboard } from 'react-native';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+import { COMPONENT_KEYS } from '../UTBaseInputField/constants';
+
+import { DEFAULT_PLACEHOLDER, OUTPUT_LABEL_MASK, VARIANTS } from './constants';
+import UTDatePickerLayout from './layout';
+import { propTypes } from './proptypes';
+import { dateMatchesFormat, getFinalDate } from './utils';
+
+dayjs.extend(customParseFormat);
+
+const UTDatePicker = ({
+  modalProps,
+  clearable = true,
+  CustomIcon,
+  disabled,
+  error = '',
+  helpText,
+  onChange = () => {},
+  placeholder,
+  range,
+  readOnly = false,
+  required,
+  style,
+  title,
+  value = '',
+  variant = VARIANTS.select
+}) => {
+  const { maxDate, minDate } = range || {};
+
+  const [pickedDate, setPickedDate] = useState(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    if (!value && pickedDate?.isValid()) setPickedDate(null);
+    else if (dateMatchesFormat(value, OUTPUT_LABEL_MASK)) setPickedDate(dayjs(value, OUTPUT_LABEL_MASK));
+    else setPickedDate(null);
+  }, [value]);
+
+  const openCalendar = () => {
+    if (disabled || readOnly) return;
+    Keyboard.dismiss();
+    setIsOpen(true);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  const handleDaySelect = date => {
+    const finalDate = getFinalDate({ date, maxDate, minDate });
+    setPickedDate(finalDate);
+    if (finalDate.isValid()) onChange(finalDate.format(OUTPUT_LABEL_MASK));
+    else onChange('');
+    setIsOpen(false);
+  };
+
+  const handleClear = () => {
+    setPickedDate(null);
+    onChange('');
+  };
+
+  const displayValue = pickedDate?.isValid() ? pickedDate.format(OUTPUT_LABEL_MASK) : '';
+
+  const hasError = !!error;
+  const hasValue = !!pickedDate?.isValid();
+  const displayPlaceholder = placeholder || DEFAULT_PLACEHOLDER;
+  const errorMessage = error;
+  const isTransparent = variant === VARIANTS.picker;
+
+  const showClearButton = clearable && hasValue && !disabled && !readOnly;
+  const showCalendarIcon = !readOnly && !disabled;
+
+  const calendarAction = {
+    colorTheme: hasError ? 'error' : isOpen ? 'primary' : 'gray',
+    Icon: CustomIcon || 'IconCalendarEvent',
+    onPress: openCalendar,
+    size: 'small',
+    variant: 'text'
+  };
+
+  const clearAction = {
+    colorTheme: 'secondary',
+    Icon: 'IconX',
+    onPress: handleClear,
+    size: 'small',
+    variant: 'text'
+  };
+
+  const rightAdornments = showCalendarIcon
+    ? [
+        {
+          name: COMPONENT_KEYS.ACTION,
+          props: { action: showClearButton ? clearAction : calendarAction }
+        }
+      ]
+    : [];
+
+  const inputStyle = isTransparent
+    ? { container: { backgroundColor: 'transparent', borderColor: 'transparent' } }
+    : { container: { alignItems: 'stretch', paddingHorizontal: 12 } };
+
+  return (
+    <UTDatePickerLayout
+      disabled={disabled}
+      displayPlaceholder={displayPlaceholder}
+      displayValue={displayValue}
+      errorMessage={errorMessage}
+      handleClose={handleClose}
+      handleDaySelect={handleDaySelect}
+      hasError={hasError}
+      helpText={helpText}
+      inputStyle={inputStyle}
+      isOpen={isOpen}
+      maxDate={maxDate}
+      minDate={minDate}
+      modalProps={modalProps}
+      onPress={openCalendar}
+      pickedDate={pickedDate}
+      readOnly={readOnly}
+      required={required}
+      rightAdornments={rightAdornments}
+      style={style}
+      title={title}
+      variant={variant}
+    />
+  );
+};
+
+UTDatePicker.propTypes = propTypes;
+
+export default UTDatePicker;

package/lib/components/UTDatePicker/layout.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+import { array, bool, func, object, string } from 'prop-types';
+
+import UTBaseInputField from '../UTBaseInputField';
+import UTBottomSheet from '../UTBottomSheet';
+import UTFieldLabel from '../UTFieldLabel';
+import UTLabel from '../UTLabel';
+import UTValidation from '../UTValidation';
+import { TEST_IDS } from '../../constants/testIds';
+
+import Calendar from './components/Calendar';
+import { VARIANTS } from './constants';
+import styles from './styles';
+
+const { UTDatePicker: datePickerTestIds } = TEST_IDS;
+
+const UTDatePickerLayout = ({
+  disabled,
+  displayPlaceholder,
+  displayValue,
+  errorMessage,
+  handleClose,
+  handleDaySelect,
+  hasError,
+  helpText,
+  inputStyle,
+  isOpen,
+  maxDate,
+  minDate,
+  modalProps,
+  onPress,
+  pickedDate,
+  readOnly,
+  required,
+  rightAdornments,
+  style,
+  title,
+  variant
+}) => (
+  <View style={[styles.root, style?.root]} testID={datePickerTestIds.root}>
+    {!!title && <UTFieldLabel required={required}>{title}</UTFieldLabel>}
+
+    <Pressable onPress={onPress} style={styles.pressable}>
+      <UTBaseInputField
+        alwaysShowPlaceholder
+        dataTestId={datePickerTestIds.input}
+        disabled={disabled}
+        editable={false}
+        error={hasError}
+        placeholder={displayPlaceholder}
+        readOnly={readOnly}
+        rightAdornments={rightAdornments}
+        style={inputStyle}
+        value={displayValue}
+      />
+    </Pressable>
+
+    {!!helpText && (
+      <UTLabel colorTheme="gray" variant="small">
+        {helpText}
+      </UTLabel>
+    )}
+
+    {variant === VARIANTS.select && !!errorMessage && (
+      <UTValidation
+        dataTestId={datePickerTestIds.errorMessage}
+        validationData={[{ items: [{ status: 'error', text: errorMessage }] }]}
+      />
+    )}
+
+    <UTBottomSheet
+      adjustableHeight
+      onClose={handleClose}
+      visible={isOpen}
+      withBodyPadding={false}
+      {...modalProps}
+    >
+      <Calendar maxDate={maxDate} minDate={minDate} onDaySelect={handleDaySelect} pickedDate={pickedDate} />
+    </UTBottomSheet>
+  </View>
+);
+
+UTDatePickerLayout.propTypes = {
+  disabled: bool,
+  displayPlaceholder: string,
+  displayValue: string,
+  errorMessage: string,
+  handleClose: func,
+  handleDaySelect: func,
+  hasError: bool,
+  helpText: string,
+  inputStyle: object,
+  isOpen: bool,
+  maxDate: string,
+  minDate: string,
+  modalProps: object,
+  onPress: func,
+  pickedDate: object,
+  readOnly: bool,
+  required: bool,
+  rightAdornments: array,
+  style: object,
+  title: string,
+  variant: string
+};
+
+export default UTDatePickerLayout;

package/lib/components/UTDatePicker/proptypes.js

@@ -0,0 +1,20 @@
+import { bool, elementType, func, object, oneOf, shape, string } from 'prop-types';
+
+export const propTypes = {
+  clearable: bool,
+  CustomIcon: elementType,
+  disabled: bool,
+  error: string,
+  helpText: string,
+  modalProps: object,
+  onChange: func,
+  placeholder: string,
+  range: shape({ maxDate: string, minDate: string }),
+  readOnly: bool,
+  required: bool,
+  size: oneOf(['sm', 'md']),
+  style: shape({ root: object }),
+  title: string,
+  value: string,
+  variant: oneOf(['select', 'picker'])
+};

package/lib/components/UTDatePicker/styles.js

@@ -0,0 +1,63 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  calendarRoot: {
+    paddingHorizontal: 24,
+    paddingTop: 16
+  },
+  dayCell: {
+    flex: 1,
+    paddingVertical: 2,
+    textAlign: 'center'
+  },
+  month: {
+    gap: 2,
+    minHeight: 260
+  },
+  nav: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 24
+  },
+  navLabel: {
+    flex: 1,
+    textAlign: 'center'
+  },
+  navSpacer: {
+    width: 36
+  },
+  pickerColumn: {
+    flex: 1,
+    overflow: 'hidden'
+  },
+  pickerContainer: {
+    flexDirection: 'row',
+    gap: 8,
+    height: 260
+  },
+  pickerScroll: {
+    height: 260
+  },
+  pickerScrollContent: {
+    paddingBottom: 220
+  },
+  pressable: {
+    width: '100%'
+  },
+  root: {
+    gap: 8
+  },
+  week: {
+    flexDirection: 'row'
+  },
+  yearItem: {
+    alignItems: 'center',
+    borderRadius: 8,
+    height: 40,
+    justifyContent: 'center',
+    width: '100%'
+  }
+});
+
+export default styles;

package/lib/components/UTDatePicker/theme.js

@@ -0,0 +1,18 @@
+export const getDayCellButtonStyle = (selected, theme) => ({
+  root: {
+    alignItems: 'center',
+    flex: 1,
+    height: 36,
+    justifyContent: 'center',
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    ...(selected && {
+      backgroundColor: theme.Palette.accent['04'],
+      borderRadius: 18
+    })
+  }
+});
+
+export const getYearItemStyle = (selected, theme) => ({
+  backgroundColor: selected ? theme.Palette.accent['04'] : undefined
+});

package/lib/components/UTDatePicker/utils.js

@@ -0,0 +1,52 @@
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+import { DAY_UNIT, MONTH_UNIT, OUTPUT_LABEL_MASK, YEAR_RANGE_AFTER, YEAR_RANGE_BEFORE } from './constants';
+
+dayjs.extend(customParseFormat);
+
+export const isSelected = (date, selectedDate) => selectedDate && date.isSame(selectedDate, DAY_UNIT);
+
+export const dateMatchesFormat = (date, targetFormat) => dayjs(date, targetFormat, true).isValid();
+
+export const getFinalDate = ({ date, maxDate, minDate }) => {
+  const formattedDate = dayjs(date);
+  if (maxDate && formattedDate?.isAfter(dayjs(maxDate, OUTPUT_LABEL_MASK)))
+    return dayjs(maxDate, OUTPUT_LABEL_MASK);
+  if (minDate && formattedDate?.isBefore(dayjs(minDate, OUTPUT_LABEL_MASK)))
+    return dayjs(minDate, OUTPUT_LABEL_MASK);
+  return formattedDate;
+};
+
+export const getWeeks = month => {
+  const firstDay = month.startOf(MONTH_UNIT);
+  const lastDay = month.endOf(MONTH_UNIT);
+  const startDate = firstDay.subtract(firstDay.day(), DAY_UNIT);
+
+  const weeks = [];
+  let current = startDate;
+
+  do {
+    const weekStart = current;
+    weeks.push(Array.from({ length: 7 }, (_, i) => weekStart.add(i, DAY_UNIT)));
+    current = current.add(7, DAY_UNIT);
+  } while (current.isBefore(lastDay) || current.isSame(lastDay, DAY_UNIT));
+
+  return weeks;
+};
+
+export const getYearRange = (minDateStr, maxDateStr) => {
+  const currentYear = dayjs().year();
+  const minYear = minDateStr ? dayjs(minDateStr, OUTPUT_LABEL_MASK).year() : currentYear - YEAR_RANGE_BEFORE;
+  const maxYear = maxDateStr ? dayjs(maxDateStr, OUTPUT_LABEL_MASK).year() : currentYear + YEAR_RANGE_AFTER;
+  const years = [];
+  for (let y = maxYear; y >= minYear; y--) years.push(y);
+  return years;
+};
+
+export const autoFormatDate = val => {
+  const digits = val.replace(/\D/g, '').slice(0, 8);
+  if (digits.length <= 2) return digits;
+  if (digits.length <= 4) return `${digits.slice(0, 2)}/${digits.slice(2)}`;
+  return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4)}`;
+};

package/lib/constants/testIds.js

@@ -44,6 +44,19 @@ export const TEST_ID_CONSTANTS = {
 
 export const TEST_IDS = {
   modal: 'modal',
+  UTDatePicker: {
+    calendar: 'UTDatePicker.calendar',
+    calendarMonthYear: 'UTDatePicker.calendar.monthYear',
+    calendarNextBtn: 'UTDatePicker.calendar.nextBtn',
+    calendarPrevBtn: 'UTDatePicker.calendar.prevBtn',
+    errorMessage: 'UTDatePicker.errorMessage',
+    input: 'UTDatePicker.input',
+    monthItem: 'UTDatePicker.monthItem',
+    monthView: 'UTDatePicker.monthView',
+    root: 'UTDatePicker.root',
+    yearItem: 'UTDatePicker.yearItem',
+    yearView: 'UTDatePicker.yearView'
+  },
   roundView: 'roundView',
   skeletonLoader: 'skeletonLoader',
   topbar: {

package/lib/index.js

@@ -49,6 +49,7 @@ export { default as UTCuit } from './components/UTCuit';
 export { default as UTCheckList } from './components/UTCheckList';
 export { default as UTDataCategory } from './components/UTDataCategory';
 export { default as UTDataElement } from './components/UTDataElement';
+export { default as UTDatePicker } from './components/UTDatePicker';
 export { default as UTDetailDrawer } from './components/UTDetailDrawer';
 export { default as UTIcon } from './components/UTIcon';
 export { default as UTImage } from './components/UTImage';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "2.17.0",
+  "version": "2.17.1",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [
@@ -43,6 +43,7 @@
     "@tabler/icons-react-native": "^3.34.1",
     "@widergy/web-utils": "^2.0.0",
     "core-js": "3",
+    "dayjs": "^1.11.10",
     "deprecated-react-native-prop-types": "^5.0.0",
     "expo-document-picker": "^13.1.6",
     "expo-image-manipulator": "^13.1.7",
@@ -73,12 +74,12 @@
     "@commitlint/config-conventional": "^17.7.0",
     "@eslint/compat": "^1.4.0",
     "@eslint/eslintrc": "^3.3.0",
-    "@widergy/semantic-release-package-config": "^1.0.0",
-    "@widergy/eslint-config": "^1.0.0",
     "@react-native/babel-preset": "0.73.0",
+    "@widergy/eslint-config": "^1.0.0",
+    "@widergy/semantic-release-package-config": "^1.0.0",
+    "babel-jest": "^29.6.2",
     "babel-plugin-import-glob": "^2.0.0",
     "babel-plugin-module-resolver": "^5.0.0",
-    "babel-jest": "^29.6.2",
     "babel-preset-minify": "^0.5.2",
     "eslint": "^9.38.0",
     "eslint-config-airbnb": "^19.0.4",