052. How to let user enter date with a popup calendar - Part 1?

Problem

You want to display grouped radio buttons as shown below:

How to let user enter date with a popup calendar - Part 1?


Solution


Sample Code

Note: If you have installed php-gtk2 using Gnope Installer on Windows, and if running the sample code below gives you warning that the Symbolic names for keys (e.g. Gdk::KEY_Return) is not defined, you might want to update your php-gtk2 with the latest php-gtk2.dll available here. Simply download the php-gtk2.dll and replace the copy in the folder php-gtk2xt. The latest compilation has put in the Symbolic names for keys listed here.

1   
2   
3   
4   
5   
6   
7   
8   
9   
10   
11   
12   
13   
14   
15   
16   
17   
18   
20   
21   
22   
34   
35   
36   
37   
39   
41   
42   
43   
44   
45   
47   
48   
51   
52   
53   
54   
55   
56   
57   
58   
59   
60   
61   
62   
63   
67   
73   
74   
75   
77   
84   
86   
87   
88   
94   
95   
96   
97   
98   
99   
105   
106   
107   
108   
109   
110   
<?php
$window = new GtkWindow();
$window->set_size_request(400, 150);
$window->set_position(Gtk::WIN_POS_CENTER_ALWAYS);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());

// display title
$title = new GtkLabel("Press F1 to choose a date");
$title->modify_font(new PangoFontDescription("Times New Roman Italic 10"));
$title->modify_fg(Gtk::STATE_NORMAL, GdkColor::parse("#0000ff"));
$title->set_size_request(-1, 40);
$vbox->pack_start($title, 0, 0);

$hbox = new GtkHBox();
$vbox->pack_start($hbox, 0, 0);
$hbox->pack_start(new GtkLabel("Select Date: "), 0, 0);
$hbox->pack_start($entry = new GtkEntry(), 0, 0);

// let us know when user press F1 key
$entry->connect('key-press-event', 'on_keypress', $entry); 

function on_keypress($widget, $event, $entry) {
    // we only want F1. return all the rest
    if ($event->keyval!=Gdk::KEY_F1) return false; 
    $selected_date = get_date(); // note 1
    $entry->set_text($selected_date);
    $entry->grab_focus();
}

function get_date() { // note 1
    $getdate_dialog = new GetDate();
    $date = $getdate_dialog->calendar->get_date();
    $selected_date = 1+$date[1].'/'.$date[2].'/'.$date[0]; // note 2
    return $selected_date;
}

class GetDate{ // note 1

    var $calendar;

    function GetDate() {
        $dialog = new GtkDialog('Get Date', null, Gtk::DIALOG_MODAL);
        $dialog->set_position(Gtk::WIN_POS_CENTER_ALWAYS);
        $top_area = $dialog->vbox;
        setlocale(LC_ALL, 'english');
        $top_area->pack_start($hbox = new GtkHBox());

        // set up the calendar
        $this->calendar = new GtkCalendar();
        $top_area->pack_start($this->calendar, 0, 0);

        // add an OK button
        $dialog->add_button(Gtk::STOCK_OK, Gtk::RESPONSE_OK);

        $this->dialog = $dialog;
        $dialog->set_has_separator(false);
        $dialog->show_all();
        $dialog->run();
        $dialog->destroy();
    }
}

$window->show_all();
Gtk::main();

?>

Output

As shown above.

 

Explanation

  1. We created the function get_date() so that one can allow user to enter date with a popup calendar using a one-liner: $date=get_date().
  2. Note that month returned is zero-basd, i.e. from 0 to 11. To get the "real" month, we have to add a 1.

Note

In this example, the user has to click on a date, and then click the OK button - a total of 2 clicks to select a date. We will improve on this in the next article.

Add comment


Security code
Refresh