Bug 92174, add date and time picker widgets to toolkit, r=neil,mano

themes/classic/global/mac/datetimepicker.css

@@ -0,0 +1,160 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Initial Developer of the Original Code is the Mozilla Corporation
+ * Portions created by the Initial Developer are Copyright (C) 2006
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Neil Deakin (enndeakin@sympatico.ca)
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+/* ===== datetimepicker.css =============================================
+  == Styles used by the XUL datepicker and timepicker elements.
+  ======================================================================= */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+datepicker, timepicker {
+  padding: 0 0 1px;
+  margin: 4px;
+  border: none;
+}
+
+.datetimepicker-input-box {
+  -moz-appearance: textfield;
+  cursor: text;
+  margin-right: 4px;
+  margin-bottom: 2px;
+  border: 3px solid;
+  -moz-border-top-colors: transparent #888888 #000000;
+  -moz-border-right-colors: transparent #FFFFFF #000000;
+  -moz-border-bottom-colors: transparent #FFFFFF #000000;
+  -moz-border-left-colors: transparent #888888 #000000;
+  -moz-border-radius-topright: 2px;
+  -moz-border-radius-bottomleft: 2px;
+  padding: 0px;
+  background-color: -moz-Field;
+  color: -moz-FieldText;
+}
+
+.datetimepicker-input-subbox {
+  width: 1.6em;
+}
+
+html|*.datetimepicker-input {
+  text-align: right;
+}
+
+.datetimepicker-separator {
+  margin: 0 !important;
+}
+
+.datetimepicker-year {
+  width: 3.2em;
+}
+
+.datepicker-dropmarker {
+  margin-bottom: 2px;
+}
+
+datepicker[readonly="true"],
+timepicker[readonly="true"] {
+  background-color: -moz-Dialog;
+  color: -moz-DialogText;
+}
+
+datepicker[disabled="true"],
+timepicker[disabled="true"] {
+  cursor: default;
+  -moz-border-top-colors: transparent ThreeDShadow -moz-Dialog;
+  -moz-border-right-colors: transparent ThreeDShadow -moz-Dialog;
+  -moz-border-bottom-colors: transparent ThreeDShadow -moz-Dialog;
+  -moz-border-left-colors: transparent ThreeDShadow -moz-Dialog;
+  background-color: -moz-Dialog;
+  color: GrayText;
+} 
+
+.datepicker-mainbox {
+  margin: 2px 4px;
+  border: 2px solid;
+  -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow;
+  -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow;
+  -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow;
+  -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow;
+  background-color: #EEEEEE;
+  color: -moz-DialogText;
+}
+
+.datepicker-popupgrid > .datepicker-mainbox {
+  margin: 0;
+  border: none;
+}
+
+.datepicker-gridlabel, .datepicker-weeklabel {
+  text-align: center;
+}
+
+.datepicker-gridlabel[today="true"] {
+  background-color: darkgrey;
+  color: white;
+}
+
+.datepicker-gridlabel[selected="true"] {
+  background-color: Highlight;
+  color: HighlightText;
+}
+
+.datepicker-button {
+  -moz-appearance: none;
+  min-width: 8px;
+  padding: 0px;
+}
+
+.datepicker-previous {
+  list-style-image: url("chrome://global/skin/arrow/arrow-lft.gif");
+}
+
+.datepicker-next {
+  list-style-image: url("chrome://global/skin/arrow/arrow-rit.gif");
+}
+
+.datepicker-previous:hover {
+  list-style-image: url("chrome://global/skin/arrow/arrow-lft-hov.gif");
+}
+
+.datepicker-next:hover {
+  list-style-image: url("chrome://global/skin/arrow/arrow-rit-hov.gif");
+}
+
+.datepicker-previous[disabled="true"] {
+  list-style-image: url("chrome://global/skin/arrow/arrow-lft-dis.gif");
+}
+
+.datepicker-next[disabled="true"] {
+  list-style-image: url("chrome://global/skin/arrow/arrow-rit-dis.gif");
+}

themes/classic/global/win/datetimepicker.css

@@ -0,0 +1,151 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Initial Developer of the Original Code is the Mozilla Corporation
+ * Portions created by the Initial Developer are Copyright (C) 2006
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Neil Deakin (enndeakin@sympatico.ca)
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+/* ===== datetimepicker.css =============================================
+  == Styles used by the XUL datepicker and timepicker elements.
+  ======================================================================= */
+  
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+datepicker, timepicker {
+  margin: 2px 4px;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: default;
+}
+
+.datetimepicker-input-box {
+  -moz-appearance: textfield;
+  cursor: text;
+  margin-right: 2px;
+  border: 2px solid;
+  -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow;
+  -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow;
+  -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow;
+  -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow;
+  padding: 2px 2px 3px 4px;
+  background-color: -moz-Field;
+  color: -moz-FieldText;
+}
+
+.datetimepicker-input-subbox {
+  width: 1.6em;
+}
+
+html|*.datetimepicker-input {
+  text-align: right;
+}
+
+.datetimepicker-separator {
+  margin: 0 !important;
+}
+
+.datetimepicker-year {
+  width: 3.2em;
+}
+
+datepicker[readonly="true"],
+timepicker[readonly="true"] {
+  background-color: -moz-Dialog;
+  color: -moz-DialogText;
+}
+
+datepicker[disabled="true"],
+timepicker[disabled="true"] {
+  cursor: default;
+  background-color: -moz-Dialog;
+  color: GrayText;
+} 
+
+.datepicker-mainbox {
+  margin: 2px 4px;
+  border: 2px solid;
+  -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow;
+  -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow;
+  -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow;
+  -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow;
+  background-color: -moz-Field;
+  color: -moz-FieldText;
+}
+
+.datepicker-popupgrid > .datepicker-mainbox {
+  margin: 0;
+  border: none;
+}
+
+.datepicker-gridlabel, .datepicker-weeklabel {
+  text-align: center;
+}
+
+.datepicker-gridlabel[today="true"] {
+  background-color: darkgrey;
+  color: white;
+}
+
+.datepicker-gridlabel[selected="true"] {
+  background-color: Highlight;
+  color: HighlightText;
+}
+
+.datepicker-button {
+  -moz-appearance: none;
+  min-width: 8px;
+  padding: 0px;
+}
+
+.datepicker-previous {
+  list-style-image: url("chrome://global/skin/arrow/arrow-lft.gif");
+}
+
+.datepicker-next {
+  list-style-image: url("chrome://global/skin/arrow/arrow-rit.gif");
+}
+
+.datepicker-previous:hover {
+  list-style-image: url("chrome://global/skin/arrow/arrow-lft-hov.gif");
+}
+
+.datepicker-next:hover {
+  list-style-image: url("chrome://global/skin/arrow/arrow-rit-hov.gif");
+}
+
+.datepicker-previous[disabled="true"] {
+  list-style-image: url("chrome://global/skin/arrow/arrow-lft-dis.gif");
+}
+
+.datepicker-next[disabled="true"] {
+  list-style-image: url("chrome://global/skin/arrow/arrow-rit-dis.gif");
+}

themes/classic/jar.mn

@@ -143,6 +143,7 @@ classic.jar:
   skin/classic/global/checkbox.css                              (global/mac/checkbox.css)
   skin/classic/global/colorpicker.css                           (global/mac/colorpicker.css)
   skin/classic/global/autocomplete.css                          (global/mac/autocomplete.css)
+  skin/classic/global/datetimepicker.css                        (global/mac/datetimepicker.css)
   skin/classic/global/dialog.css                                (global/mac/dialog.css)
   skin/classic/global/dropmarker.css                            (global/mac/dropmarker.css)
   skin/classic/global/filepicker.css                            (global/mac/filepicker.css)
@@ -261,6 +262,7 @@ classic.jar:
   skin/classic/global/browser.css                             (global/win/browser.css)
   skin/classic/global/colorpicker.css                         (global/win/colorpicker.css)
   skin/classic/global/console.css                             (global/win/console.css)
+  skin/classic/global/datetimepicker.css                      (global/win/datetimepicker.css)
   skin/classic/global/dialog.css                              (global/win/dialog.css)
   skin/classic/global/dropmarker.css                          (global/win/dropmarker.css)
   skin/classic/global/filepicker.css                          (global/win/filepicker.css)

themes/modern/global/datetimepicker.css

@@ -0,0 +1,124 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Initial Developer of the Original Code is the Mozilla Corporation
+ * Portions created by the Initial Developer are Copyright (C) 2006
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Neil Deakin (enndeakin@sympatico.ca)
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+/* ===== datetimepicker.css =============================================
+  == Styles used by the XUL datepicker and timepicker elements.
+  ======================================================================= */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+datepicker, timepicker {
+  margin: 2px 4px;
+  font: inherit;
+  cursor: default;
+}
+
+.datetimepicker-input-box {
+  border: 2px solid;
+  -moz-border-top-colors: #BEC3D3 #5D616E;
+  -moz-border-right-colors: #F8FAFE #5D616E;
+  -moz-border-bottom-colors: #F8FAFE #5D616E;
+  -moz-border-left-colors: #BEC3D3 #5D616E;
+  padding: 1px;
+  background-color: #FFFFFF;
+  color: #000000;
+}
+
+html|*.datetimepicker-input {
+  text-align: right;
+  width: 1.6em;
+  padding: 0;
+  margin: 0;
+}
+
+.datetimepicker-separator {
+  margin: 0 !important;
+}
+
+.datetimepicker-year {
+  width: 3.2em;
+}
+
+datepicker[readonly="true"],
+timepicker[readonly="true"] {
+  background-color: #C7D0D9;
+}
+
+datepicker[disabled="true"],
+timepicker[disabled="true"] {
+  background-color: #C7D0D9;
+  color: #999999;
+  cursor: default !important;
+} 
+
+.datepicker-gridlabel, .datepicker-weeklabel {
+  margin: 0;
+  text-align: center;
+}
+
+.datepicker-gridlabel[today="true"] {
+  background-color: darkgrey;
+  color: white;
+}
+
+.datepicker-gridlabel[selected="true"] {
+  background-color: #424F63;
+  color: #000000;
+}
+
+.datepicker-button {
+  min-width: 4px;
+  padding: 0px;
+}
+
+.datepicker-button .button-text {
+  visibility: collapse;
+}
+
+.datepicker-previous {
+  list-style-image: url("chrome://global/skin/arrow/arrow-lft.gif");
+}
+
+.datepicker-next {
+  list-style-image: url("chrome://global/skin/arrow/arrow-rit.gif");
+}
+
+.datepicker-previous[disabled="true"] {
+  list-style-image: url("chrome://global/skin/arrow/arrow-lft-dis.gif");
+}
+
+.datepicker-next[disabled="true"] {
+  list-style-image: url("chrome://global/skin/arrow/arrow-rit-dis.gif");
+}

themes/modern/jar.mn

@@ -159,6 +159,7 @@ modern.jar:
   skin/modern/global/colorpicker.css                               (global/colorpicker.css)
   skin/modern/global/config.css                                    (global/config.css)
   skin/modern/global/console.css                                   (global/console.css)
+  skin/modern/global/datetimepicker.css                            (global/datetimepicker.css)
   skin/modern/global/dropmarker.css                                (global/dropmarker.css)
   skin/modern/global/filepicker.css                                (global/filepicker.css)
   skin/modern/global/findBar.css                                   (/toolkit/themes/winstripe/global/findBar.css)

toolkit/content/jar.mn

@@ -41,6 +41,7 @@ toolkit.jar:
 *+ content/global/bindings/button.xml          (widgets/button.xml)
 *+ content/global/bindings/checkbox.xml        (widgets/checkbox.xml)
 *+ content/global/bindings/colorpicker.xml     (widgets/colorpicker.xml)
+*+ content/global/bindings/datetimepicker.xml  (widgets/datetimepicker.xml)
 *+ content/global/bindings/dialog.xml          (widgets/dialog.xml)
 *+ content/global/bindings/editor.xml          (widgets/editor.xml)
 *  content/global/bindings/expander.xml        (widgets/expander.xml)

toolkit/content/xul.css

@@ -73,6 +73,7 @@ treechildren, treeitem, treeseparator, treerow, treecell {
 button,
 checkbox,
 colorpicker[type="button"],
+datepicker[type="grid"],
 menulist,
 radiogroup,
 tree,
@@ -1101,6 +1102,24 @@ richlistitem {
   -moz-binding: url('chrome://global/content/bindings/richlistbox.xml#richlistitem');
 }
 
+/********** datepicker and timepicker ********/
+
+datepicker {
+  -moz-binding: url('chrome://global/content/bindings/datetimepicker.xml#datepicker');
+}
+
+datepicker[type="popup"] {
+  -moz-binding: url('chrome://global/content/bindings/datetimepicker.xml#datepicker-popup');
+}
+
+datepicker[type="grid"] {
+  -moz-binding: url('chrome://global/content/bindings/datetimepicker.xml#datepicker-grid');
+}
+
+timepicker {
+  -moz-binding: url('chrome://global/content/bindings/datetimepicker.xml#timepicker');
+}
+
 
 /*********** findbar ************/
 findbar {

toolkit/locales/en-US/chrome/global/datetimepicker.dtd

@@ -0,0 +1,3 @@
+<!-- first day of week to display in datepicker, a value from 0 to 6,
+     0 = Sunday, 1 = Monday, etc. -->
+<!ENTITY firstdayofweek.default "0">

toolkit/locales/jar.mn

@@ -15,6 +15,7 @@
 * locale/@AB_CD@/global/customizeCharset.dtd            (%chrome/global/customizeCharset.dtd)
 + locale/@AB_CD@/global/customizeToolbar.dtd            (%chrome/global/customizeToolbar.dtd)
 + locale/@AB_CD@/global/customizeToolbar.properties     (%chrome/global/customizeToolbar.properties)
++ locale/@AB_CD@/global/datetimepicker.dtd              (%chrome/global/datetimepicker.dtd)
 * locale/@AB_CD@/global/dialogOverlay.dtd               (%chrome/global/dialogOverlay.dtd)
   locale/@AB_CD@/global/downloadProgress.properties     (%chrome/global/downloadProgress.properties)
 + locale/@AB_CD@/global/editMenuOverlay.dtd             (%chrome/global/editMenuOverlay.dtd)

toolkit/themes/pinstripe/global/datetimepicker.css

@@ -0,0 +1,164 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Initial Developer of the Original Code is the Mozilla Corporation
+ * Portions created by the Initial Developer are Copyright (C) 2006
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Neil Deakin (enndeakin@sympatico.ca)
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+/* ===== datetimepicker.css =============================================
+  == Styles used by the XUL datepicker and timepicker elements.
+  ======================================================================= */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+datepicker, timepicker {
+  padding: 0 0 1px;
+  margin: 4px;
+  border: none;
+}
+
+.datetimepicker-input-box {
+  -moz-appearance: textfield;
+  cursor: text;
+  margin-right: 4px;
+  margin-bottom: 2px;
+  border: 3px solid;
+  -moz-border-top-colors: transparent #888888 #000000;
+  -moz-border-right-colors: transparent #FFFFFF #000000;
+  -moz-border-bottom-colors: transparent #FFFFFF #000000;
+  -moz-border-left-colors: transparent #888888 #000000;
+  -moz-border-radius-topright: 2px;
+  -moz-border-radius-bottomleft: 2px;
+  padding: 0px;
+  background-color: -moz-Field;
+  color: -moz-FieldText;
+}
+
+.datetimepicker-input-subbox {
+  width: 1.6em;
+}
+
+html|*.datetimepicker-input {
+  text-align: right;
+}
+
+html|*.datetimepicker-input[chromedir="rtl"] {
+  text-align: left;
+}
+
+.datetimepicker-separator {
+  margin: 0 !important;
+}
+
+.datetimepicker-year {
+  width: 3.2em;
+}
+
+.datepicker-dropmarker {
+  margin-bottom: 2px;
+}
+
+datepicker[readonly="true"],
+timepicker[readonly="true"] {
+  background-color: -moz-Dialog;
+  color: -moz-DialogText;
+}
+
+datepicker[disabled="true"],
+timepicker[disabled="true"] {
+  cursor: default;
+  -moz-border-top-colors: transparent ThreeDShadow -moz-Dialog;
+  -moz-border-right-colors: transparent ThreeDShadow -moz-Dialog;
+  -moz-border-bottom-colors: transparent ThreeDShadow -moz-Dialog;
+  -moz-border-left-colors: transparent ThreeDShadow -moz-Dialog;
+  background-color: -moz-Dialog;
+  color: GrayText;
+} 
+
+.datepicker-mainbox {
+  margin: 2px 4px;
+  border: 2px solid;
+  -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow;
+  -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow;
+  -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow;
+  -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow;
+  background-color: #EEEEEE;
+  color: -moz-DialogText;
+}
+
+.datepicker-popupgrid > .datepicker-mainbox {
+  margin: 0;
+  border: none;
+}
+
+.datepicker-gridlabel, .datepicker-weeklabel {
+  text-align: center;
+}
+
+.datepicker-gridlabel[today="true"] {
+  background-color: darkgrey;
+  color: white;
+}
+
+.datepicker-gridlabel[selected="true"] {
+  background-color: Highlight;
+  color: HighlightText;
+}
+
+.datepicker-button {
+  -moz-appearance: none;
+  min-width: 8px;
+  padding: 0px;
+}
+
+.datepicker-previous {
+  list-style-image: url("chrome://global/skin/arrow/arrow-lft.gif");
+}
+
+.datepicker-next {
+  list-style-image: url("chrome://global/skin/arrow/arrow-rit.gif");
+}
+
+.datepicker-previous:hover {
+  list-style-image: url("chrome://global/skin/arrow/arrow-lft-hov.gif");
+}
+
+.datepicker-next:hover {
+  list-style-image: url("chrome://global/skin/arrow/arrow-rit-hov.gif");
+}
+
+.datepicker-previous[disabled="true"] {
+  list-style-image: url("chrome://global/skin/arrow/arrow-lft-dis.gif");
+}
+
+.datepicker-next[disabled="true"] {
+  list-style-image: url("chrome://global/skin/arrow/arrow-rit-dis.gif");
+}

toolkit/themes/pinstripe/global/jar.mn

@@ -72,6 +72,7 @@ classic.jar:
 +  skin/classic/global/tabbrowser-tabs-bkgnd.png
 +  skin/classic/global/tabs-bottom-bg.png
 +  skin/classic/global/textbox.css
++  skin/classic/global/datetimepicker.css
 +  skin/classic/global/toolbar.css
 +  skin/classic/global/toolbarbutton.css
 +  skin/classic/global/tree.css

toolkit/themes/winstripe/global/datetimepicker.css

@@ -0,0 +1,177 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Initial Developer of the Original Code is the Mozilla Corporation
+ * Portions created by the Initial Developer are Copyright (C) 2006
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Neil Deakin (enndeakin@sympatico.ca)
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+/* ===== datetimepicker.css =============================================
+  == Styles used by the XUL datepicker and timepicker elements.
+  ======================================================================= */
+  
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+datepicker, timepicker {
+  margin: 2px 4px;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: default;
+}
+
+.datetimepicker-input-box {
+  -moz-appearance: textfield;
+  cursor: text;
+  -moz-margin-end: 2px;
+  border: 2px solid;
+  -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow;
+  -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow;
+  -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow;
+  -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow;
+  padding: 2px 0 3px 0;
+  -moz-padding-start: 4px;
+  -moz-padding-end: 2px;
+  background-color: -moz-Field;
+  color: -moz-FieldText;
+}
+
+.datetimepicker-input-subbox {
+  width: 1.6em;
+}
+
+html|*.datetimepicker-input {
+  text-align: right;
+}
+
+.datetimepicker-separator {
+  margin: 0 !important;
+}
+
+.datetimepicker-year {
+  width: 3.2em;
+}
+
+datepicker[readonly="true"],
+timepicker[readonly="true"] {
+  background-color: -moz-Dialog;
+  color: -moz-DialogText;
+}
+
+datepicker[disabled="true"],
+timepicker[disabled="true"] {
+  cursor: default;
+  background-color: -moz-Dialog;
+  color: GrayText;
+} 
+
+.datepicker-mainbox {
+  margin: 2px 4px;
+  border: 2px solid;
+  -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow;
+  -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow;
+  -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow;
+  -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow;
+  background-color: -moz-Field;
+  color: -moz-FieldText;
+}
+
+.datepicker-popupgrid > .datepicker-mainbox {
+  margin: 0;
+  border: none;
+}
+
+.datepicker-gridlabel, .datepicker-weeklabel {
+  text-align: center;
+}
+
+.datepicker-gridlabel[today="true"] {
+  background-color: darkgrey;
+  color: white;
+}
+
+.datepicker-gridlabel[selected="true"] {
+  background-color: Highlight;
+  color: HighlightText;
+}
+
+.datepicker-button {
+  -moz-appearance: none;
+  min-width: 8px;
+  padding: 0px;
+}
+
+.datepicker-previous {
+  list-style-image: url("chrome://global/skin/arrow/arrow-lft.gif");
+}
+
+.datepicker-next {
+  list-style-image: url("chrome://global/skin/arrow/arrow-rit.gif");
+}
+
+.datepicker-previous:hover {
+  list-style-image: url("chrome://global/skin/arrow/arrow-lft-hov.gif");
+}
+
+.datepicker-next:hover {
+  list-style-image: url("chrome://global/skin/arrow/arrow-rit-hov.gif");
+}
+
+.datepicker-previous[disabled="true"] {
+  list-style-image: url("chrome://global/skin/arrow/arrow-lft-dis.gif");
+}
+
+.datepicker-next[disabled="true"] {
+  list-style-image: url("chrome://global/skin/arrow/arrow-rit-dis.gif");
+}
+
+.datepicker-previous[chromedir="rtl"] {
+  list-style-image: url("chrome://global/skin/arrow/arrow-rit.gif");
+}
+
+.datepicker-next[chromedir="rtl"] {
+  list-style-image: url("chrome://global/skin/arrow/arrow-lft.gif");
+}
+
+.datepicker-previous[chromedir="rtl"] {
+  list-style-image: url("chrome://global/skin/arrow/arrow-rit-hov.gif");
+}
+
+.datepicker-next[chromedir="rtl"]:hover {
+  list-style-image: url("chrome://global/skin/arrow/arrow-lft-hov.gif");
+}
+
+.datepicker-previous[disabled="true"][chromedir="rtl"] {
+  list-style-image: url("chrome://global/skin/arrow/arrow-rit-dis.gif");
+}
+
+.datepicker-next[disabled="true"][chromedir="rtl"] {
+  list-style-image: url("chrome://global/skin/arrow/arrow-lft-dis.gif");
+}

toolkit/themes/winstripe/global/jar.mn

@@ -37,6 +37,7 @@ classic.jar:
         skin/classic/global/splitter.css
         skin/classic/global/tabbox.css
         skin/classic/global/textbox.css
+        skin/classic/global/datetimepicker.css
         skin/classic/global/toolbar.css
         skin/classic/global/toolbarbutton.css
         skin/classic/global/tree.css

xpfe/global/jar.mn

@@ -42,6 +42,7 @@ toolkit.jar:
         content/global/bindings/button.xml          (resources/content/bindings/button.xml)
         content/global/bindings/checkbox.xml        (resources/content/bindings/checkbox.xml)
         content/global/bindings/colorpicker.xml     (resources/content/bindings/colorpicker.xml)
+        content/global/bindings/datetimepicker.xml  (/toolkit/content/widgets/datetimepicker.xml)
         content/global/bindings/dialog.xml          (resources/content/bindings/dialog.xml)
         content/global/bindings/editor.xml          (resources/content/bindings/editor.xml)
         content/global/bindings/general.xml         (resources/content/bindings/general.xml)
@@ -93,6 +94,7 @@ en-US.jar:
     locale/en-US/global/commonDialog.dtd            (resources/locale/en-US/commonDialog.dtd) 
     locale/en-US/global/charsetOverlay.dtd          (resources/locale/en-US/charsetOverlay.dtd) 
     locale/en-US/global/textcontext.dtd             (resources/locale/en-US/textcontext.dtd) 
+    locale/en-US/global/datetimepicker.dtd          (/toolkit/locales/en-US/chrome/global/datetimepicker.dtd)
     locale/en-US/global/brand.dtd                   (resources/locale/en-US/brand.dtd) 
     locale/en-US/global/tabbrowser.dtd              (resources/locale/en-US/tabbrowser.dtd)
     locale/en-US/global/tabbrowser.properties       (resources/locale/en-US/tabbrowser.properties)

xpfe/global/resources/content/xul.css

@@ -76,6 +76,7 @@ treechildren, treeitem, treeseparator, treerow, treecell {
 button,
 checkbox,
 colorpicker[type="button"],
+datepicker[type="grid"],
 menulist,
 radiogroup,
 tree,
@@ -884,3 +885,21 @@ wizardpage {
 .wizard-buttons {
   -moz-binding: url("chrome://global/content/bindings/wizard.xml#wizard-buttons");
 }
+
+/********** datepicker and timepicker ********/
+
+datepicker {
+  -moz-binding: url('chrome://global/content/bindings/datetimepicker.xml#datepicker');
+}
+
+datepicker[type="popup"] {
+  -moz-binding: url('chrome://global/content/bindings/datetimepicker.xml#datepicker-popup');
+}
+
+datepicker[type="grid"] {
+  -moz-binding: url('chrome://global/content/bindings/datetimepicker.xml#datepicker-grid');
+}
+
+timepicker {
+  -moz-binding: url('chrome://global/content/bindings/datetimepicker.xml#timepicker');
+}