Arduino Date and Time Picker GPL3+


This datetime picker allows you to enter a specific date and time values. From setting an alarm to scheduling or to record your time series.

  • 5 respects

Components and supplies

Apps and online services

About this project

The main reason for the project is to have a simple and fast way to be able to edit the date and time on the Arduino without having to connect the Arduino through a serial port, or bluetooth or IP to update the date and time.

Date and Time Pickers

Date pickers let users select a date, or a range of dates while time pickers allow users to enter a specific time value.

These pickers can be emmbeded in dialogs and can be used for a wide range of scenarios as

  • Setting the system clock
  • Setting an alarm
  • Scheduling a meeting
  • Record your time series
  • Making a restaurant reservation

This project develops a Date an Time Picker Dialog to set an Arduino system clock taht can be used in projects without a Real-Time Clock (RTC) module.

Also can be used to adjust a RTC module.

The datetime picker in action

This is an intuitive Date and Time Picker that uses common date and time format patterns.

The hour spinner, minute spinner, second spinner, year spinner, month spinner and day spinner are created based on number spinner. It is same as number spinner but display a different time unit value and each has different minimum and maximum values set. These spinner components allow the user to increase or decrease the value by clicking the small triangle buttons above (increase) and below (decrease) the component.

  • 1 current date button
  • 2 current time button
  • 3 hour spinner
  • 4 minute spinner
  • 5 second spinner
  • 6 year spinner
  • 7 month spinner
  • 8 day spinner
  • 9 cancel button
  • 10 set button

To access the date and time picker, tap the current date or the current time.

To change to change any part of the date or the time, tap the up and down spinner controls.

When ready tap set to change current date and time.

Tap cancel to hide date and time picker controls.

This project uses an AZ-Delivery 2.4 inch TFT LCD display with resistive 4-wire touchscreen and an integrated SD card reader. AZ-Delivery 2.4 inch TFT LCD display.

Assembling the shield

You only need to plug the shield over the Aduino.

  • MCUFRIEND_kbv.h: a library that supports drivers of MCUFRIEND Arduino display shields and core graphics library for displays (written by Adafruit).
  • TouchScreen.h: Touchscreen Library
  • TimeLib.h: Time is a library that provides timekeeping functionality for Arduino. Using the Arduino Library Manager, install "Time by Michael Margolis". A primary goal was to enable date and time functionality that can be used with a variety of external time sources with minimum differences required in sketch logic.

Calibrating the touch Screen

You have to calibrate the display so that the position information is correct when you touch the display. MCUFriend_kbv library provides an example with the name "TouchScreen_Calibr_native". The example send the results to the serial port. Start the serial monitor of the Arduino IDE so you can copy the code generated by the example.

Follow the instructions on the touch display, press and hold the position markers displayed, which are highlighted in white. Once you have done all the position marks, the calibration of the display is output to you on the touch display and by the serial port.

For this project you need the data for the "portrait calibration".

During setup the TFT library is initialized and the Picker Dialog is created with all its ui elements visible.

The main loop is very simple:

  • first check if any element of the user interface is being taped
  • and if it is, select it
  • and send it the event by calling its onTap method
  • and if there is no element already taped deselect the last element selected

Read UI Selection

For this project the display is rotated 180° setRotation(2) , so we have to change the mapping.

// Values from touch screen calibration

Read the UI selection and send tap event to the selection:

The UI Elements

UI elements are defined as an struct that keeps record of the element state and has handles to the callbacks that respond to events.

Date Time Picker Dialog creation

The dialog contains:

  • current date button
  • current time button
  • time picker
  • date picker
  • cancel button
  • set button

The main reason for the project is to have a simple and fast way to be able to edit the date and time on the Arduino without having to connect the Arduino through a serial port, or bluetooth or IP to update the date and time.

The basic elements for a user interface are already created. Now it is very easy to implement selection lists, checkboxes, menus, radio buttons, etc .

The next step would be to convert this example into a library to make it easier to use and add more widgets. The memory of the Arduino is very limited so the design must be very modular to only load the components that are going to be used.