Since Delphi does not provide a DB-aware version of the TDateTimePicker component, we'll need to use some tricks to make our date picker appear inside a DBGrid - in this article you'll see the fastest way of implementing an "in-dbgrid" drop down date (time) calendar picker.

DateTimePicker in a DBGrid!

Once you set up a DBGrid displaying records from the Authors table, Delphi will add a TDateTimeField field object that represents the DateAdded field in the database table. Note that if you use the Fields editor at design time to create a persistent field component for the date-time field, you can access it by name at runtime - in our case the field is called "DateAdded", and the TDateTimeField variable is "AdoTable1DateAdded".

Now, since we've already discussed the theory of adding controls to a DBGrid, I'll just list the necessary steps here, along with the code...

Naturally, we first need to place a TDateTimePicker on a form, so drop one. Using the Object Inspector, change the name of the TDateTime component to "DateTimePicker". Next, set its Visible property to False. As stated above, the TDateTime picker is not db-aware so there are no DB related properties to set.

Magic...

First, we need to make sure the DateTimePicker is moved (and sized) over the cell in which the DateAdded field is displayed.

procedure TForm1.DBGrid1DrawColumnCell
  (Sender: TObject; 
   const Rect: TRect; 
   DataCol: Integer; 
   Column: TColumn; 
   State: TGridDrawState);
begin
  if (gdFocused in State) then
  begin
    if (Column.Field.FieldName = 'DateAdded') then
    with DateTimePicker do 
    begin
      Left := Rect.Left + DBGrid1.Left + 1;
      Top := Rect.Top + DBGrid1.Top + 1;
      Width := Rect.Right - Rect.Left + 2;
      Width := Rect.Right - Rect.Left + 2;
      Height := Rect.Bottom - Rect.Top + 2;

      Visible := True;
    end;
  end
end;

Next, when we leave the cell, we have to hide the date time picker:

procedure TForm1.DBGrid1ColExit(Sender: TObject);
begin
  if DBGrid1.SelectedField.FieldName = 'DateAdded' then 
    DateTimePicker.Visible := False
end;

Next, note that when in editing mode, all keystrokes are going to the DBGrid's cell, we have to make sure they are sent to the DateTimePicker. We are primarily interested in the [Tab] key - [Tab] should move the input focus to the next cell.

procedure TForm1.DBGrid1KeyPress
(Sender: TObject; var Key: Char);
begin
  if (key = Chr(9)) then Exit;

  if (DBGrid1.SelectedField.FieldName = 'DateAdded') then
  begin
    DateTimePicker.SetFocus;
    SendMessage(DateTimePicker.Handle, WM_Char, word(Key), 0);
  end
end;

We are not finished yet. Just two more events to handle! What we need to do is to place the dataset into edit mode when the user opens the drop-down calendar, and we have to assign the value of the date that is marked on the calendar to the DateAdded field. Just handle the OnDropDown and the OnChange events:

procedure TForm1.DateTimePickerChange(Sender: TObject);
begin
  if DBGrid1.DataSource.State in [dsEdit, dsInsert] then
    ADOTable1DateAdded.Value := DateTimePicker.DateTime;
end;

procedure TForm1.DateTimePickerDropDown(Sender: TObject);
begin
  DBGrid1.DataSource.Edit;
end;

That's it. Run the project and voila ... one nicely looking drop down calendar enabling you to change the value of DateAdded field's column.

If you need any help, after you download and explore the full source code for this project, I encourage you to post any questions on the Delphi Programming Forum.

Ok, ok.. you'll be even more happy with a "real" db-aware TDateTimePicker ... let's say we'll build one in the near future.

Need more DBGrid related articles?