Allow datetime inputs to be optional

Summary:
Fixes T3279. For ApplicationSearch (and in some other cases) I'd like users to be able to provide an optional date. This isn't currently possible.

Add a checkbox which disables or enables the input.

Test Plan: Used UIExample to enter dates. Used Calendar to enter dates.

Reviewers: chad, btrahan

Reviewed By: chad

CC: aran

Maniphest Tasks: T3279

Differential Revision: https://secure.phabricator.com/D6082

src/__celerity_resource_map__.php

@@ -800,7 +800,7 @@ celerity_register_resource_map(array(
   ),
   'aphront-form-view-css' =>
   array(
-    'uri' => '/res/656ca1a3/rsrc/css/aphront/form-view.css',
+    'uri' => '/res/4fe4c174/rsrc/css/aphront/form-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -1641,7 +1641,7 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-fancy-datepicker' =>
   array(
-    'uri' => '/res/f5c13e07/rsrc/js/core/behavior-fancy-datepicker.js',
+    'uri' => '/res/dcd7c2ca/rsrc/js/core/behavior-fancy-datepicker.js',
     'type' => 'js',
     'requires' =>
     array(
@@ -3657,7 +3657,7 @@ celerity_register_resource_map(array(
   ),
   'phui-form-css' =>
   array(
-    'uri' => '/res/ba4d7995/rsrc/css/phui/phui-form.css',
+    'uri' => '/res/eb478e83/rsrc/css/phui/phui-form.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3973,7 +3973,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    'b7428f7c' =>
+    '1b14560c' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -4022,7 +4022,7 @@ celerity_register_resource_map(array(
         41 => 'phabricator-property-list-view-css',
         42 => 'phabricator-tag-view-css',
       ),
-      'uri' => '/res/pkg/b7428f7c/core.pkg.css',
+      'uri' => '/res/pkg/1b14560c/core.pkg.css',
       'type' => 'css',
     ),
     '98f60e3f' =>
@@ -4216,16 +4216,16 @@ celerity_register_resource_map(array(
   'reverse' =>
   array(
     'aphront-attached-file-view-css' => '6b1fccc6',
-    'aphront-dialog-view-css' => 'b7428f7c',
-    'aphront-error-view-css' => 'b7428f7c',
-    'aphront-form-view-css' => 'b7428f7c',
-    'aphront-list-filter-view-css' => 'b7428f7c',
-    'aphront-pager-view-css' => 'b7428f7c',
-    'aphront-panel-view-css' => 'b7428f7c',
-    'aphront-table-view-css' => 'b7428f7c',
-    'aphront-tokenizer-control-css' => 'b7428f7c',
-    'aphront-tooltip-css' => 'b7428f7c',
-    'aphront-typeahead-control-css' => 'b7428f7c',
+    'aphront-dialog-view-css' => '1b14560c',
+    'aphront-error-view-css' => '1b14560c',
+    'aphront-form-view-css' => '1b14560c',
+    'aphront-list-filter-view-css' => '1b14560c',
+    'aphront-pager-view-css' => '1b14560c',
+    'aphront-panel-view-css' => '1b14560c',
+    'aphront-table-view-css' => '1b14560c',
+    'aphront-tokenizer-control-css' => '1b14560c',
+    'aphront-tooltip-css' => '1b14560c',
+    'aphront-typeahead-control-css' => '1b14560c',
     'differential-changeset-view-css' => 'dd27a69b',
     'differential-core-view-css' => 'dd27a69b',
     'differential-inline-comment-editor' => '9488bb69',
@@ -4239,7 +4239,7 @@ celerity_register_resource_map(array(
     'differential-table-of-contents-css' => 'dd27a69b',
     'diffusion-commit-view-css' => 'c8ce2d88',
     'diffusion-icons-css' => 'c8ce2d88',
-    'global-drag-and-drop-css' => 'b7428f7c',
+    'global-drag-and-drop-css' => '1b14560c',
     'inline-comment-summary-css' => 'dd27a69b',
     'javelin-aphlict' => '98f60e3f',
     'javelin-behavior' => 'c1359b5d',
@@ -4313,56 +4313,56 @@ celerity_register_resource_map(array(
     'javelin-util' => 'c1359b5d',
     'javelin-vector' => 'c1359b5d',
     'javelin-workflow' => 'c1359b5d',
-    'lightbox-attachment-css' => 'b7428f7c',
+    'lightbox-attachment-css' => '1b14560c',
     'maniphest-task-summary-css' => '6b1fccc6',
     'maniphest-transaction-detail-css' => '6b1fccc6',
-    'phabricator-action-list-view-css' => 'b7428f7c',
-    'phabricator-application-launch-view-css' => 'b7428f7c',
+    'phabricator-action-list-view-css' => '1b14560c',
+    'phabricator-application-launch-view-css' => '1b14560c',
     'phabricator-busy' => '98f60e3f',
     'phabricator-content-source-view-css' => 'dd27a69b',
-    'phabricator-core-buttons-css' => 'b7428f7c',
-    'phabricator-core-css' => 'b7428f7c',
-    'phabricator-crumbs-view-css' => 'b7428f7c',
-    'phabricator-directory-css' => 'b7428f7c',
+    'phabricator-core-buttons-css' => '1b14560c',
+    'phabricator-core-css' => '1b14560c',
+    'phabricator-crumbs-view-css' => '1b14560c',
+    'phabricator-directory-css' => '1b14560c',
     'phabricator-drag-and-drop-file-upload' => '9488bb69',
     'phabricator-dropdown-menu' => '98f60e3f',
     'phabricator-file-upload' => '98f60e3f',
-    'phabricator-filetree-view-css' => 'b7428f7c',
-    'phabricator-flag-css' => 'b7428f7c',
-    'phabricator-form-view-css' => 'b7428f7c',
-    'phabricator-header-view-css' => 'b7428f7c',
+    'phabricator-filetree-view-css' => '1b14560c',
+    'phabricator-flag-css' => '1b14560c',
+    'phabricator-form-view-css' => '1b14560c',
+    'phabricator-header-view-css' => '1b14560c',
     'phabricator-hovercard' => '98f60e3f',
-    'phabricator-jump-nav' => 'b7428f7c',
+    'phabricator-jump-nav' => '1b14560c',
     'phabricator-keyboard-shortcut' => '98f60e3f',
     'phabricator-keyboard-shortcut-manager' => '98f60e3f',
-    'phabricator-main-menu-view' => 'b7428f7c',
+    'phabricator-main-menu-view' => '1b14560c',
     'phabricator-menu-item' => '98f60e3f',
-    'phabricator-nav-view-css' => 'b7428f7c',
+    'phabricator-nav-view-css' => '1b14560c',
     'phabricator-notification' => '98f60e3f',
-    'phabricator-notification-css' => 'b7428f7c',
-    'phabricator-notification-menu-css' => 'b7428f7c',
-    'phabricator-object-item-list-view-css' => 'b7428f7c',
+    'phabricator-notification-css' => '1b14560c',
+    'phabricator-notification-menu-css' => '1b14560c',
+    'phabricator-object-item-list-view-css' => '1b14560c',
     'phabricator-object-selector-css' => 'dd27a69b',
     'phabricator-phtize' => '98f60e3f',
     'phabricator-prefab' => '98f60e3f',
     'phabricator-project-tag-css' => '6b1fccc6',
-    'phabricator-property-list-view-css' => 'b7428f7c',
-    'phabricator-remarkup-css' => 'b7428f7c',
+    'phabricator-property-list-view-css' => '1b14560c',
+    'phabricator-remarkup-css' => '1b14560c',
     'phabricator-shaped-request' => '9488bb69',
-    'phabricator-side-menu-view-css' => 'b7428f7c',
-    'phabricator-standard-page-view' => 'b7428f7c',
-    'phabricator-tag-view-css' => 'b7428f7c',
+    'phabricator-side-menu-view-css' => '1b14560c',
+    'phabricator-standard-page-view' => '1b14560c',
+    'phabricator-tag-view-css' => '1b14560c',
     'phabricator-textareautils' => '98f60e3f',
     'phabricator-tooltip' => '98f60e3f',
-    'phabricator-transaction-view-css' => 'b7428f7c',
-    'phabricator-zindex-css' => 'b7428f7c',
-    'phui-form-css' => 'b7428f7c',
-    'phui-icon-view-css' => 'b7428f7c',
-    'spacing-css' => 'b7428f7c',
-    'sprite-apps-large-css' => 'b7428f7c',
-    'sprite-gradient-css' => 'b7428f7c',
-    'sprite-icons-css' => 'b7428f7c',
-    'sprite-menu-css' => 'b7428f7c',
-    'syntax-highlighting-css' => 'b7428f7c',
+    'phabricator-transaction-view-css' => '1b14560c',
+    'phabricator-zindex-css' => '1b14560c',
+    'phui-form-css' => '1b14560c',
+    'phui-icon-view-css' => '1b14560c',
+    'spacing-css' => '1b14560c',
+    'sprite-apps-large-css' => '1b14560c',
+    'sprite-gradient-css' => '1b14560c',
+    'sprite-icons-css' => '1b14560c',
+    'sprite-menu-css' => '1b14560c',
+    'syntax-highlighting-css' => '1b14560c',
   ),
 ));

src/applications/uiexample/examples/PhabricatorFormExample.php

@@ -19,20 +19,31 @@ final class PhabricatorFormExample extends PhabricatorUIExample {
       ->setName('start')
       ->setLabel('Start')
       ->setInitialTime(AphrontFormDateControl::TIME_START_OF_BUSINESS);
-    $start_value = $start_time->readValueFromRequest($request);
 
     $end_time = id(new AphrontFormDateControl())
       ->setUser($user)
       ->setName('end')
       ->setLabel('End')
       ->setInitialTime(AphrontFormDateControl::TIME_END_OF_BUSINESS);
+
+    $null_time = id(new AphrontFormDateControl())
+      ->setUser($user)
+      ->setName('nulltime')
+      ->setLabel('Nullable')
+      ->setAllowNull(true);
+
+    if ($request->isFormPost()) {
+      $start_value = $start_time->readValueFromRequest($request);
       $end_value = $end_time->readValueFromRequest($request);
+      $null_value = $null_time->readValueFromRequest($request);
+    }
 
     $form = id(new AphrontFormView())
       ->setUser($user)
       ->setFlexible(true)
       ->appendChild($start_time)
       ->appendChild($end_time)
+      ->appendChild($null_time)
       ->appendChild(
         id(new AphrontFormSubmitControl())
           ->setValue('Submit'));

src/view/form/control/AphrontFormDateControl.php

@@ -3,11 +3,18 @@
 final class AphrontFormDateControl extends AphrontFormControl {
 
   private $initialTime;
+  private $zone;
 
   private $valueDay;
   private $valueMonth;
   private $valueYear;
   private $valueTime;
+  private $allowNull;
+
+  public function setAllowNull($allow_null) {
+    $this->allowNull = $allow_null;
+    return $this;
+  }
 
   const TIME_START_OF_DAY         = 'start-of-day';
   const TIME_END_OF_DAY           = 'end-of-day';
@@ -20,19 +27,17 @@ final class AphrontFormDateControl extends AphrontFormControl {
   }
 
   public function readValueFromRequest(AphrontRequest $request) {
-    $user = $this->user;
-    if (!$this->user) {
-      throw new Exception(
-        pht("Call setUser() before readValueFromRequest()!"));
-    }
-
-    $user_zone = $user->getTimezoneIdentifier();
-    $zone = new DateTimeZone($user_zone);
-
     $day = $request->getInt($this->getDayInputName());
     $month = $request->getInt($this->getMonthInputName());
     $year = $request->getInt($this->getYearInputName());
     $time = $request->getStr($this->getTimeInputName());
+    $enabled = $request->getBool($this->getCheckboxInputName());
+
+    if ($this->allowNull && !$enabled) {
+      $this->setError(null);
+      $this->setValue(null);
+      return;
+    }
 
     $err = $this->getError();
 
@@ -45,6 +50,8 @@ final class AphrontFormDateControl extends AphrontFormControl {
       // Assume invalid.
       $err = 'Invalid';
 
+      $zone = $this->getTimezone();
+
       try {
         $date = new DateTime("{$year}-{$month}-{$day} {$time}", $zone);
         $value = $date->format('U');
@@ -59,32 +66,7 @@ final class AphrontFormDateControl extends AphrontFormControl {
         $this->setValue(null);
       }
     } else {
-      // TODO: We could eventually allow these to be customized per install or
-      // per user or both, but let's wait and see.
-      switch ($this->initialTime) {
-        case self::TIME_START_OF_DAY:
-        default:
-          $time = '12:00 AM';
-          break;
-        case self::TIME_START_OF_BUSINESS:
-          $time = '9:00 AM';
-          break;
-        case self::TIME_END_OF_BUSINESS:
-          $time = '5:00 PM';
-          break;
-        case self::TIME_END_OF_DAY:
-          $time = '11:59 PM';
-          break;
-      }
-
-      $today = $this->formatTime(time(), 'Y-m-d');
-      try {
-        $date = new DateTime("{$today} {$time}", $zone);
-        $value = $date->format('U');
-      } catch (Exception $ex) {
-        $value = null;
-      }
-
+      $value = $this->getInitialValue();
       if ($value) {
         $this->setValue($value);
       } else {
@@ -176,7 +158,20 @@ final class AphrontFormDateControl extends AphrontFormControl {
     return $this->getName().'_t';
   }
 
+  private function getCheckboxInputName() {
+    return $this->getName().'_e';
+  }
+
   protected function renderInput() {
+
+    $disabled = null;
+    if ($this->getValue() === null) {
+      $this->setValue($this->getInitialValue());
+      if ($this->allowNull) {
+        $disabled = 'disabled';
+      }
+    }
+
     $min_year = $this->getMinYear();
     $max_year = $this->getMaxYear();
 
@@ -198,6 +193,20 @@ final class AphrontFormDateControl extends AphrontFormControl {
       12 => pht('Dec'),
     );
 
+    $checkbox = null;
+    if ($this->allowNull) {
+      $checkbox = javelin_tag(
+        'input',
+        array(
+          'type' => 'checkbox',
+          'name' => $this->getCheckboxInputName(),
+          'sigil' => 'calendar-enable',
+          'class' => 'aphront-form-date-enabled-input',
+          'value' => 1,
+          'checked' => ($disabled === null ? 'checked' : null),
+        ));
+    }
+
     $years = range($this->getMinYear(), $this->getMaxYear());
     $years = array_fuse($years);
 
@@ -207,6 +216,7 @@ final class AphrontFormDateControl extends AphrontFormControl {
       array(
         'name' => $this->getDayInputName(),
         'sigil' => 'day-input',
+        'disabled' => $disabled,
       ));
 
     $months_sel = AphrontFormSelectControl::renderSelectTag(
@@ -215,6 +225,7 @@ final class AphrontFormDateControl extends AphrontFormControl {
       array(
         'name' => $this->getMonthInputName(),
         'sigil' => 'month-input',
+        'disabled' => $disabled,
       ));
 
     $years_sel = AphrontFormSelectControl::renderSelectTag(
@@ -223,6 +234,7 @@ final class AphrontFormDateControl extends AphrontFormControl {
       array(
         'name'  => $this->getYearInputName(),
         'sigil' => 'year-input',
+        'disabled' => $disabled,
       ));
 
     $cal_icon = javelin_tag(
@@ -234,7 +246,7 @@ final class AphrontFormDateControl extends AphrontFormControl {
       ),
       '');
 
-    $time_sel = phutil_tag(
+    $time_sel = javelin_tag(
       'input',
       array(
         'name'  => $this->getTimeInputName(),
@@ -242,6 +254,7 @@ final class AphrontFormDateControl extends AphrontFormControl {
         'value' => $this->getTimeInputValue(),
         'type'  => 'text',
         'class' => 'aphront-form-date-time-input',
+        'disabled' => $disabled,
       ),
       '');
 
@@ -252,8 +265,12 @@ final class AphrontFormDateControl extends AphrontFormControl {
       array(
         'class' => 'aphront-form-date-container',
         'sigil' => 'phabricator-date-control',
+        'meta'  => array(
+          'disabled' => (bool)$disabled,
+        ),
       ),
       array(
+        $checkbox,
         $days_sel,
         $months_sel,
         $years_sel,
@@ -262,4 +279,51 @@ final class AphrontFormDateControl extends AphrontFormControl {
       ));
   }
 
+  private function getTimezone() {
+    if ($this->zone) {
+      return $this->zone;
+    }
+
+    $user = $this->getUser();
+    if (!$this->getUser()) {
+      throw new Exception("Call setUser() before getTimezone()!");
+    }
+
+    $user_zone = $user->getTimezoneIdentifier();
+    $this->zone = new DateTimeZone($user_zone);
+    return $this->zone;
+  }
+
+  private function getInitialValue() {
+    $zone = $this->getTimezone();
+
+    // TODO: We could eventually allow these to be customized per install or
+    // per user or both, but let's wait and see.
+    switch ($this->initialTime) {
+      case self::TIME_START_OF_DAY:
+      default:
+        $time = '12:00 AM';
+        break;
+      case self::TIME_START_OF_BUSINESS:
+        $time = '9:00 AM';
+        break;
+      case self::TIME_END_OF_BUSINESS:
+        $time = '5:00 PM';
+        break;
+      case self::TIME_END_OF_DAY:
+        $time = '11:59 PM';
+        break;
+    }
+
+    $today = $this->formatTime(time(), 'Y-m-d');
+    try {
+      $date = new DateTime("{$today} {$time}", $zone);
+      $value = $date->format('U');
+    } catch (Exception $ex) {
+      $value = null;
+    }
+
+    return $value;
+  }
+
 }

webroot/rsrc/css/aphront/form-view.css

@@ -278,6 +278,12 @@ table.aphront-form-control-checkbox-layout th {
   margin: 2px;
   display: inline;
 }
+.aphront-form-date-container input.aphront-form-date-enabled-input {
+  width: auto;
+  display: inline;
+  margin-right: 8px;
+  font-size: 16px;
+}
 
 .aphront-form-date-container input.aphront-form-date-time-input {
   width: 7em;

webroot/rsrc/css/phui/phui-form.css

@@ -127,3 +127,8 @@ input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
   color: #999999;
 }
+
+
+select[disabled="disabled"] {
+  opacity: 0.5;
+}

webroot/rsrc/js/core/behavior-fancy-datepicker.js

@@ -70,11 +70,19 @@ JX.behavior('fancy-datepicker', function(config) {
     root = null;
   };
 
+  var ontoggle = function(e) {
+    var box = e.getTarget();
+    root = e.getNode('phabricator-date-control');
+    JX.Stratcom.getData(root).disabled = !box.checked;
+    redraw_inputs();
+  };
+
   var get_inputs = function() {
     return {
       y: JX.DOM.find(root, 'select', 'year-input'),
       m: JX.DOM.find(root, 'select', 'month-input'),
-      d: JX.DOM.find(root, 'select', 'day-input')
+      d: JX.DOM.find(root, 'select', 'day-input'),
+      t: JX.DOM.find(root, 'input', 'time-input')
     };
   };
 
@@ -101,6 +109,23 @@ JX.behavior('fancy-datepicker', function(config) {
       ]);
   };
 
+  var redraw_inputs = function() {
+    var inputs = get_inputs();
+    var disabled = JX.Stratcom.getData(root).disabled;
+    for (var k in inputs) {
+      if (disabled) {
+        inputs[k].setAttribute('disabled', 'disabled');
+      } else {
+        inputs[k].removeAttribute('disabled');
+      }
+    }
+
+    var box = JX.DOM.scry(root, 'input', 'calendar-enable');
+    if (box.length) {
+      box[0].checked = !disabled;
+    }
+  };
+
   // Render a cell for the date picker.
   var cell = function(label, value, selected, class_name) {
 
@@ -201,6 +226,7 @@ JX.behavior('fancy-datepicker', function(config) {
 
 
   JX.Stratcom.listen('click', 'calendar-button', onopen);
+  JX.Stratcom.listen('change', 'calendar-enable', ontoggle);
 
   JX.Stratcom.listen(
     'click',
@@ -237,6 +263,10 @@ JX.behavior('fancy-datepicker', function(config) {
           break;
       }
 
+      // Enable the control.
+      JX.Stratcom.getData(root).disabled = false;
+      redraw_inputs();
+
       render();
     });