Why won't date dropdowns work with Array Data Source

I’m very new to both programing and Haxe ui, so for my first project i decided to make a simple todo list webpage based off the one in the component explorer. I tried to add a date area to the list using a date dropdown, but for some reason the Array data source doesent seem to want to pass on the Dynamic type for the dropdown??? what am i doing wrong. my code is down below:

mainVeiw.hx

package;

import haxe.ui.containers.VBox;
import haxe.ui.core.Platform;
import haxe.ui.data.ArrayDataSource;
import haxe.ui.events.ItemEvent;
import haxe.ui.events.KeyboardEvent;
import haxe.ui.events.MouseEvent;
import haxe.ui.events.UIEvent;
import haxe.ui.data.IDataItem;

@:build(haxe.ui.ComponentBuilder.build("assets/main-view.xml"))
class MainView extends VBox {
	private var todoData = new ArrayDataSource<TodoItem>();

	public function new() {
		super();
		todoData.onChange = updateActiveCount;

		todoList.dataSource = todoData;
	}

	private function updateActiveCount() {
		todoList.hidden = optionsContainer.hidden = pageBottom.hidden = (!todoData.isFiltered && todoData.size == 0);
		var activeCount = 0;
		for (i in 0...todoData.size) {
			if (todoData.get(i).completed == false) {
				activeCount++;
			}
		}
		activeCountLabel.text = activeCount + " item" + (activeCount == 1 ? "" : "s") + " left";
		clearCompletedLink.hidden = (activeCount == todoData.size);
	}

	@:bind(todoItemText, KeyboardEvent.KEY_DOWN)
	private function onTodoItemKey(e:KeyboardEvent) {
		if (e.keyCode == Platform.instance.KeyEnter) {
			if ((todoItemText.text != "") && todoItemDate.selectedItem != null) {
				todoData.add(new TodoItem(todoItemText.text, todoItemDate.selectedItem));
				todoItemText.text = "";
			} else if (todoItemText.text != "") {
				todoData.add(new TodoItem(todoItemText.text, Date.now();));
				todoItemText.text = "";
			}
		}
	}

	@:bind(todoList, ItemEvent.COMPONENT_EVENT)
	private function onTodoItemEvent(e:ItemEvent) {
		if (e.source.id == "delete") {
			todoData.removeAt(e.itemIndex);
		} else if (e.source.id == "completed") {
			(e.source.value == true) ? e.target.addClass("completed", true, true) : e.target.removeClass("completed", true, true);
		}
	}

	@:bind(optionsButtonBar, UIEvent.CHANGE)
	private function onOptionsChange(_) {
		switch (optionsButtonBar.selectedIndex) {
			case 0:
				todoData.clearFilter();
			case 1:
				todoData.filter((index, item) -> item.completed == false);
			case 2:
				todoData.filter((index, item) -> item.completed == true);
		}
	}

	@:bind(clearCompletedLink, MouseEvent.CLICK)
	private function onClearCompleted(_) {
		for (i in 0...todoData.size) {
			var item = todoData.get(i);
			if (item.completed) {
				todoData.remove(item);
			}
		}
	}
}

class TodoItem implements IDataItem {
	public var completed:Bool;
	public var label:String;
	public var date:Dynamic;

	public function new(label:String, date:Date) {
		this.label = label;
		this.date = date;
	}
}

and the main-view.xml

<vbox width="100%" height="100%">
    <style source="./css/todos.css" />
    <scrollview id="mainScrollView" width="100%" height="100%" contentWidth="100%">
        <label text="todos" horizontalAlign="center" style="color: #e4d0cf;font-size: 96px;" />
        <vbox id="todoFrame" width="550" horizontalAlign="center" style="spacing:0;">
            <vbox id="todoContainer" width="100%" horizontalAlign="center">
                <hbox width="100%" style="padding: 10px;">
                    <spacer width="40" />
                    <textfield id="todoItemText" width="70%" placeholder="What needs to be done?" style="font-size: 24px;font-style:italic;" />
                    <dropdown text="Select Date" type="date" width="30%" id="todoItemDate" />
                </hbox>
                <listview id="todoList" width="100%" hidden="true">
                    <item-renderer layout="horizontal" width="100%" style="padding: 10px;spacing:10px;">
                        <checkbox id="completed" verticalAlign="center" />
                        <textfield id="label" width="70%" verticalAlign="center" style="font-size: 24px" />
                        <dropdown id="date" width="30%" text="Select Date" type="date" verticalAlign="center" />
                        <button id="delete" icon="images/delete.png" tooltip="Remove" verticalAlign="center" />
                    </item-renderer>
                </listview>
                <box id="optionsContainer" width="100%" style="padding: 10px;" hidden="true">
                    <label id="activeCountLabel" text="" verticalAlign="center" />
                    <button-bar id="optionsButtonBar" selectedIndex="0" horizontalAlign="center">
                        <button text="All" />
                        <button text="Active" />
                        <button text="Completed" />
                    </button-bar>
                    <link id="clearCompletedLink" text="Clear Completed" verticalAlign="center" horizontalAlign="right" />
                </box>
            </vbox>
            <vbox width="100%" id="pageBottom" style="spacing:0;" hidden="true">
                <box width="98%" height="5" styleName="page-bottom" horizontalAlign="center" />
                <box width="96%" height="5" styleName="page-bottom" horizontalAlign="center" />
            </vbox>
        </vbox>
    </scrollview>
</vbox>