diff --git a/module/api/v1/entries/todo.php b/module/api/v1/entries/todo.php
index c9e10bc79e..1f8a7106ed 100644
--- a/module/api/v1/entries/todo.php
+++ b/module/api/v1/entries/todo.php
@@ -47,7 +47,7 @@ class todoEntry extends entry
         $fields = 'date,type,name,pri,desc,status,begin,end,private';
         $this->batchSetPost($fields, $oldTodo);
 
-        $this->setPost('idvalue', 0);
+        $this->setPost('objectID', 0);
         $this->setPost('date', $this->request('date', date("Y-m-d", strtotime($oldTodo->date))));
         $this->setPost('begin', $this->request('begin') ? str_replace(':', '', $this->request('begin')) : $oldTodo->begin);
         $this->setPost('end', $this->request('end') ? str_replace(':', '', $this->request('end')) : $oldTodo->end);
diff --git a/module/block/zen.php b/module/block/zen.php
index 47240d42c5..f9f7fd4ba9 100644
--- a/module/block/zen.php
+++ b/module/block/zen.php
@@ -286,7 +286,7 @@ class blockZen extends block
         foreach($todos as $key => $todo)
         {
             /* '2030-01-01' means undetermined */
-            if($todo->date == '2030-01-01' || ($todo->type == 'task' && isset($suspendedTasks[$todo->idvalue])))
+            if($todo->date == FUTURE_TIME || ($todo->type == 'task' && isset($suspendedTasks[$todo->objectID])))
             {
                 unset($todos[$key]);
             }
@@ -1894,7 +1894,7 @@ class blockZen extends block
                         unset($objects[$key]);
                         continue;
                     }
-                    if($todo->type == 'task' && isset($tasks[$todo->idvalue]))
+                    if($todo->type == 'task' && isset($tasks[$todo->objectID]))
                     {
                         unset($objects[$key]);
                         continue;
diff --git a/module/bug/control.php b/module/bug/control.php
index bfb85f23a8..e85f9e798a 100755
--- a/module/bug/control.php
+++ b/module/bug/control.php
@@ -1204,8 +1204,15 @@ class bug extends control
         $account = $user->account;
         $bugs    = $this->bug->getUserBugPairs($account, true, 0, array(), array(), $appendID);
 
-        if($id) return print(html::select("bugs[$id]", $bugs, '', 'class="form-control"'));
-        return print(html::select('bug', $bugs, '', 'class=form-control'));
+        $items = array();
+        foreach($bugs as $bugID => $bugTitle)
+        {
+            if(empty($bugID)) continue;
+            $items[] = array('text' => $bugTitle, 'value' => $bugID);
+        }
+
+        $fieldName = $id ? "bugs[$id]" : 'bug';
+        return print(json_encode(array('name' => $fieldName, 'items' => $items)));
     }
 
     /**
diff --git a/module/bug/zen.php b/module/bug/zen.php
index 05b5a926bd..c4e8ba9f2d 100644
--- a/module/bug/zen.php
+++ b/module/bug/zen.php
@@ -1827,8 +1827,8 @@ class bugZen extends bug
         $this->action->create('todo', $todoID, 'finished', '', "BUG:$bugID");
         if($this->config->edition == 'biz' || $this->config->edition == 'max')
         {
-            $todo = $this->dao->select('type, idvalue')->from(TABLE_TODO)->where('id')->eq($todoID)->fetch();
-            if($todo->type == 'feedback' && $todo->idvalue) $this->loadModel('feedback')->updateStatus('todo', $todo->idvalue, 'done');
+            $todo = $this->dao->select('type, objectID')->from(TABLE_TODO)->where('id')->eq($todoID)->fetch();
+            if($todo->type == 'feedback' && $todo->objectID) $this->loadModel('feedback')->updateStatus('todo', $todo->objectID, 'done');
         }
 
         return !dao::isError();
diff --git a/module/mr/model.php b/module/mr/model.php
index 3c80100554..146221cb89 100644
--- a/module/mr/model.php
+++ b/module/mr/model.php
@@ -635,7 +635,7 @@ class mrModel extends model
                 {
                     $todoDesc = $this->dao->select('*')
                         ->from(TABLE_TODO)
-                        ->where('idvalue')->eq($rawTodo->id)
+                        ->where('objectID')->eq($rawTodo->id)
                         ->fetch();
                     if(empty($todoDesc))
                     {
@@ -651,7 +651,7 @@ class mrModel extends model
                         $todo->begin        = '2400'; /* 2400 means begin is 'undefined'. */
                         $todo->end          = '2400'; /* 2400 means end is 'undefined'. */
                         $todo->type         = 'custom';
-                        $todo->idvalue      = $rawTodo->id;
+                        $todo->objectID     = $rawTodo->id;
                         $todo->pri          = 3;
                         $todo->name         = $this->lang->mr->common . ": " . $rawTodo->target->title;
                         $todo->desc         = $author . '&nbsp;' . $this->lang->mr->at . '&nbsp;' . '<a href="' . $this->gitlab->apiGetSingleProject($hostID, $projectID)->web_url . '" target="_blank">' . $rawTodo->project->path .'</a>' . '&nbsp;' . $this->lang->mr->todomessage . '<a href="' . $rawTodo->target->web_url . '" target="_blank">' . '&nbsp;' . $this->lang->mr->common .'</a>' . '。';
diff --git a/module/my/control.php b/module/my/control.php
index c84273c5eb..0e7d989017 100755
--- a/module/my/control.php
+++ b/module/my/control.php
@@ -303,7 +303,7 @@ EOF;
         $doingCount = 0;
         foreach($todos as $key => $todo)
         {
-            if($todo->type == 'task' and isset($tasks[$todo->idvalue])) unset($todos[$key]);
+            if($todo->type == 'task' and isset($tasks[$todo->objectID])) unset($todos[$key]);
             if($todo->status == 'wait')  $waitCount ++;
             if($todo->status == 'doing') $doingCount ++;
             if($todo->date == '2030-01-01') $todo->date = $this->lang->todo->future;
diff --git a/module/pivot/model.php b/module/pivot/model.php
index 17aed8a67c..4561279239 100644
--- a/module/pivot/model.php
+++ b/module/pivot/model.php
@@ -737,8 +737,8 @@ class pivotModel extends model
         $todos = array();
         while($todo = $stmt->fetch())
         {
-            if($todo->type == 'task') $todo->name = $this->dao->findById($todo->idvalue)->from(TABLE_TASK)->fetch('name');
-            if($todo->type == 'bug')  $todo->name = $this->dao->findById($todo->idvalue)->from(TABLE_BUG)->fetch('title');
+            if($todo->type == 'task') $todo->name = $this->dao->findById($todo->objectID)->from(TABLE_TASK)->fetch('name');
+            if($todo->type == 'bug')  $todo->name = $this->dao->findById($todo->objectID)->from(TABLE_BUG)->fetch('title');
             $todos[$todo->user][] = $todo;
         }
         return $todos;
diff --git a/module/report/model.php b/module/report/model.php
index 971bfe0db7..c239844076 100644
--- a/module/report/model.php
+++ b/module/report/model.php
@@ -178,8 +178,8 @@ class reportModel extends model
         $todos = array();
         while($todo = $stmt->fetch())
         {
-            if($todo->type == 'task') $todo->name = $this->dao->findById($todo->idvalue)->from(TABLE_TASK)->fetch('name');
-            if($todo->type == 'bug')  $todo->name = $this->dao->findById($todo->idvalue)->from(TABLE_BUG)->fetch('title');
+            if($todo->type == 'task') $todo->name = $this->dao->findById($todo->objectID)->from(TABLE_TASK)->fetch('name');
+            if($todo->type == 'bug')  $todo->name = $this->dao->findById($todo->objectID)->from(TABLE_BUG)->fetch('title');
             $todos[$todo->user][] = $todo;
         }
         return $todos;
diff --git a/module/story/control.php b/module/story/control.php
index cded38f8d9..aeec0428bd 100755
--- a/module/story/control.php
+++ b/module/story/control.php
@@ -2099,8 +2099,11 @@ class story extends control
         $user    = $this->loadModel('user')->getById($userID, 'id');
         $stories = $this->story->getUserStoryPairs($user->account, 10, 'story', '', $appendID);
 
-        if($id) return print(html::select("stories[$id]", $stories, '', 'class="form-control"'));
-        echo html::select('story', $stories, '', 'class=form-control');
+        $items = array();
+        foreach($stories as $storyID => $storyTitle) $items[] = array('text' => $storyTitle, 'value' => $storyID);
+
+        $fieldName = $id ? "stories[$id]" : 'story';
+        return print(json_encode(array('name' => $fieldName, 'items' => $items)));
     }
 
     /**
diff --git a/module/task/control.php b/module/task/control.php
index 5bb7791cd7..ad20d25bff 100755
--- a/module/task/control.php
+++ b/module/task/control.php
@@ -953,14 +953,19 @@ class task extends control
 
         $tasks          = $this->task->getUserTaskPairs($account, $status, array(), array($appendID));
         $suspendedTasks = $this->task->getUserSuspendedTasks($account);
-        foreach($tasks as $taskid => $task)
+        $items          = array();
+        foreach($tasks as $taskID => $taskName)
         {
-            if(isset($suspendedTasks[$taskid])) unset($tasks[$taskid]);
+            if(isset($suspendedTasks[$taskID]))
+            {
+                unset($tasks[$taskID]);
+                continue;
+            }
+            $items[] = array('text' => $taskName, 'value' => $taskID);
         }
 
-        $this->view->id = $id;
-        $this->view->tasks = $tasks;
-        $this->display();
+        $fieldName = $id ? "tasks[$id]" : 'task';
+        return print(json_encode(array('name' => $fieldName, 'items' => $items)));
     }
 
     /**
diff --git a/module/task/model.php b/module/task/model.php
index ea3d3cca9c..2b26490f1d 100755
--- a/module/task/model.php
+++ b/module/task/model.php
@@ -2993,7 +2993,7 @@ class taskModel extends model
 
                 /* If the todo comes from a feedback, update the feedback information. */
                 $todo = $this->dao->findByID($todoID)->from(TABLE_TODO)->fetch();
-                if($this->config->edition != 'open' && $todo->type == 'feedback' && $todo->objectID) $this->loadModel('feedback')->updateStatus('todo', $todo->idvalue, 'done');
+                if($this->config->edition != 'open' && $todo->type == 'feedback' && $todo->objectID) $this->loadModel('feedback')->updateStatus('todo', $todo->objectID, 'done');
             }
 
             /* If the task comes from a design, update the task information. */
diff --git a/module/testtask/control.php b/module/testtask/control.php
index d9099ab272..40d1c1a717 100644
--- a/module/testtask/control.php
+++ b/module/testtask/control.php
@@ -1559,8 +1559,11 @@ class testtask extends control
 
         $testTasks = $this->testtask->getUserTestTaskPairs($account, 0, $status);
 
-        if($id) return print(html::select("testtasks[$id]", $testTasks, '', 'class="form-control"'));
-        return print(html::select('testtask', $testTasks, '', 'class="form-control"'));
+        $items = array();
+        foreach($testTasks as $taskID =>  $taskName) $items[] = array('text' => $taskName, 'value' => $taskID);
+
+        $fieldName = $id ? "testtasks[$id]" : 'testtask';
+        return print(json_encode(array('name' => $fieldName, 'items' => $items)));
     }
 
     /**
diff --git a/module/todo/js/common.ui.js b/module/todo/js/common.ui.js
index ef0d0d9621..02ccb488a4 100644
--- a/module/todo/js/common.ui.js
+++ b/module/todo/js/common.ui.js
@@ -1,4 +1,4 @@
-var nameDefaultHtml = $('#nameInputBox').html();
+let nameDefaultHtml = $('#nameInputBox').html();
 
 /**
  * 切换周期类型。
@@ -36,7 +36,11 @@ function toggleCycleConfig(cycleType)
  */
 function togglePrivate(switcher)
 {
-    $('#assignedTo').prop('disabled', switcher.checked);
+    $assignedTo = $("[name='assignedTo']").zui('picker');
+    $assignedTo.options.disabled = false;
+
+    if($(switcher).prop('checked')) $assignedTo.options.disabled = true;
+    $assignedTo.render($assignedTo.options);
 }
 
 /**
@@ -47,7 +51,7 @@ function togglePrivate(switcher)
  */
 function changeAssignedTo()
 {
-    var assignedTo = $('#assignedTo').val();
+    var assignedTo = $('[name=assignedTo]').val();
     if(assignedTo !== userAccount)
     {
         $('#private').prop('disabled', true);
@@ -84,10 +88,10 @@ function togglePending()
  * @param  string type        Type of selected todo.
  * @param  string id          ID of selected todo.
  * @param  string defaultType Default type of selected todo.
- * @param  int    todoID      ID of the closed todo type.
+ * @param  int    objectID    ID of the closed todo type.
  * @return void
  */
-function loadList(type, id, todoDefaultType, todoID)
+function loadList(type, id, todoDefaultType, objectID)
 {
     if(id)
     {
@@ -104,23 +108,17 @@ function loadList(type, id, todoDefaultType, todoID)
     var param = 'userID=' + userID + '&id=' + id;
     if(type == 'task') param += '&status=wait,doing';
 
-    if(todoDefaultType && type == todoDefaultType && todoID != 0) param += '&objectID=' + todoID;
+    if(todoDefaultType && type == todoDefaultType && objectID != 0) param += '&objectID=' + objectID;
 
     if(moduleList.indexOf(type) !== -1)
     {
         link = $.createLink(type, objectsMethod[type], param);
-        $.get(link, function(data, status)
+        $.get(link, function(data)
         {
-            if(data.length != 0)
-            {
-                if($(nameBoxClass).find('#nameInputBox').html(data).find('select').chosen) $(nameBoxClass).find('#nameInputBox').html(data).find('select').chosen();
-                if(config.currentMethod == 'edit' || type == 'feedback') $(nameBoxClass).find('select').val(todoID);
-                if($(nameBoxClass + ' select').val() == null) $(nameBoxClass + ' select').attr('data-placeholder', noOptions);
-            }
-            else
-            {
-                if($(nameBoxClass).find('#nameInputBox').html("<select id="+ type +" class='form-control'></select>").find('select').chosen) $(nameBoxClass).find('#nameInputBox').html("<select id="+ type +" class='form-control'></select>").find('select');
-            }
+            data = JSON.parse(data);
+            data.defaultValue = objectID;
+            $(nameBoxClass).find('#nameInputBox').html("<div class='picker-box' id='" + type + "'></div>");
+            $('#nameInputBox #' + type).picker(data);
         });
     }
     else
@@ -130,7 +128,7 @@ function loadList(type, id, todoDefaultType, todoID)
 
     if(nameBoxLabel) return;
 
-    var formLabel = type == 'custom' ||(vision && vision == 'rnd') ?  nameBoxLabel.custom : nameBoxLabel.objectID;
+    var formLabel = type == 'custom' || (vision && vision == 'rnd') ?  nameBoxLabel.custom : nameBoxLabel.objectID;
     $('#nameBox .form-label').text(formLabel);
 }
 
@@ -273,7 +271,8 @@ function verifyCycleDate(dateInput)
  * @param  object time
  * @return void
  */
-function verifyEndTime(time)
+function verifyEndTime(event)
 {
-    if($(time).val() < $('#begin').val()) $(time).addClass('has-error');
+    let end = $(event.target).zui('picker').$.value;
+    if(end < $('#begin').zui('picker').$.value) $(event.target).closest('.picker-box').addClass('has-error');
 }
diff --git a/module/todo/js/edit.ui.js b/module/todo/js/edit.ui.js
index 484662e606..a8859a206e 100644
--- a/module/todo/js/edit.ui.js
+++ b/module/todo/js/edit.ui.js
@@ -1,4 +1,4 @@
-loadList($('#type').val(), '', defaultType, objectID);
+loadList(defaultType, '', defaultType, objectID);
 
 if(cycleType) toggleCycleConfig(cycleType);
 
@@ -9,7 +9,8 @@ if(cycleType) toggleCycleConfig(cycleType);
  * @param  object typeSelect
  * @return void
  */
-function changeType(typeSelect)
+window.changeType = function(obj)
 {
-    loadList($(typeSelect).find('select').val(), '', defaultType, objectID);
+    type = $(obj).zui('picker').$.value;
+    loadList(type, '', defaultType, objectID);
 }
diff --git a/module/todo/ui/edit.html.php b/module/todo/ui/edit.html.php
index 965b42b5d7..920d89918a 100644
--- a/module/todo/ui/edit.html.php
+++ b/module/todo/ui/edit.html.php
@@ -69,12 +69,12 @@ $buildDateControl = function(object $todo): mixed
                     array(
                         'name'  => 'date',
                         'class' => 'date',
-                        'value' => $todo->date == '2030-01-01' ? '' : $todo->date,
-                        'type'  => 'date',
+                        'value' => $todo->date == FUTURE_TIME ? '' : $todo->date,
+                        'type'  => 'datepicker',
                         'width' => '1/4'
                     )
                 ),
-                on::change('changeDate(this)')
+                on::change('changeDate')
             )
         ),
         formGroup
@@ -89,10 +89,10 @@ $buildDateControl = function(object $todo): mixed
                         'name'    => 'switchDate',
                         'text'    => $lang->todo->periods['future'],
                         'width'   => '100px',
-                        'checked' => $todo->date == '2030-01-01'
+                        'checked' => $todo->date == FUTURE_TIME
                     )
                 ),
-                on::change('togglePending(this)')
+                on::change('togglePending')
             )
         )
     );
@@ -507,45 +507,21 @@ $buildTodoType = function(object $todo)
 
     return formGroup
     (
-        set
-        (
-            array(
-                'label' => $lang->todo->type,
-                'width' => '1/3',
-            )
-        ),
-        select
-        (
-            set
-            (
-                array(
-                    'required' => true,
-                    'name'     => 'type',
-                    'items'    => $lang->todo->typeList,
-                    'value'    => $todo->type
-                )
-            )
-        ),
-        on::change('changeType(this)')
+        set::width('1/3'),
+        set::label($lang->todo->type),
+        picker(set(array('required' => true, 'name' => 'type', 'items' => $lang->todo->typeList, 'value' => $todo->type, 'onchange' => 'changeType(this)'))),
     );
 };
 
 formPanel
 (
     set::title(''),
-    div(
+    div
+    (
         setClass('flex items-center pb-2.5'),
         span($lang->todo->edit),
-        span
-        (
-            setClass('text-lg font-bold ml-3'),
-            $todo->name,
-        ),
-        label
-        (
-            $todo->id,
-            setClass('circle ml-2 label-id px-2')
-        )
+        span(setClass('text-lg font-bold ml-3'), $todo->name),
+        label(setClass('circle ml-2 label-id px-2'), $todo->id),
     ),
     $buildDateControl($todo),
     $buildCycleConfig($todo),
@@ -554,14 +530,8 @@ formPanel
     (
         formGroup
         (
-            set
-            (
-                array(
-                    'width' => '1/3',
-                    'label' => $lang->todo->assignTo
-                )
-            ),
-            select
+            set(array('width' => '1/3', 'label' => $lang->todo->assignTo)),
+            picker
             (
                 set
                 (
@@ -592,7 +562,8 @@ formPanel
                         'checked' => $todo->private
                     )
                 ),
-                on::change('togglePrivate(this)')
+                set::disabled($todo->assignedTo != $app->user->account),
+                on::change('togglePrivate(e.target)')
             ),
             btn
             (
@@ -614,100 +585,47 @@ formPanel
     (
         formGroup
         (
-            set
+            set::width('4/5'),
+            set(array('id' => 'nameBox', 'required' => true, 'label' => (($todo->type == 'custom' || $config->vision == 'rnd') ? $lang->todo->name : $lang->todo->objectID), 'class' => 'name-box')),
+            div
             (
-                array(
-                    'id'       => 'nameBox',
-                    'required' => true,
-                    'label'    => $lang->todo->name,
-                    'class'    => 'name-box'
-                )
-            ),
-            inputGroup
-            (
-                setClass('title-group'),
-                div
-                (
-                    setID('nameInputBox'),
-                    input
-                    (
-                        set
-                        (
-                            array(
-                                'id'    => 'name',
-                                'name'  => 'name',
-                                'value' => $todo->name
-                            )
-                        )
-                    )
-                ),
-                div
-                (
-                    setClass('input-group-addon pl-4 bg-white fix-border br-0'),
-                    $lang->todo->pri
-                ),
-                select
-                (
-                    set
-                    (
-                        array(
-                            'required' => true,
-                            'class'    => 'w-20',
-                            'id'       => 'pri',
-                            'name'     => 'pri',
-                            'items'    => $lang->todo->priList,
-                            'value'    => $todo->pri
-                        )
-                    )
-                )
-            )
-        )
-    ),
-    formGroup
-    (
-        set
-        (
-            array(
-                'name'  => 'desc',
-                'type'  => 'editor',
-                'label' => $lang->todo->desc,
-                'value' => htmlSpecialString($todo->desc)
-            )
-        )
-    ),
-    formGroup
-    (
-        set
-        (
-            array(
-                'width' => '1/3',
-                'label' => $lang->todo->status,
+                setClass('w-full'),
+                setID('nameInputBox'),
+                input(set(array('id' => 'name', 'name' => 'name', 'value' => $todo->name)))
             )
         ),
-        select
+        formGroup
         (
-            set
-            (
-                array(
-                    'required' => true,
-                    'id'       => 'status',
-                    'name'     => 'status',
-                    'items'    => $lang->todo->statusList,
-                    'value'    => $todo->status
-                )
-            )
+            set::width('1/5'),
+            setClass('priBox'),
+            set::label($lang->todo->pri),
+            priPicker(setID('pri'), set::name('pri'), set::items($lang->todo->priList), set::value($todo->pri)),
         )
     ),
+    formGroup
+    (
+        set::label($lang->todo->desc),
+        setID('desc'),
+        set::name('desc'),
+        set::control('editor'),
+        set::value(htmlSpecialString($todo->desc)),
+    ),
+    formGroup
+    (
+        set::width('1/3'),
+        set::label($lang->todo->status),
+        set::control(array('type' => 'picker', 'id' => 'status', 'name' => 'status', 'items' => $lang->todo->statusList, 'value' => $todo->status)),
+    ),
     formRow
     (
         setClass('items-center'),
         formGroup
         (
             set::label($lang->todo->beginAndEnd),
-            set::width('1/3'),
+            set::width('2/3'),
             inputGroup
             (
-                select
+                picker
                 (
                     set
                     (
@@ -720,14 +638,14 @@ formPanel
                             'disabled' => $todo->begin == 2400
                         )
                     ),
-                    on::change('selectNext()')
+                    on::change('selectNext')
                 ),
                 span
                 (
                     setClass('input-group-addon ring-0'),
                     $lang->todo->timespanTo
                 ),
-                select
+                picker
                 (
                     set
                     (
@@ -740,7 +658,7 @@ formPanel
                             'disabled' => $todo->begin == 2400
                         )
                     ),
-                    on::blur('verifyEndTime(this)')
+                    on::change('verifyEndTime')
                 )
             ),
         ),
@@ -758,7 +676,7 @@ formPanel
                         'text'    => $lang->todo->periods['future']
                     )
                 ),
-                on::change('switchDateFeature(this)')
+                on::change('switchDateFeature')
             )
         )
     )
diff --git a/module/todo/zen.php b/module/todo/zen.php
index 740d941356..4447405977 100755
--- a/module/todo/zen.php
+++ b/module/todo/zen.php
@@ -259,8 +259,8 @@ class todoZen extends todo
             ->setIF(in_array($objectType, array('bug', 'task', 'story')), 'name', '')
             ->setIF($hasObject && $objectType,  'objectID', $objectID)
             ->setIF(empty($postData->date), 'date', '2030-01-01')
-            ->setIF(empty($postData->begin), 'begin', '2400')
-            ->setIF(empty($postData->end), 'end', '2400')
+            ->setIF(empty($postData->begin) || $this->post->dateSwitcher, 'begin', '2400')
+            ->setIF(empty($postData->end) || $this->post->dateSwitcher, 'end', '2400')
             ->setDefault('type', $objectType)
             ->setDefault('private', 0)
             ->stripTags($this->config->todo->editor->edit['id'], $this->config->allowedTags)