From b8031b68bd1488e7f27e758d82bbfe765fc093db Mon Sep 17 00:00:00 2001
From: Sebastien Ros <none@none>
Date: Mon, 7 May 2012 14:50:25 -0700
Subject: [PATCH] Fixing DateTime localization issues

1- Some DateTime editors were not using the expected localization formats
2- The DateTime picker was not correctly initialized with localized formats
3- The TimePicker could not handle different am/pm designators
4- The drivers could not accept different designators

Now the am/pm designators used to parse the time and to render it are the one
from WorkContext.CurrentCulture, which means that is zn-TW is used as the
default culture, times will be displayed with "chinese chars here" instead of
AM, and will expect it when parsing it.

--HG--
branch : 1.4.x
---
 .hgsubstate                                   |    2 +-
 Orchard.proj                                  |    1 +
 .../Common/DateEditor/DateEditorDriver.cs     |    7 +-
 .../Common/Styles/orchard-common-datetime.css |    6 +
 .../Views/Parts.Common.Date.Edit.cshtml       |    8 +-
 src/Orchard.Web/Core/Shapes/DateTimeShapes.cs |    6 +-
 .../Drivers/ArchiveLaterPartDriver.cs         |   11 +-
 .../Styles/orchard-archivelater-datetime.css  |    4 +-
 .../EditorTemplates/Parts/ArchiveLater.cshtml |    6 +-
 .../Drivers/PublishLaterPartDriver.cs         |    6 +-
 .../Styles/orchard-publishlater-datetime.css  |    4 +-
 .../EditorTemplates/Parts/PublishLater.cshtml |    6 +-
 .../Orchard.jQuery/Orchard.jQuery.csproj      |    5 +-
 .../Orchard.jQuery/ResourceManifest.cs        |    8 +-
 .../Scripts/jquery.ui.timepicker.js           | 1324 +++++++++++++++++
 .../Scripts/jquery.ui.timepicker.min.js       |    1 +
 .../Orchard.jQuery/Scripts/ui.timepickr.js    |  420 ------
 .../Orchard.jQuery/Styles/ui.timepicker.css   |    7 +
 .../Orchard.jQuery/Styles/ui.timepickr.css    |   50 -
 .../Views/DatePickerLocalization.cshtml       |   26 +
 20 files changed, 1404 insertions(+), 504 deletions(-)
 create mode 100644 src/Orchard.Web/Modules/Orchard.jQuery/Scripts/jquery.ui.timepicker.js
 create mode 100644 src/Orchard.Web/Modules/Orchard.jQuery/Scripts/jquery.ui.timepicker.min.js
 delete mode 100644 src/Orchard.Web/Modules/Orchard.jQuery/Scripts/ui.timepickr.js
 create mode 100644 src/Orchard.Web/Modules/Orchard.jQuery/Styles/ui.timepicker.css
 delete mode 100644 src/Orchard.Web/Modules/Orchard.jQuery/Styles/ui.timepickr.css

diff --git a/.hgsubstate b/.hgsubstate
index e65a39ddd..7df13f6cd 100644
--- a/.hgsubstate
+++ b/.hgsubstate
@@ -5,4 +5,4 @@ cfc264d41c1d299c104d76c5032d8ffee3047dcd src/Orchard.Web/Modules/Orchard.Rules
 0b96793c3737e50863270c24debf6d44065b73bb src/Orchard.Web/Modules/Orchard.Tokens
 4ed51e0e76c2aacc2de90ce9984fd00cfdfae2ce src/orchard.web/Modules/Orchard.Alias
 0e660c8cfbfb5217abfb7cf6adf6f2cf484174d6 src/orchard.web/Modules/Orchard.Projections
-0ce46c4e39390472b82459007c0e5a05c18d22d8 src/orchard.web/modules/Orchard.Fields
+bbd96451a4e80b4564dbb23ab947711feed3b5d2 src/orchard.web/modules/Orchard.Fields
diff --git a/Orchard.proj b/Orchard.proj
index 5ed274adb..7bea6b213 100644
--- a/Orchard.proj
+++ b/Orchard.proj
@@ -312,6 +312,7 @@
         $(MSBuildProjectDirectory)\**\*.user;
         $(MSBuildProjectDirectory)\**\*.patch;
         $(MSBuildProjectDirectory)\**\*.hg*\**\*;
+        $(LibFolder)\nunit\addins\**\*;
         " />
 
       <Zip-Stage Include="$(StageFolder)\**\*" />
diff --git a/src/Orchard.Web/Core/Common/DateEditor/DateEditorDriver.cs b/src/Orchard.Web/Core/Common/DateEditor/DateEditorDriver.cs
index c4421ccc6..248050db9 100644
--- a/src/Orchard.Web/Core/Common/DateEditor/DateEditorDriver.cs
+++ b/src/Orchard.Web/Core/Common/DateEditor/DateEditorDriver.cs
@@ -9,7 +9,6 @@ using Orchard.Localization;
 namespace Orchard.Core.Common.DateEditor {
     public class DateEditorDriver : ContentPartDriver<CommonPart> {
         private readonly IDateTimeLocalization _dateTimeLocalization;
-
         private readonly Lazy<CultureInfo> _cultureInfo;
 
         public DateEditorDriver(
@@ -62,8 +61,8 @@ namespace Orchard.Core.Common.DateEditor {
                             // date and time are formatted using the same patterns as DateTimePicker is, preventing other cultures issues
                             var createdLocal = TimeZoneInfo.ConvertTimeFromUtc(part.CreatedUtc.Value, Services.WorkContext.CurrentTimeZone);
 
-                            model.CreatedDate = createdLocal.ToString(_dateTimeLocalization.ShortDateFormat.Text);
-                            model.CreatedTime = createdLocal.ToString(_dateTimeLocalization.ShortTimeFormat.Text);
+                            model.CreatedDate = createdLocal.ToString(_dateTimeLocalization.ShortDateFormat.Text, _cultureInfo.Value);
+                            model.CreatedTime = createdLocal.ToString(_dateTimeLocalization.ShortTimeFormat.Text, _cultureInfo.Value);
                         }
                     }
 
@@ -77,7 +76,7 @@ namespace Orchard.Core.Common.DateEditor {
                             var dateTimeFormat = _dateTimeLocalization.ShortDateFormat + " " + _dateTimeLocalization.ShortTimeFormat;
 
                             // use current culture
-                            if (DateTime.TryParseExact(parseDateTime, dateTimeFormat, CultureInfo.InvariantCulture, DateTimeStyles.None, out createdUtc)) {
+                            if (DateTime.TryParseExact(parseDateTime, dateTimeFormat, _cultureInfo.Value, DateTimeStyles.None, out createdUtc)) {
 
                                 // the date time is entered locally for the configured timezone
                                 part.CreatedUtc = TimeZoneInfo.ConvertTimeToUtc(createdUtc, Services.WorkContext.CurrentTimeZone);
diff --git a/src/Orchard.Web/Core/Common/Styles/orchard-common-datetime.css b/src/Orchard.Web/Core/Common/Styles/orchard-common-datetime.css
index e31c85fe3..8f3f55d48 100644
--- a/src/Orchard.Web/Core/Common/Styles/orchard-common-datetime.css
+++ b/src/Orchard.Web/Core/Common/Styles/orchard-common-datetime.css
@@ -11,4 +11,10 @@ fieldset.createdutc-datetime input {
     padding:1px;
     text-align:center;
     color:#666;
+}
+input#DateEditor_CreatedDate {
+    width:10em;
+}
+input#DateEditor_CreatedTime {
+    width:7em;
 }
\ No newline at end of file
diff --git a/src/Orchard.Web/Core/Common/Views/Parts.Common.Date.Edit.cshtml b/src/Orchard.Web/Core/Common/Views/Parts.Common.Date.Edit.cshtml
index ba2036213..1ae70c628 100644
--- a/src/Orchard.Web/Core/Common/Views/Parts.Common.Date.Edit.cshtml
+++ b/src/Orchard.Web/Core/Common/Views/Parts.Common.Date.Edit.cshtml
@@ -1,11 +1,11 @@
 @model Orchard.Core.Common.DateEditor.DateEditorViewModel
 @{
 	var DateEditor = Model;
-    Script.Require("jQueryUtils_TimePicker");
     Script.Require("jQueryUI_DatePicker");
+    Script.Require("jQueryUI_TimePicker");
     Style.Require("Common_DatePicker");
-    Style.Require("jQueryUtils_TimePicker");
-    Style.Require("jQueryUI_DatePicker"); 
+    Style.Require("jQueryUI_DatePicker");
+    Style.Require("jQueryUI_TimePicker"); 
 }
 <fieldset class="createdutc-datetime">
     @Html.LabelFor(m => DateEditor.CreatedDate, T("Created On"))
@@ -38,7 +38,7 @@
             }
         });
         $('#@Html.FieldIdFor(m => DateEditor.CreatedDate)').datepicker({ showAnim: "" });
-        $('#@Html.FieldIdFor(m => DateEditor.CreatedTime)').timepickr({ showAnim: "" });
+        $('#@Html.FieldIdFor(m => DateEditor.CreatedTime)').timepicker({ stepMinute: 5});
     })
 //]]>
 </script>
diff --git a/src/Orchard.Web/Core/Shapes/DateTimeShapes.cs b/src/Orchard.Web/Core/Shapes/DateTimeShapes.cs
index 4bf66e24b..46458de00 100644
--- a/src/Orchard.Web/Core/Shapes/DateTimeShapes.cs
+++ b/src/Orchard.Web/Core/Shapes/DateTimeShapes.cs
@@ -6,12 +6,14 @@ using Orchard.DisplayManagement;
 using Orchard.Localization;
 using Orchard.Mvc.Html;
 using Orchard.Services;
+using System.Globalization;
 
 namespace Orchard.Core.Shapes {
     public class DateTimeShapes : IDependency {
         private readonly IClock _clock;
         private readonly IDateTimeLocalization _dateTimeLocalization;
         private readonly IWorkContextAccessor _workContextAccessor;
+        private readonly Lazy<CultureInfo> _cultureInfo;
 
         public DateTimeShapes(
             IClock clock,
@@ -22,6 +24,8 @@ namespace Orchard.Core.Shapes {
             _dateTimeLocalization = dateTimeLocalization;
             _workContextAccessor = workContextAccessor;
             T = NullLocalizer.Instance;
+
+            _cultureInfo = new Lazy<CultureInfo>(() => CultureInfo.GetCultureInfo(_workContextAccessor.GetContext().CurrentCulture));
         }
 
         public Localizer T { get; set; }
@@ -52,7 +56,7 @@ namespace Orchard.Core.Shapes {
                 return DateTime(DateTimeUtc, _dateTimeLocalization.LongDateTimeFormat);
             }
 
-            return new MvcHtmlString(ConvertToDisplayTime(DateTimeUtc).ToString(CustomFormat.Text));
+            return new MvcHtmlString(ConvertToDisplayTime(DateTimeUtc).ToString(CustomFormat.Text, _cultureInfo.Value));
         }
 
         /// <summary>
diff --git a/src/Orchard.Web/Modules/Orchard.ArchiveLater/Drivers/ArchiveLaterPartDriver.cs b/src/Orchard.Web/Modules/Orchard.ArchiveLater/Drivers/ArchiveLaterPartDriver.cs
index a59609544..f5e889ed4 100644
--- a/src/Orchard.Web/Modules/Orchard.ArchiveLater/Drivers/ArchiveLaterPartDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.ArchiveLater/Drivers/ArchiveLaterPartDriver.cs
@@ -15,6 +15,7 @@ namespace Orchard.ArchiveLater.Drivers {
         private const string TemplateName = "Parts/ArchiveLater";
         private readonly IArchiveLaterService _archiveLaterService;
         private readonly IDateTimeLocalization _dateTimeLocalization;
+        private readonly Lazy<CultureInfo> _cultureInfo;
 
         public ArchiveLaterPartDriver(
             IOrchardServices services,
@@ -24,6 +25,10 @@ namespace Orchard.ArchiveLater.Drivers {
             _dateTimeLocalization = dateTimeLocalization;
             T = NullLocalizer.Instance;
             Services = services;
+
+            // initializing the culture info lazy initializer
+            _cultureInfo = new Lazy<CultureInfo>(() => CultureInfo.GetCultureInfo(Services.WorkContext.CurrentCulture));
+
         }
 
         public Localizer T { get; set; }
@@ -46,8 +51,8 @@ namespace Orchard.ArchiveLater.Drivers {
             var model = new ArchiveLaterViewModel(part) {
                 ScheduledArchiveUtc = part.ScheduledArchiveUtc.Value,
                 ArchiveLater = part.ScheduledArchiveUtc.Value.HasValue,
-                ScheduledArchiveDate = part.ScheduledArchiveUtc.Value.HasValue ? localDate.Value.ToString(_dateTimeLocalization.ShortDateFormat.Text) : String.Empty,
-                ScheduledArchiveTime = part.ScheduledArchiveUtc.Value.HasValue ? localDate.Value.ToString(_dateTimeLocalization.ShortTimeFormat.Text) : String.Empty
+                ScheduledArchiveDate = part.ScheduledArchiveUtc.Value.HasValue ? localDate.Value.ToString(_dateTimeLocalization.ShortDateFormat.Text, _cultureInfo.Value) : String.Empty,
+                ScheduledArchiveTime = part.ScheduledArchiveUtc.Value.HasValue ? localDate.Value.ToString(_dateTimeLocalization.ShortTimeFormat.Text, _cultureInfo.Value) : String.Empty
             };
 
             return ContentShape("Parts_ArchiveLater_Edit",
@@ -64,7 +69,7 @@ namespace Orchard.ArchiveLater.Drivers {
                     var dateTimeFormat = _dateTimeLocalization.ShortDateFormat + " " + _dateTimeLocalization.ShortTimeFormat;
 
                     // use an english culture as it is the one used by jQuery.datepicker by default
-                    if (DateTime.TryParseExact(parseDateTime, dateTimeFormat, CultureInfo.InvariantCulture, DateTimeStyles.None, out scheduled)) {
+                    if (DateTime.TryParseExact(parseDateTime, dateTimeFormat, _cultureInfo.Value, DateTimeStyles.None, out scheduled)) {
                         // the date time is entered locally for the configured timezone
                         var timeZone = Services.WorkContext.CurrentTimeZone;
 
diff --git a/src/Orchard.Web/Modules/Orchard.ArchiveLater/Styles/orchard-archivelater-datetime.css b/src/Orchard.Web/Modules/Orchard.ArchiveLater/Styles/orchard-archivelater-datetime.css
index 16c497a79..fde0a474a 100644
--- a/src/Orchard.Web/Modules/Orchard.ArchiveLater/Styles/orchard-archivelater-datetime.css
+++ b/src/Orchard.Web/Modules/Orchard.ArchiveLater/Styles/orchard-archivelater-datetime.css
@@ -7,10 +7,10 @@ html.dyn input.hinted {
     font-style:italic;
 }
 input#ArchiveLater_ScheduledArchiveDate {
-    width:49%;
+    width:10em;
 }
 input#ArchiveLater_ScheduledArchiveTime {
-    width:43%;
+    width:7em;
 }
 
 .edit-item-sidebar fieldset.archive-later-datetime {
diff --git a/src/Orchard.Web/Modules/Orchard.ArchiveLater/Views/EditorTemplates/Parts/ArchiveLater.cshtml b/src/Orchard.Web/Modules/Orchard.ArchiveLater/Views/EditorTemplates/Parts/ArchiveLater.cshtml
index e1a0392aa..950e48d9f 100644
--- a/src/Orchard.Web/Modules/Orchard.ArchiveLater/Views/EditorTemplates/Parts/ArchiveLater.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.ArchiveLater/Views/EditorTemplates/Parts/ArchiveLater.cshtml
@@ -1,11 +1,11 @@
 @model Orchard.ArchiveLater.ViewModels.ArchiveLaterViewModel
 @using System.Web.Mvc.Html;
 @{
-    Style.Require("jQueryUtils_TimePicker");
     Style.Require("jQueryUI_DatePicker");
+    Style.Require("jQueryUI_TimePicker");
     Style.Require("ArchiveLater_DatePicker");
     Script.Require("jQueryUI_DatePicker");
-    Script.Require("jQueryUtils_TimePicker");
+    Script.Require("jQueryUI_TimePicker");
 }
 
 <fieldset class="archive-later-datetime">
@@ -42,7 +42,7 @@
             }
         });
         $('#@ViewData.TemplateInfo.GetFullHtmlFieldId("ScheduledArchiveDate")').datepicker({ showAnim: "" }).focus(function () { $('#@ViewData.TemplateInfo.GetFullHtmlFieldId("Command_ArchiveLater")').attr("checked", "checked") });
-        $('#@ViewData.TemplateInfo.GetFullHtmlFieldId("ScheduledArchiveTime")').timepickr().focus(function () { $('#@ViewData.TemplateInfo.GetFullHtmlFieldId("Command_ArchiveLater")').attr("checked", "checked") });
+        $('#@ViewData.TemplateInfo.GetFullHtmlFieldId("ScheduledArchiveTime")').timepicker({ stepMinute: 5 }).focus(function () { $('#@ViewData.TemplateInfo.GetFullHtmlFieldId("Command_ArchiveLater")').attr("checked", "checked") });
     })
 //]]>
 </script>
diff --git a/src/Orchard.Web/Modules/Orchard.PublishLater/Drivers/PublishLaterPartDriver.cs b/src/Orchard.Web/Modules/Orchard.PublishLater/Drivers/PublishLaterPartDriver.cs
index 0f5e2750b..a118d493d 100644
--- a/src/Orchard.Web/Modules/Orchard.PublishLater/Drivers/PublishLaterPartDriver.cs
+++ b/src/Orchard.Web/Modules/Orchard.PublishLater/Drivers/PublishLaterPartDriver.cs
@@ -62,8 +62,8 @@ namespace Orchard.PublishLater.Drivers {
             var localDate = new Lazy<DateTime>( () => TimeZoneInfo.ConvertTimeFromUtc(part.ScheduledPublishUtc.Value.Value, Services.WorkContext.CurrentTimeZone));
             var model = new PublishLaterViewModel(part) {
                 ScheduledPublishUtc = part.ScheduledPublishUtc.Value,
-                ScheduledPublishDate = part.ScheduledPublishUtc.Value.HasValue && !part.IsPublished() ? localDate.Value.ToString(_dateTimeLocalization.ShortDateFormat.Text) : String.Empty,
-                ScheduledPublishTime = part.ScheduledPublishUtc.Value.HasValue && !part.IsPublished() ? localDate.Value.ToString(_dateTimeLocalization.ShortTimeFormat.Text) : String.Empty,
+                ScheduledPublishDate = part.ScheduledPublishUtc.Value.HasValue && !part.IsPublished() ? localDate.Value.ToString(_dateTimeLocalization.ShortDateFormat.Text, _cultureInfo.Value) : String.Empty,
+                ScheduledPublishTime = part.ScheduledPublishUtc.Value.HasValue && !part.IsPublished() ? localDate.Value.ToString(_dateTimeLocalization.ShortTimeFormat.Text, _cultureInfo.Value) : String.Empty,
             };
 
             return ContentShape("Parts_PublishLater_Edit",
@@ -83,7 +83,7 @@ namespace Orchard.PublishLater.Drivers {
                     var dateTimeFormat = _dateTimeLocalization.ShortDateFormat + " " + _dateTimeLocalization.ShortTimeFormat;
 
                     // use current culture
-                    if (DateTime.TryParseExact(parseDateTime, dateTimeFormat, CultureInfo.InvariantCulture, DateTimeStyles.None, out scheduled)) {
+                    if (DateTime.TryParseExact(parseDateTime, dateTimeFormat, _cultureInfo.Value, DateTimeStyles.None, out scheduled)) {
                         
                         // the date time is entered locally for the configured timezone
                         var timeZone = Services.WorkContext.CurrentTimeZone;
diff --git a/src/Orchard.Web/Modules/Orchard.PublishLater/Styles/orchard-publishlater-datetime.css b/src/Orchard.Web/Modules/Orchard.PublishLater/Styles/orchard-publishlater-datetime.css
index 6756b7e83..6c70b12f7 100644
--- a/src/Orchard.Web/Modules/Orchard.PublishLater/Styles/orchard-publishlater-datetime.css
+++ b/src/Orchard.Web/Modules/Orchard.PublishLater/Styles/orchard-publishlater-datetime.css
@@ -23,9 +23,9 @@ fieldset.publish-later-datetime input {
 }
 
 input#PublishLater_ScheduledPublishDate {
-    width:39%;
+    width:10em;
     margin:0 0 0 12px;
 }
 input#PublishLater_ScheduledPublishTime {
-    width:33%;
+    width:7em;
 }
diff --git a/src/Orchard.Web/Modules/Orchard.PublishLater/Views/EditorTemplates/Parts/PublishLater.cshtml b/src/Orchard.Web/Modules/Orchard.PublishLater/Views/EditorTemplates/Parts/PublishLater.cshtml
index bd57650a1..6ee79bdcb 100644
--- a/src/Orchard.Web/Modules/Orchard.PublishLater/Views/EditorTemplates/Parts/PublishLater.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.PublishLater/Views/EditorTemplates/Parts/PublishLater.cshtml
@@ -1,10 +1,10 @@
 @model Orchard.PublishLater.ViewModels.PublishLaterViewModel
 @{
-    Script.Require("jQueryUtils_TimePicker");
     Script.Require("jQueryUI_DatePicker");
+    Script.Require("jQueryUI_TimePicker");
     Style.Require("PublishLater_DatePicker");
-    Style.Require("jQueryUtils_TimePicker");
     Style.Require("jQueryUI_DatePicker");
+    Style.Require("jQueryUI_TimePicker");
 }
 <fieldset class="publish-later-datetime">
     <legend>@T("Publish")</legend>
@@ -40,7 +40,7 @@
         });
         
         $('#@ViewData.TemplateInfo.GetFullHtmlFieldId("ScheduledPublishDate")').datepicker({ showAnim: ""}).focus(function () { $('#@ViewData.TemplateInfo.GetFullHtmlFieldId("Command_PublishLater")').attr("checked", "checked") });
-        $('#@ViewData.TemplateInfo.GetFullHtmlFieldId("ScheduledPublishTime")').timepickr().focus(function () { $('#@ViewData.TemplateInfo.GetFullHtmlFieldId("Command_PublishLater")').attr("checked", "checked") });
+        $('#@ViewData.TemplateInfo.GetFullHtmlFieldId("ScheduledPublishTime")').timepicker({ stepMinute: 5}).focus(function () { $('#@ViewData.TemplateInfo.GetFullHtmlFieldId("Command_PublishLater")').attr("checked", "checked") });
     })
 //]]>
 </script>
diff --git a/src/Orchard.Web/Modules/Orchard.jQuery/Orchard.jQuery.csproj b/src/Orchard.Web/Modules/Orchard.jQuery/Orchard.jQuery.csproj
index 7ebc0d351..ef476a22a 100644
--- a/src/Orchard.Web/Modules/Orchard.jQuery/Orchard.jQuery.csproj
+++ b/src/Orchard.Web/Modules/Orchard.jQuery/Orchard.jQuery.csproj
@@ -47,6 +47,7 @@
     </Reference>
   </ItemGroup>
   <ItemGroup>
+    <Content Include="Scripts\jquery.ui.timepicker.min.js" />
     <Content Include="Scripts\jquery-1.7.1.js" />
     <Content Include="Scripts\jquery-1.7.1.min.js" />
     <Content Include="Scripts\jquery-ui.js" />
@@ -114,7 +115,7 @@
     <Content Include="Scripts\jquery.ui.widget.js" />
     <Content Include="Scripts\jquery.ui.widget.min.js" />
     <Content Include="Scripts\jquery.utils.js" />
-    <Content Include="Scripts\ui.timepickr.js" />
+    <Content Include="Scripts\jquery.ui.timepicker.js" />
     <Content Include="Styles\images\ui-bg_flat_0_aaaaaa_40x100.png" />
     <Content Include="Styles\images\ui-bg_flat_75_ffffff_40x100.png" />
     <Content Include="Styles\images\ui-bg_glass_55_fbf9ee_1x400.png" />
@@ -130,7 +131,7 @@
     <Content Include="Styles\images\ui-icons_cd0a0a_256x240.png" />
     <Content Include="Styles\jquery-ui-1.8.18.custom.css" />
     <Content Include="Styles\ui.datepicker.css" />
-    <Content Include="Styles\ui.timepickr.css" />
+    <Content Include="Styles\ui.timepicker.css" />
   </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="..\..\..\Orchard\Orchard.Framework.csproj">
diff --git a/src/Orchard.Web/Modules/Orchard.jQuery/ResourceManifest.cs b/src/Orchard.Web/Modules/Orchard.jQuery/ResourceManifest.cs
index 7f7b683bb..7b1fe422c 100644
--- a/src/Orchard.Web/Modules/Orchard.jQuery/ResourceManifest.cs
+++ b/src/Orchard.Web/Modules/Orchard.jQuery/ResourceManifest.cs
@@ -48,15 +48,11 @@ namespace Orchard.jQuery {
             manifest.DefineScript("jQueryEffects_Slide").SetUrl("jquery.effects.slide.min.js", "jquery.effects.slide.js").SetVersion("1.8.18").SetDependencies("jQueryEffects_Core");
             manifest.DefineScript("jQueryEffects_Transfer").SetUrl("jquery.effects.transfer.min.js", "jquery.effects.transfer.js").SetVersion("1.8.18").SetDependencies("jQueryEffects_Core");
 
-
-            // Utils
-            manifest.DefineScript("jQueryUtils").SetUrl("jquery.utils.js").SetDependencies("jQuery");
-            manifest.DefineScript("jQueryUtils_TimePicker").SetUrl("ui.timepickr.js").SetVersion("0.7.0a").SetDependencies("jQueryUtils", "jQueryUI_Core", "jQueryUI_Widget");
-
             manifest.DefineStyle("jQueryUI_Orchard").SetUrl("jquery-ui-1.8.18.custom.css").SetVersion("1.8.18");
             manifest.DefineStyle("jQueryUI_DatePicker").SetUrl("ui.datepicker.css").SetDependencies("jQueryUI_Orchard").SetVersion("1.7.2");
-            manifest.DefineStyle("jQueryUtils_TimePicker").SetUrl("ui.timepickr.css");
 
+            manifest.DefineScript("jQueryUI_TimePicker").SetUrl("jquery.ui.timepicker.min.js", "jquery.ui.timepicker.js").SetVersion("1.0.0").SetDependencies("jQueryUI_Slider");
+            manifest.DefineStyle("jQueryUI_TimePicker").SetUrl("ui.timepicker.css").SetDependencies("jQueryUI_Orchard").SetVersion("1.0.0");
         }
     }
 }
diff --git a/src/Orchard.Web/Modules/Orchard.jQuery/Scripts/jquery.ui.timepicker.js b/src/Orchard.Web/Modules/Orchard.jQuery/Scripts/jquery.ui.timepicker.js
new file mode 100644
index 000000000..5e4466ca2
--- /dev/null
+++ b/src/Orchard.Web/Modules/Orchard.jQuery/Scripts/jquery.ui.timepicker.js
@@ -0,0 +1,1324 @@
+/*
+* jQuery timepicker addon
+* By: Trent Richardson [http://trentrichardson.com]
+* Version 1.0.0
+* Last Modified: 02/05/2012
+*
+* Copyright 2012 Trent Richardson
+* Dual licensed under the MIT and GPL licenses.
+* http://trentrichardson.com/Impromptu/GPL-LICENSE.txt
+* http://trentrichardson.com/Impromptu/MIT-LICENSE.txt
+*
+* HERES THE CSS:
+* .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
+* .ui-timepicker-div dl { text-align: left; }
+* .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
+* .ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
+* .ui-timepicker-div td { font-size: 90%; }
+* .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
+*/
+
+(function ($) {
+
+    // Prevent "Uncaught RangeError: Maximum call stack size exceeded"
+    $.ui.timepicker = $.ui.timepicker || {};
+    if ($.ui.timepicker.version) {
+        return;
+    }
+
+    $.extend($.ui, { timepicker: { version: "1.0.0"} });
+
+    /* Time picker manager.
+    Use the singleton instance of this class, $.timepicker, to interact with the time picker.
+    Settings for (groups of) time pickers are maintained in an instance object,
+    allowing multiple different settings on the same page. */
+
+    function Timepicker() {
+        this.regional = []; // Available regional settings, indexed by language code
+        this.regional[''] = { // Default regional settings
+            currentText: 'Now',
+            closeText: 'Done',
+            ampm: false,
+            amNames: ['AM', 'A'],
+            pmNames: ['PM', 'P'],
+            timeFormat: 'hh:mm tt',
+            timeSuffix: '',
+            timeOnlyTitle: 'Choose Time',
+            timeText: 'Time',
+            hourText: 'Hour',
+            minuteText: 'Minute',
+            secondText: 'Second',
+            millisecText: 'Millisecond',
+            timezoneText: 'Time Zone'
+        };
+        this._defaults = { // Global defaults for all the datetime picker instances
+            showButtonPanel: true,
+            timeOnly: false,
+            showHour: true,
+            showMinute: true,
+            showSecond: false,
+            showMillisec: false,
+            showTimezone: false,
+            showTime: true,
+            stepHour: 1,
+            stepMinute: 1,
+            stepSecond: 1,
+            stepMillisec: 1,
+            hour: 0,
+            minute: 0,
+            second: 0,
+            millisec: 0,
+            timezone: '+0000',
+            hourMin: 0,
+            minuteMin: 0,
+            secondMin: 0,
+            millisecMin: 0,
+            hourMax: 23,
+            minuteMax: 59,
+            secondMax: 59,
+            millisecMax: 999,
+            minDateTime: null,
+            maxDateTime: null,
+            onSelect: null,
+            hourGrid: 0,
+            minuteGrid: 0,
+            secondGrid: 0,
+            millisecGrid: 0,
+            alwaysSetTime: true,
+            separator: ' ',
+            altFieldTimeOnly: true,
+            showTimepicker: true,
+            timezoneIso8609: false,
+            timezoneList: null,
+            addSliderAccess: false,
+            sliderAccessArgs: null
+        };
+        $.extend(this._defaults, this.regional['']);
+    };
+
+    $.extend(Timepicker.prototype, {
+        $input: null,
+        $altInput: null,
+        $timeObj: null,
+        inst: null,
+        hour_slider: null,
+        minute_slider: null,
+        second_slider: null,
+        millisec_slider: null,
+        timezone_select: null,
+        hour: 0,
+        minute: 0,
+        second: 0,
+        millisec: 0,
+        timezone: '+0000',
+        hourMinOriginal: null,
+        minuteMinOriginal: null,
+        secondMinOriginal: null,
+        millisecMinOriginal: null,
+        hourMaxOriginal: null,
+        minuteMaxOriginal: null,
+        secondMaxOriginal: null,
+        millisecMaxOriginal: null,
+        ampm: '',
+        formattedDate: '',
+        formattedTime: '',
+        formattedDateTime: '',
+        timezoneList: null,
+
+        /* Override the default settings for all instances of the time picker.
+        @param  settings  object - the new settings to use as defaults (anonymous object)
+        @return the manager object */
+        setDefaults: function (settings) {
+            extendRemove(this._defaults, settings || {});
+            return this;
+        },
+
+        //########################################################################
+        // Create a new Timepicker instance
+        //########################################################################
+        _newInst: function ($input, o) {
+            var tp_inst = new Timepicker(),
+			inlineSettings = {};
+
+            for (var attrName in this._defaults) {
+                var attrValue = $input.attr('time:' + attrName);
+                if (attrValue) {
+                    try {
+                        inlineSettings[attrName] = eval(attrValue);
+                    } catch (err) {
+                        inlineSettings[attrName] = attrValue;
+                    }
+                }
+            }
+            tp_inst._defaults = $.extend({}, this._defaults, inlineSettings, o, {
+                beforeShow: function (input, dp_inst) {
+                    if ($.isFunction(o.beforeShow))
+                        return o.beforeShow(input, dp_inst, tp_inst);
+                },
+                onChangeMonthYear: function (year, month, dp_inst) {
+                    // Update the time as well : this prevents the time from disappearing from the $input field.
+                    tp_inst._updateDateTime(dp_inst);
+                    if ($.isFunction(o.onChangeMonthYear))
+                        o.onChangeMonthYear.call($input[0], year, month, dp_inst, tp_inst);
+                },
+                onClose: function (dateText, dp_inst) {
+                    if (tp_inst.timeDefined === true && $input.val() != '')
+                        tp_inst._updateDateTime(dp_inst);
+                    if ($.isFunction(o.onClose))
+                        o.onClose.call($input[0], dateText, dp_inst, tp_inst);
+                },
+                timepicker: tp_inst // add timepicker as a property of datepicker: $.datepicker._get(dp_inst, 'timepicker');
+            });
+            tp_inst.amNames = $.map(tp_inst._defaults.amNames, function (val) { return val.toUpperCase(); });
+            tp_inst.pmNames = $.map(tp_inst._defaults.pmNames, function (val) { return val.toUpperCase(); });
+
+            if (tp_inst._defaults.timezoneList === null) {
+                var timezoneList = [];
+                for (var i = -11; i <= 12; i++)
+                    timezoneList.push((i >= 0 ? '+' : '-') + ('0' + Math.abs(i).toString()).slice(-2) + '00');
+                if (tp_inst._defaults.timezoneIso8609)
+                    timezoneList = $.map(timezoneList, function (val) {
+                        return val == '+0000' ? 'Z' : (val.substring(0, 3) + ':' + val.substring(3));
+                    });
+                tp_inst._defaults.timezoneList = timezoneList;
+            }
+
+            tp_inst.hour = tp_inst._defaults.hour;
+            tp_inst.minute = tp_inst._defaults.minute;
+            tp_inst.second = tp_inst._defaults.second;
+            tp_inst.millisec = tp_inst._defaults.millisec;
+            tp_inst.ampm = '';
+            tp_inst.$input = $input;
+
+            if (o.altField)
+                tp_inst.$altInput = $(o.altField)
+				.css({ cursor: 'pointer' })
+				.focus(function () { $input.trigger("focus"); });
+
+            if (tp_inst._defaults.minDate == 0 || tp_inst._defaults.minDateTime == 0) {
+                tp_inst._defaults.minDate = new Date();
+            }
+            if (tp_inst._defaults.maxDate == 0 || tp_inst._defaults.maxDateTime == 0) {
+                tp_inst._defaults.maxDate = new Date();
+            }
+
+            // datepicker needs minDate/maxDate, timepicker needs minDateTime/maxDateTime..
+            if (tp_inst._defaults.minDate !== undefined && tp_inst._defaults.minDate instanceof Date)
+                tp_inst._defaults.minDateTime = new Date(tp_inst._defaults.minDate.getTime());
+            if (tp_inst._defaults.minDateTime !== undefined && tp_inst._defaults.minDateTime instanceof Date)
+                tp_inst._defaults.minDate = new Date(tp_inst._defaults.minDateTime.getTime());
+            if (tp_inst._defaults.maxDate !== undefined && tp_inst._defaults.maxDate instanceof Date)
+                tp_inst._defaults.maxDateTime = new Date(tp_inst._defaults.maxDate.getTime());
+            if (tp_inst._defaults.maxDateTime !== undefined && tp_inst._defaults.maxDateTime instanceof Date)
+                tp_inst._defaults.maxDate = new Date(tp_inst._defaults.maxDateTime.getTime());
+            return tp_inst;
+        },
+
+        //########################################################################
+        // add our sliders to the calendar
+        //########################################################################
+        _addTimePicker: function (dp_inst) {
+            var currDT = (this.$altInput && this._defaults.altFieldTimeOnly) ?
+				this.$input.val() + ' ' + this.$altInput.val() :
+				this.$input.val();
+
+            this.timeDefined = this._parseTime(currDT);
+            this._limitMinMaxDateTime(dp_inst, false);
+            this._injectTimePicker();
+        },
+
+        //########################################################################
+        // parse the time string from input value or _setTime
+        //########################################################################
+        _parseTime: function (timeString, withDate) {
+            var regstr = this._defaults.timeFormat.toString()
+				.replace(/h{1,2}/ig, '(\\d?\\d)')
+				.replace(/m{1,2}/ig, '(\\d?\\d)')
+				.replace(/s{1,2}/ig, '(\\d?\\d)')
+				.replace(/l{1}/ig, '(\\d?\\d?\\d)')
+				.replace(/t{1,2}/ig, this._getPatternAmpm())
+				.replace(/z{1}/ig, '(z|[-+]\\d\\d:?\\d\\d)?')
+				.replace(/\s/g, '\\s?') + this._defaults.timeSuffix + '$',
+			order = this._getFormatPositions(),
+			ampm = '',
+			treg;
+
+            if (!this.inst) this.inst = $.datepicker._getInst(this.$input[0]);
+
+            if (withDate || !this._defaults.timeOnly) {
+                // the time should come after x number of characters and a space.
+                // x = at least the length of text specified by the date format
+                var dp_dateFormat = $.datepicker._get(this.inst, 'dateFormat');
+                // escape special regex characters in the seperator
+                var specials = new RegExp("[.*+?|()\\[\\]{}\\\\]", "g");
+                regstr = '^.{' + dp_dateFormat.length + ',}?' + this._defaults.separator.replace(specials, "\\$&") + regstr;
+            }
+
+            treg = timeString.match(new RegExp(regstr, 'i'));
+
+            if (treg) {
+                if (order.t !== -1) {
+                    if (treg[order.t] === undefined || treg[order.t].length === 0) {
+                        ampm = '';
+                        this.ampm = '';
+                    } else {
+                        ampm = $.inArray(treg[order.t].toUpperCase(), this.amNames) !== -1 ? 'AM' : 'PM';
+                        this.ampm = this._defaults[ampm == 'AM' ? 'amNames' : 'pmNames'][0];
+                    }
+                }
+
+                if (order.h !== -1) {
+                    if (ampm == 'AM' && treg[order.h] == '12')
+                        this.hour = 0; // 12am = 0 hour
+                    else if (ampm == 'PM' && treg[order.h] != '12')
+                        this.hour = (parseFloat(treg[order.h]) + 12).toFixed(0); // 12pm = 12 hour, any other pm = hour + 12
+                    else this.hour = Number(treg[order.h]);
+                }
+
+                if (order.m !== -1) this.minute = Number(treg[order.m]);
+                if (order.s !== -1) this.second = Number(treg[order.s]);
+                if (order.l !== -1) this.millisec = Number(treg[order.l]);
+                if (order.z !== -1 && treg[order.z] !== undefined) {
+                    var tz = treg[order.z].toUpperCase();
+                    switch (tz.length) {
+                        case 1: // Z
+                            tz = this._defaults.timezoneIso8609 ? 'Z' : '+0000';
+                            break;
+                        case 5: // +hhmm
+                            if (this._defaults.timezoneIso8609)
+                                tz = tz.substring(1) == '0000'
+						   ? 'Z'
+						   : tz.substring(0, 3) + ':' + tz.substring(3);
+                            break;
+                        case 6: // +hh:mm
+                            if (!this._defaults.timezoneIso8609)
+                                tz = tz == 'Z' || tz.substring(1) == '00:00'
+						   ? '+0000'
+						   : tz.replace(/:/, '');
+                            else if (tz.substring(1) == '00:00')
+                                tz = 'Z';
+                            break;
+                    }
+                    this.timezone = tz;
+                }
+
+                return true;
+
+            }
+            return false;
+        },
+
+        //########################################################################
+        // pattern for standard and localized AM/PM markers
+        //########################################################################
+        _getPatternAmpm: function () {
+            var markers = [],
+			o = this._defaults;
+            if (o.amNames)
+                $.merge(markers, o.amNames);
+            if (o.pmNames)
+                $.merge(markers, o.pmNames);
+            markers = $.map(markers, function (val) { return val.replace(/[.*+?|()\[\]{}\\]/g, '\\$&'); });
+            return '(' + markers.join('|') + ')?';
+        },
+
+        //########################################################################
+        // figure out position of time elements.. cause js cant do named captures
+        //########################################################################
+        _getFormatPositions: function () {
+            var finds = this._defaults.timeFormat.toLowerCase().match(/(h{1,2}|m{1,2}|s{1,2}|l{1}|t{1,2}|z)/g),
+			orders = { h: -1, m: -1, s: -1, l: -1, t: -1, z: -1 };
+
+            if (finds)
+                for (var i = 0; i < finds.length; i++)
+                    if (orders[finds[i].toString().charAt(0)] == -1)
+                        orders[finds[i].toString().charAt(0)] = i + 1;
+
+            return orders;
+        },
+
+        //########################################################################
+        // generate and inject html for timepicker into ui datepicker
+        //########################################################################
+        _injectTimePicker: function () {
+            var $dp = this.inst.dpDiv,
+			o = this._defaults,
+			tp_inst = this,
+            // Added by Peter Medeiros:
+            // - Figure out what the hour/minute/second max should be based on the step values.
+            // - Example: if stepMinute is 15, then minMax is 45.
+			hourMax = parseInt((o.hourMax - ((o.hourMax - o.hourMin) % o.stepHour)), 10),
+			minMax = parseInt((o.minuteMax - ((o.minuteMax - o.minuteMin) % o.stepMinute)), 10),
+			secMax = parseInt((o.secondMax - ((o.secondMax - o.secondMin) % o.stepSecond)), 10),
+			millisecMax = parseInt((o.millisecMax - ((o.millisecMax - o.millisecMin) % o.stepMillisec)), 10),
+			dp_id = this.inst.id.toString().replace(/([^A-Za-z0-9_])/g, '');
+
+            // Prevent displaying twice
+            //if ($dp.find("div#ui-timepicker-div-"+ dp_id).length === 0) {
+            if ($dp.find("div#ui-timepicker-div-" + dp_id).length === 0 && o.showTimepicker) {
+                var noDisplay = ' style="display:none;"',
+				html = '<div class="ui-timepicker-div" id="ui-timepicker-div-' + dp_id + '"><dl>' +
+						'<dt class="ui_tpicker_time_label" id="ui_tpicker_time_label_' + dp_id + '"' +
+						((o.showTime) ? '' : noDisplay) + '>' + o.timeText + '</dt>' +
+						'<dd class="ui_tpicker_time" id="ui_tpicker_time_' + dp_id + '"' +
+						((o.showTime) ? '' : noDisplay) + '></dd>' +
+						'<dt class="ui_tpicker_hour_label" id="ui_tpicker_hour_label_' + dp_id + '"' +
+						((o.showHour) ? '' : noDisplay) + '>' + o.hourText + '</dt>',
+				hourGridSize = 0,
+				minuteGridSize = 0,
+				secondGridSize = 0,
+				millisecGridSize = 0,
+				size = null;
+
+                // Hours
+                html += '<dd class="ui_tpicker_hour"><div id="ui_tpicker_hour_' + dp_id + '"' +
+						((o.showHour) ? '' : noDisplay) + '></div>';
+                if (o.showHour && o.hourGrid > 0) {
+                    html += '<div style="padding-left: 1px"><table class="ui-tpicker-grid-label"><tr>';
+
+                    for (var h = o.hourMin; h <= hourMax; h += parseInt(o.hourGrid, 10)) {
+                        hourGridSize++;
+                        var tmph = (o.ampm && h > 12) ? h - 12 : h;
+                        if (tmph < 10) tmph = '0' + tmph;
+                        if (o.ampm) {
+                            if (h == 0) tmph = 12 + 'a';
+                            else if (h < 12) tmph += 'a';
+                            else tmph += 'p';
+                        }
+                        html += '<td>' + tmph + '</td>';
+                    }
+
+                    html += '</tr></table></div>';
+                }
+                html += '</dd>';
+
+                // Minutes
+                html += '<dt class="ui_tpicker_minute_label" id="ui_tpicker_minute_label_' + dp_id + '"' +
+					((o.showMinute) ? '' : noDisplay) + '>' + o.minuteText + '</dt>' +
+					'<dd class="ui_tpicker_minute"><div id="ui_tpicker_minute_' + dp_id + '"' +
+							((o.showMinute) ? '' : noDisplay) + '></div>';
+
+                if (o.showMinute && o.minuteGrid > 0) {
+                    html += '<div style="padding-left: 1px"><table class="ui-tpicker-grid-label"><tr>';
+
+                    for (var m = o.minuteMin; m <= minMax; m += parseInt(o.minuteGrid, 10)) {
+                        minuteGridSize++;
+                        html += '<td>' + ((m < 10) ? '0' : '') + m + '</td>';
+                    }
+
+                    html += '</tr></table></div>';
+                }
+                html += '</dd>';
+
+                // Seconds
+                html += '<dt class="ui_tpicker_second_label" id="ui_tpicker_second_label_' + dp_id + '"' +
+					((o.showSecond) ? '' : noDisplay) + '>' + o.secondText + '</dt>' +
+					'<dd class="ui_tpicker_second"><div id="ui_tpicker_second_' + dp_id + '"' +
+							((o.showSecond) ? '' : noDisplay) + '></div>';
+
+                if (o.showSecond && o.secondGrid > 0) {
+                    html += '<div style="padding-left: 1px"><table><tr>';
+
+                    for (var s = o.secondMin; s <= secMax; s += parseInt(o.secondGrid, 10)) {
+                        secondGridSize++;
+                        html += '<td>' + ((s < 10) ? '0' : '') + s + '</td>';
+                    }
+
+                    html += '</tr></table></div>';
+                }
+                html += '</dd>';
+
+                // Milliseconds
+                html += '<dt class="ui_tpicker_millisec_label" id="ui_tpicker_millisec_label_' + dp_id + '"' +
+					((o.showMillisec) ? '' : noDisplay) + '>' + o.millisecText + '</dt>' +
+					'<dd class="ui_tpicker_millisec"><div id="ui_tpicker_millisec_' + dp_id + '"' +
+							((o.showMillisec) ? '' : noDisplay) + '></div>';
+
+                if (o.showMillisec && o.millisecGrid > 0) {
+                    html += '<div style="padding-left: 1px"><table><tr>';
+
+                    for (var l = o.millisecMin; l <= millisecMax; l += parseInt(o.millisecGrid, 10)) {
+                        millisecGridSize++;
+                        html += '<td>' + ((l < 10) ? '0' : '') + l + '</td>';
+                    }
+
+                    html += '</tr></table></div>';
+                }
+                html += '</dd>';
+
+                // Timezone
+                html += '<dt class="ui_tpicker_timezone_label" id="ui_tpicker_timezone_label_' + dp_id + '"' +
+					((o.showTimezone) ? '' : noDisplay) + '>' + o.timezoneText + '</dt>';
+                html += '<dd class="ui_tpicker_timezone" id="ui_tpicker_timezone_' + dp_id + '"' +
+							((o.showTimezone) ? '' : noDisplay) + '></dd>';
+
+                html += '</dl></div>';
+                $tp = $(html);
+
+                // if we only want time picker...
+                if (o.timeOnly === true) {
+                    $tp.prepend(
+					'<div class="ui-widget-header ui-helper-clearfix ui-corner-all">' +
+						'<div class="ui-datepicker-title">' + o.timeOnlyTitle + '</div>' +
+					'</div>');
+                    $dp.find('.ui-datepicker-header, .ui-datepicker-calendar').hide();
+                }
+
+                this.hour_slider = $tp.find('#ui_tpicker_hour_' + dp_id).slider({
+                    orientation: "horizontal",
+                    value: this.hour,
+                    min: o.hourMin,
+                    max: hourMax,
+                    step: o.stepHour,
+                    slide: function (event, ui) {
+                        tp_inst.hour_slider.slider("option", "value", ui.value);
+                        tp_inst._onTimeChange();
+                    }
+                });
+
+
+                // Updated by Peter Medeiros:
+                // - Pass in Event and UI instance into slide function
+                this.minute_slider = $tp.find('#ui_tpicker_minute_' + dp_id).slider({
+                    orientation: "horizontal",
+                    value: this.minute,
+                    min: o.minuteMin,
+                    max: minMax,
+                    step: o.stepMinute,
+                    slide: function (event, ui) {
+                        tp_inst.minute_slider.slider("option", "value", ui.value);
+                        tp_inst._onTimeChange();
+                    }
+                });
+
+                this.second_slider = $tp.find('#ui_tpicker_second_' + dp_id).slider({
+                    orientation: "horizontal",
+                    value: this.second,
+                    min: o.secondMin,
+                    max: secMax,
+                    step: o.stepSecond,
+                    slide: function (event, ui) {
+                        tp_inst.second_slider.slider("option", "value", ui.value);
+                        tp_inst._onTimeChange();
+                    }
+                });
+
+                this.millisec_slider = $tp.find('#ui_tpicker_millisec_' + dp_id).slider({
+                    orientation: "horizontal",
+                    value: this.millisec,
+                    min: o.millisecMin,
+                    max: millisecMax,
+                    step: o.stepMillisec,
+                    slide: function (event, ui) {
+                        tp_inst.millisec_slider.slider("option", "value", ui.value);
+                        tp_inst._onTimeChange();
+                    }
+                });
+
+                this.timezone_select = $tp.find('#ui_tpicker_timezone_' + dp_id).append('<select></select>').find("select");
+                $.fn.append.apply(this.timezone_select,
+				$.map(o.timezoneList, function (val, idx) {
+				    return $("<option />")
+						.val(typeof val == "object" ? val.value : val)
+						.text(typeof val == "object" ? val.label : val);
+				})
+			);
+                this.timezone_select.val((typeof this.timezone != "undefined" && this.timezone != null && this.timezone != "") ? this.timezone : o.timezone);
+                this.timezone_select.change(function () {
+                    tp_inst._onTimeChange();
+                });
+
+                // Add grid functionality
+                if (o.showHour && o.hourGrid > 0) {
+                    size = 100 * hourGridSize * o.hourGrid / (hourMax - o.hourMin);
+
+                    $tp.find(".ui_tpicker_hour table").css({
+                        width: size + "%",
+                        marginLeft: (size / (-2 * hourGridSize)) + "%",
+                        borderCollapse: 'collapse'
+                    }).find("td").each(function (index) {
+                        $(this).click(function () {
+                            var h = $(this).html();
+                            if (o.ampm) {
+                                var ap = h.substring(2).toLowerCase(),
+								aph = parseInt(h.substring(0, 2), 10);
+                                if (ap == 'a') {
+                                    if (aph == 12) h = 0;
+                                    else h = aph;
+                                } else if (aph == 12) h = 12;
+                                else h = aph + 12;
+                            }
+                            tp_inst.hour_slider.slider("option", "value", h);
+                            tp_inst._onTimeChange();
+                            tp_inst._onSelectHandler();
+                        }).css({
+                            cursor: 'pointer',
+                            width: (100 / hourGridSize) + '%',
+                            textAlign: 'center',
+                            overflow: 'hidden'
+                        });
+                    });
+                }
+
+                if (o.showMinute && o.minuteGrid > 0) {
+                    size = 100 * minuteGridSize * o.minuteGrid / (minMax - o.minuteMin);
+                    $tp.find(".ui_tpicker_minute table").css({
+                        width: size + "%",
+                        marginLeft: (size / (-2 * minuteGridSize)) + "%",
+                        borderCollapse: 'collapse'
+                    }).find("td").each(function (index) {
+                        $(this).click(function () {
+                            tp_inst.minute_slider.slider("option", "value", $(this).html());
+                            tp_inst._onTimeChange();
+                            tp_inst._onSelectHandler();
+                        }).css({
+                            cursor: 'pointer',
+                            width: (100 / minuteGridSize) + '%',
+                            textAlign: 'center',
+                            overflow: 'hidden'
+                        });
+                    });
+                }
+
+                if (o.showSecond && o.secondGrid > 0) {
+                    $tp.find(".ui_tpicker_second table").css({
+                        width: size + "%",
+                        marginLeft: (size / (-2 * secondGridSize)) + "%",
+                        borderCollapse: 'collapse'
+                    }).find("td").each(function (index) {
+                        $(this).click(function () {
+                            tp_inst.second_slider.slider("option", "value", $(this).html());
+                            tp_inst._onTimeChange();
+                            tp_inst._onSelectHandler();
+                        }).css({
+                            cursor: 'pointer',
+                            width: (100 / secondGridSize) + '%',
+                            textAlign: 'center',
+                            overflow: 'hidden'
+                        });
+                    });
+                }
+
+                if (o.showMillisec && o.millisecGrid > 0) {
+                    $tp.find(".ui_tpicker_millisec table").css({
+                        width: size + "%",
+                        marginLeft: (size / (-2 * millisecGridSize)) + "%",
+                        borderCollapse: 'collapse'
+                    }).find("td").each(function (index) {
+                        $(this).click(function () {
+                            tp_inst.millisec_slider.slider("option", "value", $(this).html());
+                            tp_inst._onTimeChange();
+                            tp_inst._onSelectHandler();
+                        }).css({
+                            cursor: 'pointer',
+                            width: (100 / millisecGridSize) + '%',
+                            textAlign: 'center',
+                            overflow: 'hidden'
+                        });
+                    });
+                }
+
+                var $buttonPanel = $dp.find('.ui-datepicker-buttonpane');
+                if ($buttonPanel.length) $buttonPanel.before($tp);
+                else $dp.append($tp);
+
+                this.$timeObj = $tp.find('#ui_tpicker_time_' + dp_id);
+
+                if (this.inst !== null) {
+                    var timeDefined = this.timeDefined;
+                    this._onTimeChange();
+                    this.timeDefined = timeDefined;
+                }
+
+                //Emulate datepicker onSelect behavior. Call on slidestop.
+                var onSelectDelegate = function () {
+                    tp_inst._onSelectHandler();
+                };
+                this.hour_slider.bind('slidestop', onSelectDelegate);
+                this.minute_slider.bind('slidestop', onSelectDelegate);
+                this.second_slider.bind('slidestop', onSelectDelegate);
+                this.millisec_slider.bind('slidestop', onSelectDelegate);
+
+                // slideAccess integration: http://trentrichardson.com/2011/11/11/jquery-ui-sliders-and-touch-accessibility/
+                if (this._defaults.addSliderAccess) {
+                    var sliderAccessArgs = this._defaults.sliderAccessArgs;
+                    setTimeout(function () { // fix for inline mode
+                        if ($tp.find('.ui-slider-access').length == 0) {
+                            $tp.find('.ui-slider:visible').sliderAccess(sliderAccessArgs);
+
+                            // fix any grids since sliders are shorter
+                            var sliderAccessWidth = $tp.find('.ui-slider-access:eq(0)').outerWidth(true);
+                            if (sliderAccessWidth) {
+                                $tp.find('table:visible').each(function () {
+                                    var $g = $(this),
+									oldWidth = $g.outerWidth(),
+									oldMarginLeft = $g.css('marginLeft').toString().replace('%', ''),
+									newWidth = oldWidth - sliderAccessWidth,
+									newMarginLeft = ((oldMarginLeft * newWidth) / oldWidth) + '%';
+
+                                    $g.css({ width: newWidth, marginLeft: newMarginLeft });
+                                });
+                            }
+                        }
+                    }, 0);
+                }
+                // end slideAccess integration
+
+            }
+        },
+
+        //########################################################################
+        // This function tries to limit the ability to go outside the
+        // min/max date range
+        //########################################################################
+        _limitMinMaxDateTime: function (dp_inst, adjustSliders) {
+            var o = this._defaults,
+			dp_date = new Date(dp_inst.selectedYear, dp_inst.selectedMonth, dp_inst.selectedDay);
+
+            if (!this._defaults.showTimepicker) return; // No time so nothing to check here
+
+            if ($.datepicker._get(dp_inst, 'minDateTime') !== null && $.datepicker._get(dp_inst, 'minDateTime') !== undefined && dp_date) {
+                var minDateTime = $.datepicker._get(dp_inst, 'minDateTime'),
+				minDateTimeDate = new Date(minDateTime.getFullYear(), minDateTime.getMonth(), minDateTime.getDate(), 0, 0, 0, 0);
+
+                if (this.hourMinOriginal === null || this.minuteMinOriginal === null || this.secondMinOriginal === null || this.millisecMinOriginal === null) {
+                    this.hourMinOriginal = o.hourMin;
+                    this.minuteMinOriginal = o.minuteMin;
+                    this.secondMinOriginal = o.secondMin;
+                    this.millisecMinOriginal = o.millisecMin;
+                }
+
+                if (dp_inst.settings.timeOnly || minDateTimeDate.getTime() == dp_date.getTime()) {
+                    this._defaults.hourMin = minDateTime.getHours();
+                    if (this.hour <= this._defaults.hourMin) {
+                        this.hour = this._defaults.hourMin;
+                        this._defaults.minuteMin = minDateTime.getMinutes();
+                        if (this.minute <= this._defaults.minuteMin) {
+                            this.minute = this._defaults.minuteMin;
+                            this._defaults.secondMin = minDateTime.getSeconds();
+                        } else if (this.second <= this._defaults.secondMin) {
+                            this.second = this._defaults.secondMin;
+                            this._defaults.millisecMin = minDateTime.getMilliseconds();
+                        } else {
+                            if (this.millisec < this._defaults.millisecMin)
+                                this.millisec = this._defaults.millisecMin;
+                            this._defaults.millisecMin = this.millisecMinOriginal;
+                        }
+                    } else {
+                        this._defaults.minuteMin = this.minuteMinOriginal;
+                        this._defaults.secondMin = this.secondMinOriginal;
+                        this._defaults.millisecMin = this.millisecMinOriginal;
+                    }
+                } else {
+                    this._defaults.hourMin = this.hourMinOriginal;
+                    this._defaults.minuteMin = this.minuteMinOriginal;
+                    this._defaults.secondMin = this.secondMinOriginal;
+                    this._defaults.millisecMin = this.millisecMinOriginal;
+                }
+            }
+
+            if ($.datepicker._get(dp_inst, 'maxDateTime') !== null && $.datepicker._get(dp_inst, 'maxDateTime') !== undefined && dp_date) {
+                var maxDateTime = $.datepicker._get(dp_inst, 'maxDateTime'),
+				maxDateTimeDate = new Date(maxDateTime.getFullYear(), maxDateTime.getMonth(), maxDateTime.getDate(), 0, 0, 0, 0);
+
+                if (this.hourMaxOriginal === null || this.minuteMaxOriginal === null || this.secondMaxOriginal === null) {
+                    this.hourMaxOriginal = o.hourMax;
+                    this.minuteMaxOriginal = o.minuteMax;
+                    this.secondMaxOriginal = o.secondMax;
+                    this.millisecMaxOriginal = o.millisecMax;
+                }
+
+                if (dp_inst.settings.timeOnly || maxDateTimeDate.getTime() == dp_date.getTime()) {
+                    this._defaults.hourMax = maxDateTime.getHours();
+                    if (this.hour >= this._defaults.hourMax) {
+                        this.hour = this._defaults.hourMax;
+                        this._defaults.minuteMax = maxDateTime.getMinutes();
+                        if (this.minute >= this._defaults.minuteMax) {
+                            this.minute = this._defaults.minuteMax;
+                            this._defaults.secondMax = maxDateTime.getSeconds();
+                        } else if (this.second >= this._defaults.secondMax) {
+                            this.second = this._defaults.secondMax;
+                            this._defaults.millisecMax = maxDateTime.getMilliseconds();
+                        } else {
+                            if (this.millisec > this._defaults.millisecMax) this.millisec = this._defaults.millisecMax;
+                            this._defaults.millisecMax = this.millisecMaxOriginal;
+                        }
+                    } else {
+                        this._defaults.minuteMax = this.minuteMaxOriginal;
+                        this._defaults.secondMax = this.secondMaxOriginal;
+                        this._defaults.millisecMax = this.millisecMaxOriginal;
+                    }
+                } else {
+                    this._defaults.hourMax = this.hourMaxOriginal;
+                    this._defaults.minuteMax = this.minuteMaxOriginal;
+                    this._defaults.secondMax = this.secondMaxOriginal;
+                    this._defaults.millisecMax = this.millisecMaxOriginal;
+                }
+            }
+
+            if (adjustSliders !== undefined && adjustSliders === true) {
+                var hourMax = parseInt((this._defaults.hourMax - ((this._defaults.hourMax - this._defaults.hourMin) % this._defaults.stepHour)), 10),
+                minMax = parseInt((this._defaults.minuteMax - ((this._defaults.minuteMax - this._defaults.minuteMin) % this._defaults.stepMinute)), 10),
+                secMax = parseInt((this._defaults.secondMax - ((this._defaults.secondMax - this._defaults.secondMin) % this._defaults.stepSecond)), 10),
+				millisecMax = parseInt((this._defaults.millisecMax - ((this._defaults.millisecMax - this._defaults.millisecMin) % this._defaults.stepMillisec)), 10);
+
+                if (this.hour_slider)
+                    this.hour_slider.slider("option", { min: this._defaults.hourMin, max: hourMax }).slider('value', this.hour);
+                if (this.minute_slider)
+                    this.minute_slider.slider("option", { min: this._defaults.minuteMin, max: minMax }).slider('value', this.minute);
+                if (this.second_slider)
+                    this.second_slider.slider("option", { min: this._defaults.secondMin, max: secMax }).slider('value', this.second);
+                if (this.millisec_slider)
+                    this.millisec_slider.slider("option", { min: this._defaults.millisecMin, max: millisecMax }).slider('value', this.millisec);
+            }
+
+        },
+
+
+        //########################################################################
+        // when a slider moves, set the internal time...
+        // on time change is also called when the time is updated in the text field
+        //########################################################################
+        _onTimeChange: function () {
+            var hour = (this.hour_slider) ? this.hour_slider.slider('value') : false,
+			minute = (this.minute_slider) ? this.minute_slider.slider('value') : false,
+			second = (this.second_slider) ? this.second_slider.slider('value') : false,
+			millisec = (this.millisec_slider) ? this.millisec_slider.slider('value') : false,
+			timezone = (this.timezone_select) ? this.timezone_select.val() : false,
+			o = this._defaults;
+
+            if (typeof (hour) == 'object') hour = false;
+            if (typeof (minute) == 'object') minute = false;
+            if (typeof (second) == 'object') second = false;
+            if (typeof (millisec) == 'object') millisec = false;
+            if (typeof (timezone) == 'object') timezone = false;
+
+            if (hour !== false) hour = parseInt(hour, 10);
+            if (minute !== false) minute = parseInt(minute, 10);
+            if (second !== false) second = parseInt(second, 10);
+            if (millisec !== false) millisec = parseInt(millisec, 10);
+
+            var ampm = o[hour < 12 ? 'amNames' : 'pmNames'][0];
+
+            // If the update was done in the input field, the input field should not be updated.
+            // If the update was done using the sliders, update the input field.
+            var hasChanged = (hour != this.hour || minute != this.minute
+				|| second != this.second || millisec != this.millisec
+				|| (this.ampm.length > 0
+				    && (hour < 12) != ($.inArray(this.ampm.toUpperCase(), this.amNames) !== -1))
+				|| timezone != this.timezone);
+
+            if (hasChanged) {
+
+                if (hour !== false) this.hour = hour;
+                if (minute !== false) this.minute = minute;
+                if (second !== false) this.second = second;
+                if (millisec !== false) this.millisec = millisec;
+                if (timezone !== false) this.timezone = timezone;
+
+                if (!this.inst) this.inst = $.datepicker._getInst(this.$input[0]);
+
+                this._limitMinMaxDateTime(this.inst, true);
+            }
+            if (o.ampm) this.ampm = ampm;
+
+            //this._formatTime();
+            this.formattedTime = $.datepicker.formatTime(this._defaults.timeFormat, this, this._defaults);
+            if (this.$timeObj) this.$timeObj.text(this.formattedTime + o.timeSuffix);
+            this.timeDefined = true;
+            if (hasChanged) this._updateDateTime();
+        },
+
+        //########################################################################
+        // call custom onSelect.
+        // bind to sliders slidestop, and grid click.
+        //########################################################################
+        _onSelectHandler: function () {
+            var onSelect = this._defaults.onSelect;
+            var inputEl = this.$input ? this.$input[0] : null;
+            if (onSelect && inputEl) {
+                onSelect.apply(inputEl, [this.formattedDateTime, this]);
+            }
+        },
+
+        //########################################################################
+        // left for any backwards compatibility
+        //########################################################################
+        _formatTime: function (time, format) {
+            time = time || { hour: this.hour, minute: this.minute, second: this.second, millisec: this.millisec, ampm: this.ampm, timezone: this.timezone };
+            var tmptime = (format || this._defaults.timeFormat).toString();
+
+            tmptime = $.datepicker.formatTime(tmptime, time, this._defaults);
+
+            if (arguments.length) return tmptime;
+            else this.formattedTime = tmptime;
+        },
+
+        //########################################################################
+        // update our input with the new date time..
+        //########################################################################
+        _updateDateTime: function (dp_inst) {
+            dp_inst = this.inst || dp_inst;
+            var dt = $.datepicker._daylightSavingAdjust(new Date(dp_inst.selectedYear, dp_inst.selectedMonth, dp_inst.selectedDay)),
+			dateFmt = $.datepicker._get(dp_inst, 'dateFormat'),
+			formatCfg = $.datepicker._getFormatConfig(dp_inst),
+			timeAvailable = dt !== null && this.timeDefined;
+            this.formattedDate = $.datepicker.formatDate(dateFmt, (dt === null ? new Date() : dt), formatCfg);
+            var formattedDateTime = this.formattedDate;
+            if (dp_inst.lastVal !== undefined && (dp_inst.lastVal.length > 0 && this.$input.val().length === 0))
+                return;
+
+            if (this._defaults.timeOnly === true) {
+                formattedDateTime = this.formattedTime;
+            } else if (this._defaults.timeOnly !== true && (this._defaults.alwaysSetTime || timeAvailable)) {
+                formattedDateTime += this._defaults.separator + this.formattedTime + this._defaults.timeSuffix;
+            }
+
+            this.formattedDateTime = formattedDateTime;
+
+            if (!this._defaults.showTimepicker) {
+                this.$input.val(this.formattedDate);
+            } else if (this.$altInput && this._defaults.altFieldTimeOnly === true) {
+                this.$altInput.val(this.formattedTime);
+                this.$input.val(this.formattedDate);
+            } else if (this.$altInput) {
+                this.$altInput.val(formattedDateTime);
+                this.$input.val(formattedDateTime);
+            } else {
+                this.$input.val(formattedDateTime);
+            }
+
+            this.$input.trigger("change");
+        }
+
+    });
+
+    $.fn.extend({
+        //########################################################################
+        // shorthand just to use timepicker..
+        //########################################################################
+        timepicker: function (o) {
+            o = o || {};
+            var tmp_args = arguments;
+
+            if (typeof o == 'object') tmp_args[0] = $.extend(o, { timeOnly: true });
+
+            return $(this).each(function () {
+                $.fn.datetimepicker.apply($(this), tmp_args);
+            });
+        },
+
+        //########################################################################
+        // extend timepicker to datepicker
+        //########################################################################
+        datetimepicker: function (o) {
+            o = o || {};
+            tmp_args = arguments;
+
+            if (typeof (o) == 'string') {
+                if (o == 'getDate')
+                    return $.fn.datepicker.apply($(this[0]), tmp_args);
+                else
+                    return this.each(function () {
+                        var $t = $(this);
+                        $t.datepicker.apply($t, tmp_args);
+                    });
+            }
+            else
+                return this.each(function () {
+                    var $t = $(this);
+                    $t.datepicker($.timepicker._newInst($t, o)._defaults);
+                });
+        }
+    });
+
+    //########################################################################
+    // format the time all pretty...
+    // format = string format of the time
+    // time = a {}, not a Date() for timezones
+    // options = essentially the regional[].. amNames, pmNames, ampm
+    //########################################################################
+    $.datepicker.formatTime = function (format, time, options) {
+        options = options || {};
+        options = $.extend($.timepicker._defaults, options);
+        time = $.extend({ hour: 0, minute: 0, second: 0, millisec: 0, timezone: '+0000' }, time);
+
+        var tmptime = format;
+        var ampmName = options['amNames'][0];
+
+        var hour = parseInt(time.hour, 10);
+        if (options.ampm) {
+            if (hour > 11) {
+                ampmName = options['pmNames'][0];
+                if (hour > 12)
+                    hour = hour % 12;
+            }
+            if (hour === 0)
+                hour = 12;
+        }
+        tmptime = tmptime.replace(/(?:hh?|mm?|ss?|[tT]{1,2}|[lz])/g, function (match) {
+            switch (match.toLowerCase()) {
+                case 'hh': return ('0' + hour).slice(-2);
+                case 'h': return hour;
+                case 'mm': return ('0' + time.minute).slice(-2);
+                case 'm': return time.minute;
+                case 'ss': return ('0' + time.second).slice(-2);
+                case 's': return time.second;
+                case 'l': return ('00' + time.millisec).slice(-3);
+                case 'z': return time.timezone;
+                case 't': case 'tt':
+                    if (options.ampm) {
+                        if (match.length == 1)
+                            ampmName = ampmName.charAt(0);
+                        return match.charAt(0) == 'T' ? ampmName.toUpperCase() : ampmName.toLowerCase();
+                    }
+                    return '';
+            }
+        });
+
+        tmptime = $.trim(tmptime);
+        return tmptime;
+    };
+
+    //########################################################################
+    // the bad hack :/ override datepicker so it doesnt close on select
+    // inspired: http://stackoverflow.com/questions/1252512/jquery-datepicker-prevent-closing-picker-when-clicking-a-date/1762378#1762378
+    //########################################################################
+    $.datepicker._base_selectDate = $.datepicker._selectDate;
+    $.datepicker._selectDate = function (id, dateStr) {
+        var inst = this._getInst($(id)[0]),
+		tp_inst = this._get(inst, 'timepicker');
+
+        if (tp_inst) {
+            tp_inst._limitMinMaxDateTime(inst, true);
+            inst.inline = inst.stay_open = true;
+            //This way the onSelect handler called from calendarpicker get the full dateTime
+            this._base_selectDate(id, dateStr);
+            inst.inline = inst.stay_open = false;
+            this._notifyChange(inst);
+            this._updateDatepicker(inst);
+        }
+        else this._base_selectDate(id, dateStr);
+    };
+
+    //#############################################################################################
+    // second bad hack :/ override datepicker so it triggers an event when changing the input field
+    // and does not redraw the datepicker on every selectDate event
+    //#############################################################################################
+    $.datepicker._base_updateDatepicker = $.datepicker._updateDatepicker;
+    $.datepicker._updateDatepicker = function (inst) {
+
+        // don't popup the datepicker if there is another instance already opened
+        var input = inst.input[0];
+        if ($.datepicker._curInst &&
+	   $.datepicker._curInst != inst &&
+	   $.datepicker._datepickerShowing &&
+	   $.datepicker._lastInput != input) {
+            return;
+        }
+
+        if (typeof (inst.stay_open) !== 'boolean' || inst.stay_open === false) {
+
+            this._base_updateDatepicker(inst);
+
+            // Reload the time control when changing something in the input text field.
+            var tp_inst = this._get(inst, 'timepicker');
+            if (tp_inst) tp_inst._addTimePicker(inst);
+        }
+    };
+
+    //#######################################################################################
+    // third bad hack :/ override datepicker so it allows spaces and colon in the input field
+    //#######################################################################################
+    $.datepicker._base_doKeyPress = $.datepicker._doKeyPress;
+    $.datepicker._doKeyPress = function (event) {
+        var inst = $.datepicker._getInst(event.target),
+		tp_inst = $.datepicker._get(inst, 'timepicker');
+
+        if (tp_inst) {
+            if ($.datepicker._get(inst, 'constrainInput')) {
+                var ampm = tp_inst._defaults.ampm,
+				dateChars = $.datepicker._possibleChars($.datepicker._get(inst, 'dateFormat')),
+				datetimeChars = tp_inst._defaults.timeFormat.toString()
+								.replace(/[hms]/g, '')
+								.replace(/TT/g, ampm ? 'APM' : '')
+								.replace(/Tt/g, ampm ? 'AaPpMm' : '')
+								.replace(/tT/g, ampm ? 'AaPpMm' : '')
+								.replace(/T/g, ampm ? 'AP' : '')
+								.replace(/tt/g, ampm ? 'apm' : '')
+								.replace(/t/g, ampm ? 'ap' : '') +
+								" " +
+								tp_inst._defaults.separator +
+								tp_inst._defaults.timeSuffix +
+								(tp_inst._defaults.showTimezone ? tp_inst._defaults.timezoneList.join('') : '') +
+								(tp_inst._defaults.amNames.join('')) +
+								(tp_inst._defaults.pmNames.join('')) +
+								dateChars,
+				chr = String.fromCharCode(event.charCode === undefined ? event.keyCode : event.charCode);
+                return event.ctrlKey || (chr < ' ' || !dateChars || datetimeChars.indexOf(chr) > -1);
+            }
+        }
+
+        return $.datepicker._base_doKeyPress(event);
+    };
+
+    //#######################################################################################
+    // Override key up event to sync manual input changes.
+    //#######################################################################################
+    $.datepicker._base_doKeyUp = $.datepicker._doKeyUp;
+    $.datepicker._doKeyUp = function (event) {
+        var inst = $.datepicker._getInst(event.target),
+		tp_inst = $.datepicker._get(inst, 'timepicker');
+
+        if (tp_inst) {
+            if (tp_inst._defaults.timeOnly && (inst.input.val() != inst.lastVal)) {
+                try {
+                    $.datepicker._updateDatepicker(inst);
+                }
+                catch (err) {
+                    $.datepicker.log(err);
+                }
+            }
+        }
+
+        return $.datepicker._base_doKeyUp(event);
+    };
+
+    //#######################################################################################
+    // override "Today" button to also grab the time.
+    //#######################################################################################
+    $.datepicker._base_gotoToday = $.datepicker._gotoToday;
+    $.datepicker._gotoToday = function (id) {
+        var inst = this._getInst($(id)[0]),
+		$dp = inst.dpDiv;
+        this._base_gotoToday(id);
+        var now = new Date();
+        var tp_inst = this._get(inst, 'timepicker');
+        if (tp_inst && tp_inst._defaults.showTimezone && tp_inst.timezone_select) {
+            var tzoffset = now.getTimezoneOffset(); // If +0100, returns -60
+            var tzsign = tzoffset > 0 ? '-' : '+';
+            tzoffset = Math.abs(tzoffset);
+            var tzmin = tzoffset % 60;
+            tzoffset = tzsign + ('0' + (tzoffset - tzmin) / 60).slice(-2) + ('0' + tzmin).slice(-2);
+            if (tp_inst._defaults.timezoneIso8609)
+                tzoffset = tzoffset.substring(0, 3) + ':' + tzoffset.substring(3);
+            tp_inst.timezone_select.val(tzoffset);
+        }
+        this._setTime(inst, now);
+        $('.ui-datepicker-today', $dp).click();
+    };
+
+    //#######################################################################################
+    // Disable & enable the Time in the datetimepicker
+    //#######################################################################################
+    $.datepicker._disableTimepickerDatepicker = function (target, date, withDate) {
+        var inst = this._getInst(target),
+	tp_inst = this._get(inst, 'timepicker');
+        $(target).datepicker('getDate'); // Init selected[Year|Month|Day]
+        if (tp_inst) {
+            tp_inst._defaults.showTimepicker = false;
+            tp_inst._updateDateTime(inst);
+        }
+    };
+
+    $.datepicker._enableTimepickerDatepicker = function (target, date, withDate) {
+        var inst = this._getInst(target),
+	tp_inst = this._get(inst, 'timepicker');
+        $(target).datepicker('getDate'); // Init selected[Year|Month|Day]
+        if (tp_inst) {
+            tp_inst._defaults.showTimepicker = true;
+            tp_inst._addTimePicker(inst); // Could be disabled on page load
+            tp_inst._updateDateTime(inst);
+        }
+    };
+
+    //#######################################################################################
+    // Create our own set time function
+    //#######################################################################################
+    $.datepicker._setTime = function (inst, date) {
+        var tp_inst = this._get(inst, 'timepicker');
+        if (tp_inst) {
+            var defaults = tp_inst._defaults,
+            // calling _setTime with no date sets time to defaults
+			hour = date ? date.getHours() : defaults.hour,
+			minute = date ? date.getMinutes() : defaults.minute,
+			second = date ? date.getSeconds() : defaults.second,
+			millisec = date ? date.getMilliseconds() : defaults.millisec;
+
+            //check if within min/max times..
+            if ((hour < defaults.hourMin || hour > defaults.hourMax) || (minute < defaults.minuteMin || minute > defaults.minuteMax) || (second < defaults.secondMin || second > defaults.secondMax) || (millisec < defaults.millisecMin || millisec > defaults.millisecMax)) {
+                hour = defaults.hourMin;
+                minute = defaults.minuteMin;
+                second = defaults.secondMin;
+                millisec = defaults.millisecMin;
+            }
+
+            tp_inst.hour = hour;
+            tp_inst.minute = minute;
+            tp_inst.second = second;
+            tp_inst.millisec = millisec;
+
+            if (tp_inst.hour_slider) tp_inst.hour_slider.slider('value', hour);
+            if (tp_inst.minute_slider) tp_inst.minute_slider.slider('value', minute);
+            if (tp_inst.second_slider) tp_inst.second_slider.slider('value', second);
+            if (tp_inst.millisec_slider) tp_inst.millisec_slider.slider('value', millisec);
+
+            tp_inst._onTimeChange();
+            tp_inst._updateDateTime(inst);
+        }
+    };
+
+    //#######################################################################################
+    // Create new public method to set only time, callable as $().datepicker('setTime', date)
+    //#######################################################################################
+    $.datepicker._setTimeDatepicker = function (target, date, withDate) {
+        var inst = this._getInst(target),
+		tp_inst = this._get(inst, 'timepicker');
+
+        if (tp_inst) {
+            this._setDateFromField(inst);
+            var tp_date;
+            if (date) {
+                if (typeof date == "string") {
+                    tp_inst._parseTime(date, withDate);
+                    tp_date = new Date();
+                    tp_date.setHours(tp_inst.hour, tp_inst.minute, tp_inst.second, tp_inst.millisec);
+                }
+                else tp_date = new Date(date.getTime());
+                if (tp_date.toString() == 'Invalid Date') tp_date = undefined;
+                this._setTime(inst, tp_date);
+            }
+        }
+
+    };
+
+    //#######################################################################################
+    // override setDate() to allow setting time too within Date object
+    //#######################################################################################
+    $.datepicker._base_setDateDatepicker = $.datepicker._setDateDatepicker;
+    $.datepicker._setDateDatepicker = function (target, date) {
+        var inst = this._getInst(target),
+	tp_date = (date instanceof Date) ? new Date(date.getTime()) : date;
+
+        this._updateDatepicker(inst);
+        this._base_setDateDatepicker.apply(this, arguments);
+        this._setTimeDatepicker(target, tp_date, true);
+    };
+
+    //#######################################################################################
+    // override getDate() to allow getting time too within Date object
+    //#######################################################################################
+    $.datepicker._base_getDateDatepicker = $.datepicker._getDateDatepicker;
+    $.datepicker._getDateDatepicker = function (target, noDefault) {
+        var inst = this._getInst(target),
+		tp_inst = this._get(inst, 'timepicker');
+
+        if (tp_inst) {
+            this._setDateFromField(inst, noDefault);
+            var date = this._getDate(inst);
+            if (date && tp_inst._parseTime($(target).val(), tp_inst.timeOnly)) date.setHours(tp_inst.hour, tp_inst.minute, tp_inst.second, tp_inst.millisec);
+            return date;
+        }
+        return this._base_getDateDatepicker(target, noDefault);
+    };
+
+    //#######################################################################################
+    // override parseDate() because UI 1.8.14 throws an error about "Extra characters"
+    // An option in datapicker to ignore extra format characters would be nicer.
+    //#######################################################################################
+    $.datepicker._base_parseDate = $.datepicker.parseDate;
+    $.datepicker.parseDate = function (format, value, settings) {
+        var date;
+        try {
+            date = this._base_parseDate(format, value, settings);
+        } catch (err) {
+            if (err.indexOf(":") >= 0) {
+                // Hack!  The error message ends with a colon, a space, and
+                // the "extra" characters.  We rely on that instead of
+                // attempting to perfectly reproduce the parsing algorithm.
+                date = this._base_parseDate(format, value.substring(0, value.length - (err.length - err.indexOf(':') - 2)), settings);
+            } else {
+                // The underlying error was not related to the time
+                throw err;
+            }
+        }
+        return date;
+    };
+
+    //#######################################################################################
+    // override formatDate to set date with time to the input
+    //#######################################################################################
+    $.datepicker._base_formatDate = $.datepicker._formatDate;
+    $.datepicker._formatDate = function (inst, day, month, year) {
+        var tp_inst = this._get(inst, 'timepicker');
+        if (tp_inst) {
+            tp_inst._updateDateTime(inst);
+            return tp_inst.$input.val();
+        }
+        return this._base_formatDate(inst);
+    };
+
+    //#######################################################################################
+    // override options setter to add time to maxDate(Time) and minDate(Time). MaxDate
+    //#######################################################################################
+    $.datepicker._base_optionDatepicker = $.datepicker._optionDatepicker;
+    $.datepicker._optionDatepicker = function (target, name, value) {
+        var inst = this._getInst(target),
+		tp_inst = this._get(inst, 'timepicker');
+        if (tp_inst) {
+            var min = null, max = null, onselect = null;
+            if (typeof name == 'string') { // if min/max was set with the string
+                if (name === 'minDate' || name === 'minDateTime')
+                    min = value;
+                else if (name === 'maxDate' || name === 'maxDateTime')
+                    max = value;
+                else if (name === 'onSelect')
+                    onselect = value;
+            } else if (typeof name == 'object') { //if min/max was set with the JSON
+                if (name.minDate)
+                    min = name.minDate;
+                else if (name.minDateTime)
+                    min = name.minDateTime;
+                else if (name.maxDate)
+                    max = name.maxDate;
+                else if (name.maxDateTime)
+                    max = name.maxDateTime;
+            }
+            if (min) { //if min was set
+                if (min == 0)
+                    min = new Date();
+                else
+                    min = new Date(min);
+
+                tp_inst._defaults.minDate = min;
+                tp_inst._defaults.minDateTime = min;
+            } else if (max) { //if max was set
+                if (max == 0)
+                    max = new Date();
+                else
+                    max = new Date(max);
+                tp_inst._defaults.maxDate = max;
+                tp_inst._defaults.maxDateTime = max;
+            } else if (onselect)
+                tp_inst._defaults.onSelect = onselect;
+        }
+        if (value === undefined)
+            return this._base_optionDatepicker(target, name);
+        return this._base_optionDatepicker(target, name, value);
+    };
+
+    //#######################################################################################
+    // jQuery extend now ignores nulls!
+    //#######################################################################################
+    function extendRemove(target, props) {
+        $.extend(target, props);
+        for (var name in props)
+            if (props[name] === null || props[name] === undefined)
+                target[name] = props[name];
+        return target;
+    };
+
+    $.timepicker = new Timepicker(); // singleton instance
+    $.timepicker.version = "1.0.0";
+
+})(jQuery);
\ No newline at end of file
diff --git a/src/Orchard.Web/Modules/Orchard.jQuery/Scripts/jquery.ui.timepicker.min.js b/src/Orchard.Web/Modules/Orchard.jQuery/Scripts/jquery.ui.timepicker.min.js
new file mode 100644
index 000000000..d6a42e4f2
--- /dev/null
+++ b/src/Orchard.Web/Modules/Orchard.jQuery/Scripts/jquery.ui.timepicker.min.js
@@ -0,0 +1 @@
+(function ($) { $.ui.timepicker = $.ui.timepicker || {}; if ($.ui.timepicker.version) { return } $.extend($.ui, { timepicker: { version: "1.0.0"} }); function Timepicker() { this.regional = []; this.regional[''] = { currentText: 'Now', closeText: 'Done', ampm: false, amNames: ['AM', 'A'], pmNames: ['PM', 'P'], timeFormat: 'hh:mm tt', timeSuffix: '', timeOnlyTitle: 'Choose Time', timeText: 'Time', hourText: 'Hour', minuteText: 'Minute', secondText: 'Second', millisecText: 'Millisecond', timezoneText: 'Time Zone' }; this._defaults = { showButtonPanel: true, timeOnly: false, showHour: true, showMinute: true, showSecond: false, showMillisec: false, showTimezone: false, showTime: true, stepHour: 1, stepMinute: 1, stepSecond: 1, stepMillisec: 1, hour: 0, minute: 0, second: 0, millisec: 0, timezone: '+0000', hourMin: 0, minuteMin: 0, secondMin: 0, millisecMin: 0, hourMax: 23, minuteMax: 59, secondMax: 59, millisecMax: 999, minDateTime: null, maxDateTime: null, onSelect: null, hourGrid: 0, minuteGrid: 0, secondGrid: 0, millisecGrid: 0, alwaysSetTime: true, separator: ' ', altFieldTimeOnly: true, showTimepicker: true, timezoneIso8609: false, timezoneList: null, addSliderAccess: false, sliderAccessArgs: null }; $.extend(this._defaults, this.regional['']) }; $.extend(Timepicker.prototype, { $input: null, $altInput: null, $timeObj: null, inst: null, hour_slider: null, minute_slider: null, second_slider: null, millisec_slider: null, timezone_select: null, hour: 0, minute: 0, second: 0, millisec: 0, timezone: '+0000', hourMinOriginal: null, minuteMinOriginal: null, secondMinOriginal: null, millisecMinOriginal: null, hourMaxOriginal: null, minuteMaxOriginal: null, secondMaxOriginal: null, millisecMaxOriginal: null, ampm: '', formattedDate: '', formattedTime: '', formattedDateTime: '', timezoneList: null, setDefaults: function (settings) { extendRemove(this._defaults, settings || {}); return this }, _newInst: function ($input, o) { var tp_inst = new Timepicker(), inlineSettings = {}; for (var attrName in this._defaults) { var attrValue = $input.attr('time:' + attrName); if (attrValue) { try { inlineSettings[attrName] = eval(attrValue) } catch (err) { inlineSettings[attrName] = attrValue } } } tp_inst._defaults = $.extend({}, this._defaults, inlineSettings, o, { beforeShow: function (input, dp_inst) { if ($.isFunction(o.beforeShow)) return o.beforeShow(input, dp_inst, tp_inst) }, onChangeMonthYear: function (year, month, dp_inst) { tp_inst._updateDateTime(dp_inst); if ($.isFunction(o.onChangeMonthYear)) o.onChangeMonthYear.call($input[0], year, month, dp_inst, tp_inst) }, onClose: function (dateText, dp_inst) { if (tp_inst.timeDefined === true && $input.val() != '') tp_inst._updateDateTime(dp_inst); if ($.isFunction(o.onClose)) o.onClose.call($input[0], dateText, dp_inst, tp_inst) }, timepicker: tp_inst }); tp_inst.amNames = $.map(tp_inst._defaults.amNames, function (val) { return val.toUpperCase() }); tp_inst.pmNames = $.map(tp_inst._defaults.pmNames, function (val) { return val.toUpperCase() }); if (tp_inst._defaults.timezoneList === null) { var timezoneList = []; for (var i = -11; i <= 12; i++) timezoneList.push((i >= 0 ? '+' : '-') + ('0' + Math.abs(i).toString()).slice(-2) + '00'); if (tp_inst._defaults.timezoneIso8609) timezoneList = $.map(timezoneList, function (val) { return val == '+0000' ? 'Z' : (val.substring(0, 3) + ':' + val.substring(3)) }); tp_inst._defaults.timezoneList = timezoneList } tp_inst.hour = tp_inst._defaults.hour; tp_inst.minute = tp_inst._defaults.minute; tp_inst.second = tp_inst._defaults.second; tp_inst.millisec = tp_inst._defaults.millisec; tp_inst.ampm = ''; tp_inst.$input = $input; if (o.altField) tp_inst.$altInput = $(o.altField).css({ cursor: 'pointer' }).focus(function () { $input.trigger("focus") }); if (tp_inst._defaults.minDate == 0 || tp_inst._defaults.minDateTime == 0) { tp_inst._defaults.minDate = new Date() } if (tp_inst._defaults.maxDate == 0 || tp_inst._defaults.maxDateTime == 0) { tp_inst._defaults.maxDate = new Date() } if (tp_inst._defaults.minDate !== undefined && tp_inst._defaults.minDate instanceof Date) tp_inst._defaults.minDateTime = new Date(tp_inst._defaults.minDate.getTime()); if (tp_inst._defaults.minDateTime !== undefined && tp_inst._defaults.minDateTime instanceof Date) tp_inst._defaults.minDate = new Date(tp_inst._defaults.minDateTime.getTime()); if (tp_inst._defaults.maxDate !== undefined && tp_inst._defaults.maxDate instanceof Date) tp_inst._defaults.maxDateTime = new Date(tp_inst._defaults.maxDate.getTime()); if (tp_inst._defaults.maxDateTime !== undefined && tp_inst._defaults.maxDateTime instanceof Date) tp_inst._defaults.maxDate = new Date(tp_inst._defaults.maxDateTime.getTime()); return tp_inst }, _addTimePicker: function (dp_inst) { var currDT = (this.$altInput && this._defaults.altFieldTimeOnly) ? this.$input.val() + ' ' + this.$altInput.val() : this.$input.val(); this.timeDefined = this._parseTime(currDT); this._limitMinMaxDateTime(dp_inst, false); this._injectTimePicker() }, _parseTime: function (timeString, withDate) { var regstr = this._defaults.timeFormat.toString().replace(/h{1,2}/ig, '(\\d?\\d)').replace(/m{1,2}/ig, '(\\d?\\d)').replace(/s{1,2}/ig, '(\\d?\\d)').replace(/l{1}/ig, '(\\d?\\d?\\d)').replace(/t{1,2}/ig, this._getPatternAmpm()).replace(/z{1}/ig, '(z|[-+]\\d\\d:?\\d\\d)?').replace(/\s/g, '\\s?') + this._defaults.timeSuffix + '$', order = this._getFormatPositions(), ampm = '', treg; if (!this.inst) this.inst = $.datepicker._getInst(this.$input[0]); if (withDate || !this._defaults.timeOnly) { var dp_dateFormat = $.datepicker._get(this.inst, 'dateFormat'); var specials = new RegExp("[.*+?|()\\[\\]{}\\\\]", "g"); regstr = '^.{' + dp_dateFormat.length + ',}?' + this._defaults.separator.replace(specials, "\\$&") + regstr } treg = timeString.match(new RegExp(regstr, 'i')); if (treg) { if (order.t !== -1) { if (treg[order.t] === undefined || treg[order.t].length === 0) { ampm = ''; this.ampm = '' } else { ampm = $.inArray(treg[order.t].toUpperCase(), this.amNames) !== -1 ? 'AM' : 'PM'; this.ampm = this._defaults[ampm == 'AM' ? 'amNames' : 'pmNames'][0] } } if (order.h !== -1) { if (ampm == 'AM' && treg[order.h] == '12') this.hour = 0; else if (ampm == 'PM' && treg[order.h] != '12') this.hour = (parseFloat(treg[order.h]) + 12).toFixed(0); else this.hour = Number(treg[order.h]) } if (order.m !== -1) this.minute = Number(treg[order.m]); if (order.s !== -1) this.second = Number(treg[order.s]); if (order.l !== -1) this.millisec = Number(treg[order.l]); if (order.z !== -1 && treg[order.z] !== undefined) { var tz = treg[order.z].toUpperCase(); switch (tz.length) { case 1: tz = this._defaults.timezoneIso8609 ? 'Z' : '+0000'; break; case 5: if (this._defaults.timezoneIso8609) tz = tz.substring(1) == '0000' ? 'Z' : tz.substring(0, 3) + ':' + tz.substring(3); break; case 6: if (!this._defaults.timezoneIso8609) tz = tz == 'Z' || tz.substring(1) == '00:00' ? '+0000' : tz.replace(/:/, ''); else if (tz.substring(1) == '00:00') tz = 'Z'; break } this.timezone = tz } return true } return false }, _getPatternAmpm: function () { var markers = [], o = this._defaults; if (o.amNames) $.merge(markers, o.amNames); if (o.pmNames) $.merge(markers, o.pmNames); markers = $.map(markers, function (val) { return val.replace(/[.*+?|()\[\]{}\\]/g, '\\$&') }); return '(' + markers.join('|') + ')?' }, _getFormatPositions: function () { var finds = this._defaults.timeFormat.toLowerCase().match(/(h{1,2}|m{1,2}|s{1,2}|l{1}|t{1,2}|z)/g), orders = { h: -1, m: -1, s: -1, l: -1, t: -1, z: -1 }; if (finds) for (var i = 0; i < finds.length; i++) if (orders[finds[i].toString().charAt(0)] == -1) orders[finds[i].toString().charAt(0)] = i + 1; return orders }, _injectTimePicker: function () { var $dp = this.inst.dpDiv, o = this._defaults, tp_inst = this, hourMax = parseInt((o.hourMax - ((o.hourMax - o.hourMin) % o.stepHour)), 10), minMax = parseInt((o.minuteMax - ((o.minuteMax - o.minuteMin) % o.stepMinute)), 10), secMax = parseInt((o.secondMax - ((o.secondMax - o.secondMin) % o.stepSecond)), 10), millisecMax = parseInt((o.millisecMax - ((o.millisecMax - o.millisecMin) % o.stepMillisec)), 10), dp_id = this.inst.id.toString().replace(/([^A-Za-z0-9_])/g, ''); if ($dp.find("div#ui-timepicker-div-" + dp_id).length === 0 && o.showTimepicker) { var noDisplay = ' style="display:none;"', html = '<div class="ui-timepicker-div" id="ui-timepicker-div-' + dp_id + '"><dl>' + '<dt class="ui_tpicker_time_label" id="ui_tpicker_time_label_' + dp_id + '"' + ((o.showTime) ? '' : noDisplay) + '>' + o.timeText + '</dt>' + '<dd class="ui_tpicker_time" id="ui_tpicker_time_' + dp_id + '"' + ((o.showTime) ? '' : noDisplay) + '></dd>' + '<dt class="ui_tpicker_hour_label" id="ui_tpicker_hour_label_' + dp_id + '"' + ((o.showHour) ? '' : noDisplay) + '>' + o.hourText + '</dt>', hourGridSize = 0, minuteGridSize = 0, secondGridSize = 0, millisecGridSize = 0, size = null; html += '<dd class="ui_tpicker_hour"><div id="ui_tpicker_hour_' + dp_id + '"' + ((o.showHour) ? '' : noDisplay) + '></div>'; if (o.showHour && o.hourGrid > 0) { html += '<div style="padding-left: 1px"><table class="ui-tpicker-grid-label"><tr>'; for (var h = o.hourMin; h <= hourMax; h += parseInt(o.hourGrid, 10)) { hourGridSize++; var tmph = (o.ampm && h > 12) ? h - 12 : h; if (tmph < 10) tmph = '0' + tmph; if (o.ampm) { if (h == 0) tmph = 12 + 'a'; else if (h < 12) tmph += 'a'; else tmph += 'p' } html += '<td>' + tmph + '</td>' } html += '</tr></table></div>' } html += '</dd>'; html += '<dt class="ui_tpicker_minute_label" id="ui_tpicker_minute_label_' + dp_id + '"' + ((o.showMinute) ? '' : noDisplay) + '>' + o.minuteText + '</dt>' + '<dd class="ui_tpicker_minute"><div id="ui_tpicker_minute_' + dp_id + '"' + ((o.showMinute) ? '' : noDisplay) + '></div>'; if (o.showMinute && o.minuteGrid > 0) { html += '<div style="padding-left: 1px"><table class="ui-tpicker-grid-label"><tr>'; for (var m = o.minuteMin; m <= minMax; m += parseInt(o.minuteGrid, 10)) { minuteGridSize++; html += '<td>' + ((m < 10) ? '0' : '') + m + '</td>' } html += '</tr></table></div>' } html += '</dd>'; html += '<dt class="ui_tpicker_second_label" id="ui_tpicker_second_label_' + dp_id + '"' + ((o.showSecond) ? '' : noDisplay) + '>' + o.secondText + '</dt>' + '<dd class="ui_tpicker_second"><div id="ui_tpicker_second_' + dp_id + '"' + ((o.showSecond) ? '' : noDisplay) + '></div>'; if (o.showSecond && o.secondGrid > 0) { html += '<div style="padding-left: 1px"><table><tr>'; for (var s = o.secondMin; s <= secMax; s += parseInt(o.secondGrid, 10)) { secondGridSize++; html += '<td>' + ((s < 10) ? '0' : '') + s + '</td>' } html += '</tr></table></div>' } html += '</dd>'; html += '<dt class="ui_tpicker_millisec_label" id="ui_tpicker_millisec_label_' + dp_id + '"' + ((o.showMillisec) ? '' : noDisplay) + '>' + o.millisecText + '</dt>' + '<dd class="ui_tpicker_millisec"><div id="ui_tpicker_millisec_' + dp_id + '"' + ((o.showMillisec) ? '' : noDisplay) + '></div>'; if (o.showMillisec && o.millisecGrid > 0) { html += '<div style="padding-left: 1px"><table><tr>'; for (var l = o.millisecMin; l <= millisecMax; l += parseInt(o.millisecGrid, 10)) { millisecGridSize++; html += '<td>' + ((l < 10) ? '0' : '') + l + '</td>' } html += '</tr></table></div>' } html += '</dd>'; html += '<dt class="ui_tpicker_timezone_label" id="ui_tpicker_timezone_label_' + dp_id + '"' + ((o.showTimezone) ? '' : noDisplay) + '>' + o.timezoneText + '</dt>'; html += '<dd class="ui_tpicker_timezone" id="ui_tpicker_timezone_' + dp_id + '"' + ((o.showTimezone) ? '' : noDisplay) + '></dd>'; html += '</dl></div>'; $tp = $(html); if (o.timeOnly === true) { $tp.prepend('<div class="ui-widget-header ui-helper-clearfix ui-corner-all">' + '<div class="ui-datepicker-title">' + o.timeOnlyTitle + '</div>' + '</div>'); $dp.find('.ui-datepicker-header, .ui-datepicker-calendar').hide() } this.hour_slider = $tp.find('#ui_tpicker_hour_' + dp_id).slider({ orientation: "horizontal", value: this.hour, min: o.hourMin, max: hourMax, step: o.stepHour, slide: function (event, ui) { tp_inst.hour_slider.slider("option", "value", ui.value); tp_inst._onTimeChange() } }); this.minute_slider = $tp.find('#ui_tpicker_minute_' + dp_id).slider({ orientation: "horizontal", value: this.minute, min: o.minuteMin, max: minMax, step: o.stepMinute, slide: function (event, ui) { tp_inst.minute_slider.slider("option", "value", ui.value); tp_inst._onTimeChange() } }); this.second_slider = $tp.find('#ui_tpicker_second_' + dp_id).slider({ orientation: "horizontal", value: this.second, min: o.secondMin, max: secMax, step: o.stepSecond, slide: function (event, ui) { tp_inst.second_slider.slider("option", "value", ui.value); tp_inst._onTimeChange() } }); this.millisec_slider = $tp.find('#ui_tpicker_millisec_' + dp_id).slider({ orientation: "horizontal", value: this.millisec, min: o.millisecMin, max: millisecMax, step: o.stepMillisec, slide: function (event, ui) { tp_inst.millisec_slider.slider("option", "value", ui.value); tp_inst._onTimeChange() } }); this.timezone_select = $tp.find('#ui_tpicker_timezone_' + dp_id).append('<select></select>').find("select"); $.fn.append.apply(this.timezone_select, $.map(o.timezoneList, function (val, idx) { return $("<option />").val(typeof val == "object" ? val.value : val).text(typeof val == "object" ? val.label : val) })); this.timezone_select.val((typeof this.timezone != "undefined" && this.timezone != null && this.timezone != "") ? this.timezone : o.timezone); this.timezone_select.change(function () { tp_inst._onTimeChange() }); if (o.showHour && o.hourGrid > 0) { size = 100 * hourGridSize * o.hourGrid / (hourMax - o.hourMin); $tp.find(".ui_tpicker_hour table").css({ width: size + "%", marginLeft: (size / (-2 * hourGridSize)) + "%", borderCollapse: 'collapse' }).find("td").each(function (index) { $(this).click(function () { var h = $(this).html(); if (o.ampm) { var ap = h.substring(2).toLowerCase(), aph = parseInt(h.substring(0, 2), 10); if (ap == 'a') { if (aph == 12) h = 0; else h = aph } else if (aph == 12) h = 12; else h = aph + 12 } tp_inst.hour_slider.slider("option", "value", h); tp_inst._onTimeChange(); tp_inst._onSelectHandler() }).css({ cursor: 'pointer', width: (100 / hourGridSize) + '%', textAlign: 'center', overflow: 'hidden' }) }) } if (o.showMinute && o.minuteGrid > 0) { size = 100 * minuteGridSize * o.minuteGrid / (minMax - o.minuteMin); $tp.find(".ui_tpicker_minute table").css({ width: size + "%", marginLeft: (size / (-2 * minuteGridSize)) + "%", borderCollapse: 'collapse' }).find("td").each(function (index) { $(this).click(function () { tp_inst.minute_slider.slider("option", "value", $(this).html()); tp_inst._onTimeChange(); tp_inst._onSelectHandler() }).css({ cursor: 'pointer', width: (100 / minuteGridSize) + '%', textAlign: 'center', overflow: 'hidden' }) }) } if (o.showSecond && o.secondGrid > 0) { $tp.find(".ui_tpicker_second table").css({ width: size + "%", marginLeft: (size / (-2 * secondGridSize)) + "%", borderCollapse: 'collapse' }).find("td").each(function (index) { $(this).click(function () { tp_inst.second_slider.slider("option", "value", $(this).html()); tp_inst._onTimeChange(); tp_inst._onSelectHandler() }).css({ cursor: 'pointer', width: (100 / secondGridSize) + '%', textAlign: 'center', overflow: 'hidden' }) }) } if (o.showMillisec && o.millisecGrid > 0) { $tp.find(".ui_tpicker_millisec table").css({ width: size + "%", marginLeft: (size / (-2 * millisecGridSize)) + "%", borderCollapse: 'collapse' }).find("td").each(function (index) { $(this).click(function () { tp_inst.millisec_slider.slider("option", "value", $(this).html()); tp_inst._onTimeChange(); tp_inst._onSelectHandler() }).css({ cursor: 'pointer', width: (100 / millisecGridSize) + '%', textAlign: 'center', overflow: 'hidden' }) }) } var $buttonPanel = $dp.find('.ui-datepicker-buttonpane'); if ($buttonPanel.length) $buttonPanel.before($tp); else $dp.append($tp); this.$timeObj = $tp.find('#ui_tpicker_time_' + dp_id); if (this.inst !== null) { var timeDefined = this.timeDefined; this._onTimeChange(); this.timeDefined = timeDefined } var onSelectDelegate = function () { tp_inst._onSelectHandler() }; this.hour_slider.bind('slidestop', onSelectDelegate); this.minute_slider.bind('slidestop', onSelectDelegate); this.second_slider.bind('slidestop', onSelectDelegate); this.millisec_slider.bind('slidestop', onSelectDelegate); if (this._defaults.addSliderAccess) { var sliderAccessArgs = this._defaults.sliderAccessArgs; setTimeout(function () { if ($tp.find('.ui-slider-access').length == 0) { $tp.find('.ui-slider:visible').sliderAccess(sliderAccessArgs); var sliderAccessWidth = $tp.find('.ui-slider-access:eq(0)').outerWidth(true); if (sliderAccessWidth) { $tp.find('table:visible').each(function () { var $g = $(this), oldWidth = $g.outerWidth(), oldMarginLeft = $g.css('marginLeft').toString().replace('%', ''), newWidth = oldWidth - sliderAccessWidth, newMarginLeft = ((oldMarginLeft * newWidth) / oldWidth) + '%'; $g.css({ width: newWidth, marginLeft: newMarginLeft }) }) } } }, 0) } } }, _limitMinMaxDateTime: function (dp_inst, adjustSliders) { var o = this._defaults, dp_date = new Date(dp_inst.selectedYear, dp_inst.selectedMonth, dp_inst.selectedDay); if (!this._defaults.showTimepicker) return; if ($.datepicker._get(dp_inst, 'minDateTime') !== null && $.datepicker._get(dp_inst, 'minDateTime') !== undefined && dp_date) { var minDateTime = $.datepicker._get(dp_inst, 'minDateTime'), minDateTimeDate = new Date(minDateTime.getFullYear(), minDateTime.getMonth(), minDateTime.getDate(), 0, 0, 0, 0); if (this.hourMinOriginal === null || this.minuteMinOriginal === null || this.secondMinOriginal === null || this.millisecMinOriginal === null) { this.hourMinOriginal = o.hourMin; this.minuteMinOriginal = o.minuteMin; this.secondMinOriginal = o.secondMin; this.millisecMinOriginal = o.millisecMin } if (dp_inst.settings.timeOnly || minDateTimeDate.getTime() == dp_date.getTime()) { this._defaults.hourMin = minDateTime.getHours(); if (this.hour <= this._defaults.hourMin) { this.hour = this._defaults.hourMin; this._defaults.minuteMin = minDateTime.getMinutes(); if (this.minute <= this._defaults.minuteMin) { this.minute = this._defaults.minuteMin; this._defaults.secondMin = minDateTime.getSeconds() } else if (this.second <= this._defaults.secondMin) { this.second = this._defaults.secondMin; this._defaults.millisecMin = minDateTime.getMilliseconds() } else { if (this.millisec < this._defaults.millisecMin) this.millisec = this._defaults.millisecMin; this._defaults.millisecMin = this.millisecMinOriginal } } else { this._defaults.minuteMin = this.minuteMinOriginal; this._defaults.secondMin = this.secondMinOriginal; this._defaults.millisecMin = this.millisecMinOriginal } } else { this._defaults.hourMin = this.hourMinOriginal; this._defaults.minuteMin = this.minuteMinOriginal; this._defaults.secondMin = this.secondMinOriginal; this._defaults.millisecMin = this.millisecMinOriginal } } if ($.datepicker._get(dp_inst, 'maxDateTime') !== null && $.datepicker._get(dp_inst, 'maxDateTime') !== undefined && dp_date) { var maxDateTime = $.datepicker._get(dp_inst, 'maxDateTime'), maxDateTimeDate = new Date(maxDateTime.getFullYear(), maxDateTime.getMonth(), maxDateTime.getDate(), 0, 0, 0, 0); if (this.hourMaxOriginal === null || this.minuteMaxOriginal === null || this.secondMaxOriginal === null) { this.hourMaxOriginal = o.hourMax; this.minuteMaxOriginal = o.minuteMax; this.secondMaxOriginal = o.secondMax; this.millisecMaxOriginal = o.millisecMax } if (dp_inst.settings.timeOnly || maxDateTimeDate.getTime() == dp_date.getTime()) { this._defaults.hourMax = maxDateTime.getHours(); if (this.hour >= this._defaults.hourMax) { this.hour = this._defaults.hourMax; this._defaults.minuteMax = maxDateTime.getMinutes(); if (this.minute >= this._defaults.minuteMax) { this.minute = this._defaults.minuteMax; this._defaults.secondMax = maxDateTime.getSeconds() } else if (this.second >= this._defaults.secondMax) { this.second = this._defaults.secondMax; this._defaults.millisecMax = maxDateTime.getMilliseconds() } else { if (this.millisec > this._defaults.millisecMax) this.millisec = this._defaults.millisecMax; this._defaults.millisecMax = this.millisecMaxOriginal } } else { this._defaults.minuteMax = this.minuteMaxOriginal; this._defaults.secondMax = this.secondMaxOriginal; this._defaults.millisecMax = this.millisecMaxOriginal } } else { this._defaults.hourMax = this.hourMaxOriginal; this._defaults.minuteMax = this.minuteMaxOriginal; this._defaults.secondMax = this.secondMaxOriginal; this._defaults.millisecMax = this.millisecMaxOriginal } } if (adjustSliders !== undefined && adjustSliders === true) { var hourMax = parseInt((this._defaults.hourMax - ((this._defaults.hourMax - this._defaults.hourMin) % this._defaults.stepHour)), 10), minMax = parseInt((this._defaults.minuteMax - ((this._defaults.minuteMax - this._defaults.minuteMin) % this._defaults.stepMinute)), 10), secMax = parseInt((this._defaults.secondMax - ((this._defaults.secondMax - this._defaults.secondMin) % this._defaults.stepSecond)), 10), millisecMax = parseInt((this._defaults.millisecMax - ((this._defaults.millisecMax - this._defaults.millisecMin) % this._defaults.stepMillisec)), 10); if (this.hour_slider) this.hour_slider.slider("option", { min: this._defaults.hourMin, max: hourMax }).slider('value', this.hour); if (this.minute_slider) this.minute_slider.slider("option", { min: this._defaults.minuteMin, max: minMax }).slider('value', this.minute); if (this.second_slider) this.second_slider.slider("option", { min: this._defaults.secondMin, max: secMax }).slider('value', this.second); if (this.millisec_slider) this.millisec_slider.slider("option", { min: this._defaults.millisecMin, max: millisecMax }).slider('value', this.millisec) } }, _onTimeChange: function () { var hour = (this.hour_slider) ? this.hour_slider.slider('value') : false, minute = (this.minute_slider) ? this.minute_slider.slider('value') : false, second = (this.second_slider) ? this.second_slider.slider('value') : false, millisec = (this.millisec_slider) ? this.millisec_slider.slider('value') : false, timezone = (this.timezone_select) ? this.timezone_select.val() : false, o = this._defaults; if (typeof (hour) == 'object') hour = false; if (typeof (minute) == 'object') minute = false; if (typeof (second) == 'object') second = false; if (typeof (millisec) == 'object') millisec = false; if (typeof (timezone) == 'object') timezone = false; if (hour !== false) hour = parseInt(hour, 10); if (minute !== false) minute = parseInt(minute, 10); if (second !== false) second = parseInt(second, 10); if (millisec !== false) millisec = parseInt(millisec, 10); var ampm = o[hour < 12 ? 'amNames' : 'pmNames'][0]; var hasChanged = (hour != this.hour || minute != this.minute || second != this.second || millisec != this.millisec || (this.ampm.length > 0 && (hour < 12) != ($.inArray(this.ampm.toUpperCase(), this.amNames) !== -1)) || timezone != this.timezone); if (hasChanged) { if (hour !== false) this.hour = hour; if (minute !== false) this.minute = minute; if (second !== false) this.second = second; if (millisec !== false) this.millisec = millisec; if (timezone !== false) this.timezone = timezone; if (!this.inst) this.inst = $.datepicker._getInst(this.$input[0]); this._limitMinMaxDateTime(this.inst, true) } if (o.ampm) this.ampm = ampm; this.formattedTime = $.datepicker.formatTime(this._defaults.timeFormat, this, this._defaults); if (this.$timeObj) this.$timeObj.text(this.formattedTime + o.timeSuffix); this.timeDefined = true; if (hasChanged) this._updateDateTime() }, _onSelectHandler: function () { var onSelect = this._defaults.onSelect; var inputEl = this.$input ? this.$input[0] : null; if (onSelect && inputEl) { onSelect.apply(inputEl, [this.formattedDateTime, this]) } }, _formatTime: function (time, format) { time = time || { hour: this.hour, minute: this.minute, second: this.second, millisec: this.millisec, ampm: this.ampm, timezone: this.timezone }; var tmptime = (format || this._defaults.timeFormat).toString(); tmptime = $.datepicker.formatTime(tmptime, time, this._defaults); if (arguments.length) return tmptime; else this.formattedTime = tmptime }, _updateDateTime: function (dp_inst) { dp_inst = this.inst || dp_inst; var dt = $.datepicker._daylightSavingAdjust(new Date(dp_inst.selectedYear, dp_inst.selectedMonth, dp_inst.selectedDay)), dateFmt = $.datepicker._get(dp_inst, 'dateFormat'), formatCfg = $.datepicker._getFormatConfig(dp_inst), timeAvailable = dt !== null && this.timeDefined; this.formattedDate = $.datepicker.formatDate(dateFmt, (dt === null ? new Date() : dt), formatCfg); var formattedDateTime = this.formattedDate; if (dp_inst.lastVal !== undefined && (dp_inst.lastVal.length > 0 && this.$input.val().length === 0)) return; if (this._defaults.timeOnly === true) { formattedDateTime = this.formattedTime } else if (this._defaults.timeOnly !== true && (this._defaults.alwaysSetTime || timeAvailable)) { formattedDateTime += this._defaults.separator + this.formattedTime + this._defaults.timeSuffix } this.formattedDateTime = formattedDateTime; if (!this._defaults.showTimepicker) { this.$input.val(this.formattedDate) } else if (this.$altInput && this._defaults.altFieldTimeOnly === true) { this.$altInput.val(this.formattedTime); this.$input.val(this.formattedDate) } else if (this.$altInput) { this.$altInput.val(formattedDateTime); this.$input.val(formattedDateTime) } else { this.$input.val(formattedDateTime) } this.$input.trigger("change") } }); $.fn.extend({ timepicker: function (o) { o = o || {}; var tmp_args = arguments; if (typeof o == 'object') tmp_args[0] = $.extend(o, { timeOnly: true }); return $(this).each(function () { $.fn.datetimepicker.apply($(this), tmp_args) }) }, datetimepicker: function (o) { o = o || {}; tmp_args = arguments; if (typeof (o) == 'string') { if (o == 'getDate') return $.fn.datepicker.apply($(this[0]), tmp_args); else return this.each(function () { var $t = $(this); $t.datepicker.apply($t, tmp_args) }) } else return this.each(function () { var $t = $(this); $t.datepicker($.timepicker._newInst($t, o)._defaults) }) } }); $.datepicker.formatTime = function (format, time, options) { options = options || {}; options = $.extend($.timepicker._defaults, options); time = $.extend({ hour: 0, minute: 0, second: 0, millisec: 0, timezone: '+0000' }, time); var tmptime = format; var ampmName = options['amNames'][0]; var hour = parseInt(time.hour, 10); if (options.ampm) { if (hour > 11) { ampmName = options['pmNames'][0]; if (hour > 12) hour = hour % 12 } if (hour === 0) hour = 12 } tmptime = tmptime.replace(/(?:hh?|mm?|ss?|[tT]{1,2}|[lz])/g, function (match) { switch (match.toLowerCase()) { case 'hh': return ('0' + hour).slice(-2); case 'h': return hour; case 'mm': return ('0' + time.minute).slice(-2); case 'm': return time.minute; case 'ss': return ('0' + time.second).slice(-2); case 's': return time.second; case 'l': return ('00' + time.millisec).slice(-3); case 'z': return time.timezone; case 't': case 'tt': if (options.ampm) { if (match.length == 1) ampmName = ampmName.charAt(0); return match.charAt(0) == 'T' ? ampmName.toUpperCase() : ampmName.toLowerCase() } return '' } }); tmptime = $.trim(tmptime); return tmptime }; $.datepicker._base_selectDate = $.datepicker._selectDate; $.datepicker._selectDate = function (id, dateStr) { var inst = this._getInst($(id)[0]), tp_inst = this._get(inst, 'timepicker'); if (tp_inst) { tp_inst._limitMinMaxDateTime(inst, true); inst.inline = inst.stay_open = true; this._base_selectDate(id, dateStr); inst.inline = inst.stay_open = false; this._notifyChange(inst); this._updateDatepicker(inst) } else this._base_selectDate(id, dateStr) }; $.datepicker._base_updateDatepicker = $.datepicker._updateDatepicker; $.datepicker._updateDatepicker = function (inst) { var input = inst.input[0]; if ($.datepicker._curInst && $.datepicker._curInst != inst && $.datepicker._datepickerShowing && $.datepicker._lastInput != input) { return } if (typeof (inst.stay_open) !== 'boolean' || inst.stay_open === false) { this._base_updateDatepicker(inst); var tp_inst = this._get(inst, 'timepicker'); if (tp_inst) tp_inst._addTimePicker(inst) } }; $.datepicker._base_doKeyPress = $.datepicker._doKeyPress; $.datepicker._doKeyPress = function (event) { var inst = $.datepicker._getInst(event.target), tp_inst = $.datepicker._get(inst, 'timepicker'); if (tp_inst) { if ($.datepicker._get(inst, 'constrainInput')) { var ampm = tp_inst._defaults.ampm, dateChars = $.datepicker._possibleChars($.datepicker._get(inst, 'dateFormat')), datetimeChars = tp_inst._defaults.timeFormat.toString().replace(/[hms]/g, '').replace(/TT/g, ampm ? 'APM' : '').replace(/Tt/g, ampm ? 'AaPpMm' : '').replace(/tT/g, ampm ? 'AaPpMm' : '').replace(/T/g, ampm ? 'AP' : '').replace(/tt/g, ampm ? 'apm' : '').replace(/t/g, ampm ? 'ap' : '') + " " + tp_inst._defaults.separator + tp_inst._defaults.timeSuffix + (tp_inst._defaults.showTimezone ? tp_inst._defaults.timezoneList.join('') : '') + (tp_inst._defaults.amNames.join('')) + (tp_inst._defaults.pmNames.join('')) + dateChars, chr = String.fromCharCode(event.charCode === undefined ? event.keyCode : event.charCode); return event.ctrlKey || (chr < ' ' || !dateChars || datetimeChars.indexOf(chr) > -1) } } return $.datepicker._base_doKeyPress(event) }; $.datepicker._base_doKeyUp = $.datepicker._doKeyUp; $.datepicker._doKeyUp = function (event) { var inst = $.datepicker._getInst(event.target), tp_inst = $.datepicker._get(inst, 'timepicker'); if (tp_inst) { if (tp_inst._defaults.timeOnly && (inst.input.val() != inst.lastVal)) { try { $.datepicker._updateDatepicker(inst) } catch (err) { $.datepicker.log(err) } } } return $.datepicker._base_doKeyUp(event) }; $.datepicker._base_gotoToday = $.datepicker._gotoToday; $.datepicker._gotoToday = function (id) { var inst = this._getInst($(id)[0]), $dp = inst.dpDiv; this._base_gotoToday(id); var now = new Date(); var tp_inst = this._get(inst, 'timepicker'); if (tp_inst && tp_inst._defaults.showTimezone && tp_inst.timezone_select) { var tzoffset = now.getTimezoneOffset(); var tzsign = tzoffset > 0 ? '-' : '+'; tzoffset = Math.abs(tzoffset); var tzmin = tzoffset % 60; tzoffset = tzsign + ('0' + (tzoffset - tzmin) / 60).slice(-2) + ('0' + tzmin).slice(-2); if (tp_inst._defaults.timezoneIso8609) tzoffset = tzoffset.substring(0, 3) + ':' + tzoffset.substring(3); tp_inst.timezone_select.val(tzoffset) } this._setTime(inst, now); $('.ui-datepicker-today', $dp).click() }; $.datepicker._disableTimepickerDatepicker = function (target, date, withDate) { var inst = this._getInst(target), tp_inst = this._get(inst, 'timepicker'); $(target).datepicker('getDate'); if (tp_inst) { tp_inst._defaults.showTimepicker = false; tp_inst._updateDateTime(inst) } }; $.datepicker._enableTimepickerDatepicker = function (target, date, withDate) { var inst = this._getInst(target), tp_inst = this._get(inst, 'timepicker'); $(target).datepicker('getDate'); if (tp_inst) { tp_inst._defaults.showTimepicker = true; tp_inst._addTimePicker(inst); tp_inst._updateDateTime(inst) } }; $.datepicker._setTime = function (inst, date) { var tp_inst = this._get(inst, 'timepicker'); if (tp_inst) { var defaults = tp_inst._defaults, hour = date ? date.getHours() : defaults.hour, minute = date ? date.getMinutes() : defaults.minute, second = date ? date.getSeconds() : defaults.second, millisec = date ? date.getMilliseconds() : defaults.millisec; if ((hour < defaults.hourMin || hour > defaults.hourMax) || (minute < defaults.minuteMin || minute > defaults.minuteMax) || (second < defaults.secondMin || second > defaults.secondMax) || (millisec < defaults.millisecMin || millisec > defaults.millisecMax)) { hour = defaults.hourMin; minute = defaults.minuteMin; second = defaults.secondMin; millisec = defaults.millisecMin } tp_inst.hour = hour; tp_inst.minute = minute; tp_inst.second = second; tp_inst.millisec = millisec; if (tp_inst.hour_slider) tp_inst.hour_slider.slider('value', hour); if (tp_inst.minute_slider) tp_inst.minute_slider.slider('value', minute); if (tp_inst.second_slider) tp_inst.second_slider.slider('value', second); if (tp_inst.millisec_slider) tp_inst.millisec_slider.slider('value', millisec); tp_inst._onTimeChange(); tp_inst._updateDateTime(inst) } }; $.datepicker._setTimeDatepicker = function (target, date, withDate) { var inst = this._getInst(target), tp_inst = this._get(inst, 'timepicker'); if (tp_inst) { this._setDateFromField(inst); var tp_date; if (date) { if (typeof date == "string") { tp_inst._parseTime(date, withDate); tp_date = new Date(); tp_date.setHours(tp_inst.hour, tp_inst.minute, tp_inst.second, tp_inst.millisec) } else tp_date = new Date(date.getTime()); if (tp_date.toString() == 'Invalid Date') tp_date = undefined; this._setTime(inst, tp_date) } } }; $.datepicker._base_setDateDatepicker = $.datepicker._setDateDatepicker; $.datepicker._setDateDatepicker = function (target, date) { var inst = this._getInst(target), tp_date = (date instanceof Date) ? new Date(date.getTime()) : date; this._updateDatepicker(inst); this._base_setDateDatepicker.apply(this, arguments); this._setTimeDatepicker(target, tp_date, true) }; $.datepicker._base_getDateDatepicker = $.datepicker._getDateDatepicker; $.datepicker._getDateDatepicker = function (target, noDefault) { var inst = this._getInst(target), tp_inst = this._get(inst, 'timepicker'); if (tp_inst) { this._setDateFromField(inst, noDefault); var date = this._getDate(inst); if (date && tp_inst._parseTime($(target).val(), tp_inst.timeOnly)) date.setHours(tp_inst.hour, tp_inst.minute, tp_inst.second, tp_inst.millisec); return date } return this._base_getDateDatepicker(target, noDefault) }; $.datepicker._base_parseDate = $.datepicker.parseDate; $.datepicker.parseDate = function (format, value, settings) { var date; try { date = this._base_parseDate(format, value, settings) } catch (err) { if (err.indexOf(":") >= 0) { date = this._base_parseDate(format, value.substring(0, value.length - (err.length - err.indexOf(':') - 2)), settings) } else { throw err } } return date }; $.datepicker._base_formatDate = $.datepicker._formatDate; $.datepicker._formatDate = function (inst, day, month, year) { var tp_inst = this._get(inst, 'timepicker'); if (tp_inst) { tp_inst._updateDateTime(inst); return tp_inst.$input.val() } return this._base_formatDate(inst) }; $.datepicker._base_optionDatepicker = $.datepicker._optionDatepicker; $.datepicker._optionDatepicker = function (target, name, value) { var inst = this._getInst(target), tp_inst = this._get(inst, 'timepicker'); if (tp_inst) { var min = null, max = null, onselect = null; if (typeof name == 'string') { if (name === 'minDate' || name === 'minDateTime') min = value; else if (name === 'maxDate' || name === 'maxDateTime') max = value; else if (name === 'onSelect') onselect = value } else if (typeof name == 'object') { if (name.minDate) min = name.minDate; else if (name.minDateTime) min = name.minDateTime; else if (name.maxDate) max = name.maxDate; else if (name.maxDateTime) max = name.maxDateTime } if (min) { if (min == 0) min = new Date(); else min = new Date(min); tp_inst._defaults.minDate = min; tp_inst._defaults.minDateTime = min } else if (max) { if (max == 0) max = new Date(); else max = new Date(max); tp_inst._defaults.maxDate = max; tp_inst._defaults.maxDateTime = max } else if (onselect) tp_inst._defaults.onSelect = onselect } if (value === undefined) return this._base_optionDatepicker(target, name); return this._base_optionDatepicker(target, name, value) }; function extendRemove(target, props) { $.extend(target, props); for (var name in props) if (props[name] === null || props[name] === undefined) target[name] = props[name]; return target }; $.timepicker = new Timepicker(); $.timepicker.version = "1.0.0" })(jQuery);
\ No newline at end of file
diff --git a/src/Orchard.Web/Modules/Orchard.jQuery/Scripts/ui.timepickr.js b/src/Orchard.Web/Modules/Orchard.jQuery/Scripts/ui.timepickr.js
deleted file mode 100644
index 96d3d3001..000000000
--- a/src/Orchard.Web/Modules/Orchard.jQuery/Scripts/ui.timepickr.js
+++ /dev/null
@@ -1,420 +0,0 @@
-/*
-jQuery ui.timepickr - @VERSION
-http://code.google.com/p/jquery-utils/
-
-(c) Maxime Haineault <haineault@gmail.com> 
-http://haineault.com
-
-MIT License (http://www.opensource.org/licenses/mit-license.php
-
-Note: if you want the original experimental plugin checkout the rev 224 
-
-Dependencies
-------------
-- jquery.utils.js
-- jquery.strings.js
-- jquery.ui.js
-  
-*/
-
-(function($) {
-
-    $.tpl('timepickr.menu', '<div class="ui-helper-reset ui-timepickr ui-widget ui-corner-all ui-widget-content" />'); //todo: (heskew) make the corner an option just like the items
-    $.tpl('timepickr.row', '<ol class="ui-timepickr-row ui-helper-clearfix" />');
-    $.tpl('timepickr.button', '<li class="{className:s}"><span class="ui-state-default">{label:s}</span></li>');
-
-    $.widget('ui.timepickr', {
-        options: {
-            convention: 12, // 24, 12
-            trigger: 'focus',
-            format12: '{h:02.d}:{m:02.d} {z}',
-            format24: '{h:02.d}:{m:02.d}',
-            hours: true,
-            prefix: ['AM', 'PM'],
-            suffix: ['AM', 'PM'],
-            prefixVal: false,
-            suffixVal: true,
-            rangeHour12: $.range(1, 13),
-            rangeHour24: [$.range(0, 12), $.range(12, 24)],
-            rangeMin: $.range(0, 60, 15),
-            rangeSec: $.range(0, 60, 15),
-            corners: 'all',
-            // plugins
-            core: true,
-            minutes: true,
-            seconds: false,
-            val: false,
-            updateLive: true,
-            resetOnBlur: true,
-            keyboardnav: true,
-            handle: false,
-            handleEvent: 'click'
-        },
-
-        plugins: {},
-
-        _create: function() {
-            this._dom = {
-                menu: $.tpl('timepickr.menu'),
-                row: $.tpl('timepickr.menu')
-            };
-            this._trigger('start');
-            this._trigger('initialized');
-        },
-
-        _trigger: function(type, e, ui) {
-            var ui = ui || this;
-            $.ui.plugin.call(this, type, [e, ui]);
-            return $.Widget.prototype._trigger.call(this, type, e, ui);
-        },
-
-        _createButton: function(i, format, className) {
-            var o = format && $.format(format, i) || i;
-            var cn = className && 'ui-timepickr-button ' + className || 'ui-timepickr-button';
-            return $.tpl('timepickr.button', { className: cn, label: o }).data('id', i)
-                .bind('mouseover', function() {
-                    $(this).siblings().find('span')
-                        .removeClass('ui-state-hover').end().end()
-                        .find('span').addClass('ui-state-hover');
-                });
-
-        },
-
-        _addRow: function(range, format, className, insertAfter) {
-            var ui = this;
-            var btn = false;
-            var row = $.tpl('timepickr.row').bind('mouseover', function() {
-                $(this).next().show();
-            });
-            $.each(range, function(idx, val) {
-                ui._createButton(val, format || false).appendTo(row);
-            });
-            if (className) {
-                $(row).addClass(className);
-            }
-            if (this.options.corners) {
-                row.find('span').addClass('ui-corner-' + this.options.corners);
-            }
-            if (insertAfter) {
-                row.insertAfter(insertAfter);
-            }
-            else {
-                ui._dom.menu.append(row);
-            }
-            return row;
-        },
-
-        _setVal: function(val) {
-            val = val || this._getVal();
-            this.element.data('timepickr.initialValue', val);
-            this.element.val(this._formatVal(val));
-            if (this._dom.menu.is(':hidden')) {
-                this.element.trigger('change');
-            }
-        },
-
-        _getVal: function() {
-            var ols = this._dom.menu.find('ol');
-            function g(unit) {
-                var u = ols.filter('.' + unit).find('.ui-state-hover:first').text();
-                return u || ols.filter('.' + unit + 'li:first span').text();
-            }
-            return {
-                h: g('hours'),
-                m: g('minutes'),
-                s: g('seconds'),
-                a: g('prefix'),
-                z: g('suffix'),
-                f: this.options['format' + this.c],
-                c: this.c
-            };
-        },
-
-        _formatVal: function(ival) {
-            var val = ival || this._getVal();
-
-            if (!val.h) return;
-
-            val.c = this.options.convention;
-            val.f = val.c === 12 && this.options.format12 || this.options.format24;
-            return (new Time(val)).getTime();
-        },
-
-        blur: function() {
-            return this.element.blur();
-        },
-
-        focus: function() {
-            return this.element.focus();
-        },
-        show: function() {
-            this._trigger('show');
-            var pos = this.element.position();
-            var width = this.element.data('width');
-            var elementWidth = this.element.outerWidth();
-            var windowWidth = $(window).width() + $(window).scrollLeft();
-
-            if (width) {
-                this._dom.menu.css(
-                    'left',
-                    pos.left + width < windowWidth
-                        ? pos.left
-                        : windowWidth - width
-                    );
-            }
-
-            this._dom.menu.show(); //todo: (heskew) make show effect an option
-        },
-        hide: function() {
-            this._trigger('hide');
-            this._dom.menu.hide();
-        }
-
-    });
-
-    // These properties are shared accross every instances of timepickr 
-    $.extend($.ui.timepickr, {
-        version: '@VERSION'
-    });
-
-    $.ui.plugin.add('timepickr', 'core', {
-        start: function(e, ui) {
-            var menu = ui._dom.menu;
-            var pos = ui.element.position();
-
-            //render off screen, to be repositioned by show()
-            menu.insertAfter(ui.element).css('left', '-9999em');
-
-            if (!$.boxModel) { // IE alignement fix
-                menu.css('margin-top', ui.element.height() + 8);
-            }
-
-            ui.element
-            .bind(ui.options.trigger, function() {
-                ui._dom.menu.find('ol:first').show();
-                ui.show();
-                ui._trigger('focus');
-                if (ui.options.trigger != 'focus') {
-                    ui.element.focus();
-                }
-                ui._trigger('focus');
-            })
-            .bind('blur', function() {
-                ui.hide();
-                ui._trigger('blur');
-            });
-
-            menu.find('li').bind('mouseover.timepickr', function() {
-                ui._trigger('refresh');
-            });
-        },
-        initialized: function(e, ui) {
-            var menuItems = ui._dom.menu.find('ol');
-            var pos = ui.element.position();
-
-            //load up
-            ui.show();
-            menuItems.show();
-
-            //store width(s)
-            ui.element.data('width', ui._dom.menu.outerWidth());
-            //fix the width
-            ui._dom.menu.width(ui._dom.menu.width());
-
-            //hide
-            menuItems.hide();
-            ui.hide();
-        },
-        refresh: function(e, ui) {
-            // Realign each menu layers
-            ui._dom.menu.find('ol').each(function() {
-                var p = $(this).prev('ol');
-                try { // .. to not fuckup IE
-                    $(this).css('left', p.position().left + p.find('.ui-state-hover').position().left);
-                } catch (e) { };
-            });
-        }
-    });
-
-    $.ui.plugin.add('timepickr', 'hours', {
-        start: function(e, ui) {
-            if (ui.options.convention === 24) {
-                // prefix is required in 24h mode
-                ui._dom.prefix = ui._addRow(ui.options.prefix, false, 'prefix');
-
-                // split-range
-                if ($.isArray(ui.options.rangeHour24[0])) {
-                    var range = [];
-                    $.merge(range, ui.options.rangeHour24[0]);
-                    $.merge(range, ui.options.rangeHour24[1]);
-                    ui._dom.hours = ui._addRow(range, '{0:0.2d}', 'hours');
-                    ui._dom.hours.find('li').slice(ui.options.rangeHour24[0].length, -1).hide();
-                    var lis = ui._dom.hours.find('li');
-
-                    var show = [
-                    function() {
-                        lis.slice(ui.options.rangeHour24[0].length).hide().end()
-                           .slice(0, ui.options.rangeHour24[0].length).show()
-                           .filter(':visible:first').trigger('mouseover');
-
-                    },
-                    function() {
-                        lis.slice(0, ui.options.rangeHour24[0].length).hide().end()
-                           .slice(ui.options.rangeHour24[0].length).show()
-                           .filter(':visible:first').trigger('mouseover');
-                    }
-                ];
-
-                    ui._dom.prefix.find('li').bind('mouseover.timepickr', function() {
-                        var index = ui._dom.menu.find('.prefix li').index(this);
-                        show[index].call();
-                    });
-                }
-                else {
-                    ui._dom.hours = ui._addRow(ui.options.rangeHour24, '{0:0.2d}', 'hours');
-                    ui._dom.hours.find('li').slice(12, -1).hide();
-                }
-            }
-            else {
-                ui._dom.hours = ui._addRow(ui.options.rangeHour12, '{0:0.2d}', 'hours');
-                // suffix is required in 12h mode
-                ui._dom.suffix = ui._addRow(ui.options.suffix, false, 'suffix');
-            }
-        }
-    });
-
-    $.ui.plugin.add('timepickr', 'minutes', {
-        start: function(e, ui) {
-            var p = ui._dom.hours && ui._dom.hours || false;
-            ui._dom.minutes = ui._addRow(ui.options.rangeMin, '{0:0.2d}', 'minutes', p);
-        }
-    });
-
-    $.ui.plugin.add('timepickr', 'seconds', {
-        start: function(e, ui) {
-            var p = ui._dom.minutes && ui._dom.minutes || false;
-            ui._dom.seconds = ui._addRow(ui.options.rangeSec, '{0:0.2d}', 'seconds', p);
-        }
-    });
-
-    $.ui.plugin.add('timepickr', 'val', {
-        start: function(e, ui) {
-            ui._setVal(ui.options.val);
-        }
-    });
-
-    $.ui.plugin.add('timepickr', 'updateLive', {
-        refresh: function(e, ui) {
-            ui._setVal();
-        }
-    });
-
-    $.ui.plugin.add('timepickr', 'resetOnBlur', {
-        start: function(e, ui) {
-            ui.element.data('timepickr.initialValue', ui._getVal());
-            ui._dom.menu.find('li > span').bind('mousedown.timepickr', function() {
-                ui.element.data('timepickr.initialValue', ui._getVal());
-            });
-        },
-        blur: function(e, ui) {
-            ui._setVal(ui.element.data('timepickr.initialValue'));
-        }
-    });
-
-    $.ui.plugin.add('timepickr', 'handle', {
-        start: function(e, ui) {
-            $(ui.options.handle).bind(ui.options.handleEvent + '.timepickr', function() {
-                ui.show();
-            });
-        }
-    });
-
-    $.ui.plugin.add('timepickr', 'keyboardnav', {
-        start: function(e, ui) {
-            ui.element
-            .bind('keydown', function(e) {
-                if ($.keyIs('enter', e)) {
-                    ui._setVal();
-                    ui.blur();
-                }
-                else if ($.keyIs('escape', e)) {
-                    ui.blur();
-                }
-            });
-        }
-    });
-
-    var Time = function() { // arguments: h, m, s, c, z, f || time string
-        if (!(this instanceof arguments.callee)) {
-            throw Error("Constructor called as a function");
-        }
-        // arguments as literal object
-        if (arguments.length == 1 && $.isObject(arguments[0])) {
-            this.h = arguments[0].h || 0;
-            this.m = arguments[0].m || 0;
-            this.s = arguments[0].s || 0;
-            this.c = arguments[0].c && ($.inArray(arguments[0].c, [12, 24]) >= 0) && arguments[0].c || 24;
-            this.f = arguments[0].f || ((this.c == 12) && '{h:02.d}:{m:02.d} {z:02.d}' || '{h:02.d}:{m:02.d}');
-            this.z = arguments[0].z || 'am';
-        }
-        // arguments as string
-        else if (arguments.length < 4 && $.isString(arguments[1])) {
-            this.c = arguments[2] && ($.inArray(arguments[0], [12, 24]) >= 0) && arguments[0] || 24;
-            this.f = arguments[3] || ((this.c == 12) && '{h:02.d}:{m:02.d} {z:02.d}' || '{h:02.d}:{m:02.d}');
-            this.z = arguments[4] || 'am';
-
-            this.h = arguments[1] || 0; // parse
-            this.m = arguments[1] || 0; // parse
-            this.s = arguments[1] || 0; // parse
-        }
-        // no arguments (now)
-        else if (arguments.length === 0) {
-            // now
-        }
-        // standards arguments
-        else {
-            this.h = arguments[0] || 0;
-            this.m = arguments[1] || 0;
-            this.s = arguments[2] || 0;
-            this.c = arguments[3] && ($.inArray(arguments[3], [12, 24]) >= 0) && arguments[3] || 24;
-            this.f = this.f || ((this.c == 12) && '{h:02.d}:{m:02.d} {z:02.d}' || '{h:02.d}:{m:02.d}');
-            this.z = 'am';
-        }
-        return this;
-    };
-
-    Time.prototype.get = function(p, f, u) { return u && this.h || $.format(f, this.h); };
-    Time.prototype.getHours = function(unformated) { return this.get('h', '{0:02.d}', unformated); };
-    Time.prototype.getMinutes = function(unformated) { return this.get('m', '{0:02.d}', unformated); };
-    Time.prototype.getSeconds = function(unformated) { return this.get('s', '{0:02.d}', unformated); };
-    Time.prototype.setFormat = function(format) { return this.f = format; };
-    Time.prototype.getObject = function() { return { h: this.h, m: this.m, s: this.s, c: this.c, f: this.f, z: this.z }; };
-    Time.prototype.getTime = function() { return $.format(this.f, { h: this.h, m: this.m, z: this.z }); };
-    Time.prototype.parse = function(str) {
-        // 12h formats
-        if (this.c === 12) {
-            // Supported formats: (can't find any *official* standards for 12h..)
-            //  - [hh]:[mm]:[ss] [zz] | [hh]:[mm] [zz] | [hh] [zz] 
-            //  - [hh]:[mm]:[ss] [z.z.] | [hh]:[mm] [z.z.] | [hh] [z.z.]
-            this.tokens = str.split(/\s|:/);
-            this.h = this.tokens[0] || 0;
-            this.m = this.tokens[1] || 0;
-            this.s = this.tokens[2] || 0;
-            this.z = this.tokens[3] || '';
-            return this.getObject();
-        }
-        // 24h formats
-        else {
-            // Supported formats:
-            //  - ISO 8601: [hh][mm][ss] | [hh][mm] | [hh]  
-            //  - ISO 8601 extended: [hh]:[mm]:[ss] | [hh]:[mm] | [hh]
-            this.tokens = /:/.test(str) && str.split(/:/) || str.match(/[0-9]{2}/g);
-            this.h = this.tokens[0] || 0;
-            this.m = this.tokens[1] || 0;
-            this.s = this.tokens[2] || 0;
-            this.z = this.tokens[3] || '';
-            return this.getObject();
-        }
-    };
-
-})(jQuery);
diff --git a/src/Orchard.Web/Modules/Orchard.jQuery/Styles/ui.timepicker.css b/src/Orchard.Web/Modules/Orchard.jQuery/Styles/ui.timepicker.css
new file mode 100644
index 000000000..9c905f7a7
--- /dev/null
+++ b/src/Orchard.Web/Modules/Orchard.jQuery/Styles/ui.timepicker.css
@@ -0,0 +1,7 @@
+/* css for timepicker */
+.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
+.ui-timepicker-div dl { text-align: left; }
+.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
+.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
+.ui-timepicker-div td { font-size: 90%; }
+.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
\ No newline at end of file
diff --git a/src/Orchard.Web/Modules/Orchard.jQuery/Styles/ui.timepickr.css b/src/Orchard.Web/Modules/Orchard.jQuery/Styles/ui.timepickr.css
deleted file mode 100644
index cf010f8b2..000000000
--- a/src/Orchard.Web/Modules/Orchard.jQuery/Styles/ui.timepickr.css
+++ /dev/null
@@ -1,50 +0,0 @@
-.ui-timepickr {
-    display:none;
-    position:absolute;
-    padding:2px 2px 2px 0;
-}
-
-.ui-timepickr-row {
-    padding:0;
-    float:right;
-    clear:both;
-    overflow:hidden;
-    margin:2px 0; 
-    display:none;
-    position:relative;
-}
-
-.ui-timepickr-button {
-    float:left;
-    margin:0;
-    padding:0;
-    list-style:none;
-    list-style-type:none;
-}
-
-.ui-timepickr-button span {
-    font-size:.7em;
-    padding:4px 6px 4px 6px;
-    margin-left:2px;
-    text-align:center;
-    cursor:pointer;
-    display:block;
-    text-align:center;
-
-
-    /* system theme (default) */
-    border-width:1px;
-    border-style:solid;
-    /*border-color:ThreeDLightShadow ThreeDShadow ThreeDShadow ThreeDLightShadow;
-    color:ButtonText;
-    background:ButtonFace;*/
-}
-
-.ui-timepickr-button span.ui-state-hover {
-    /*color:HighlightText;
-    background:Highlight;*/
-}
-
-.ui-state-hover span {
-    /*background:#c30;*/
-}
diff --git a/src/Orchard.Web/Modules/Orchard.jQuery/Views/DatePickerLocalization.cshtml b/src/Orchard.Web/Modules/Orchard.jQuery/Views/DatePickerLocalization.cshtml
index e68abfe18..12635b8f2 100644
--- a/src/Orchard.Web/Modules/Orchard.jQuery/Views/DatePickerLocalization.cshtml
+++ b/src/Orchard.Web/Modules/Orchard.jQuery/Views/DatePickerLocalization.cshtml
@@ -1,5 +1,9 @@
 @using Orchard.Core.Shapes.Localization
+@using System.Globalization
+
 @{
+    var cultureInfo = CultureInfo.GetCultureInfo(WorkContext.CurrentCulture);
+    
     var dateTimeLocalization = WorkContext.Resolve<IDateTimeLocalization>();
     var monthNames = FormatJsList(dateTimeLocalization.MonthNames.Text);
     var monthNamesShort = FormatJsList(dateTimeLocalization.MonthNamesShort.Text);
@@ -17,6 +21,11 @@
         .Replace("Y", "y")
         .Replace("M", "m")
         ;
+    
+    var timeFormat = dateTimeLocalization.ShortTimeFormat.Text
+        .Replace("H", "h");
+
+    var ampm = timeFormat.ToLowerInvariant().Contains("tt") ? "true" : "false";
 }
 
 @functions {
@@ -46,6 +55,23 @@
             showMonthAfterYear: @(dateTimeLocalization.ShowMonthAfterYear ? "true" : "false"), // True if the year select precedes month, false for month then year
             yearSuffix: '@dateTimeLocalization.YearSuffix' // Additional text to append to the year in the month headers
         };
+
+        $.datepicker.setDefaults($.datepicker.regional['']);
+
+        $.timepicker.regional[''] = {
+            timeOnlyTitle: '@T("Choose time")',
+            timeText: '@T("Time")',
+            hourText: '@T("Hour")',
+            minuteText: '@T("Minute")',
+            currentText: '@T("Now")', // Display text for current time link
+            closeText: '@T("Done")', // Display text for close link
+            timeFormat: '@timeFormat',
+            amNames: ['@cultureInfo.DateTimeFormat.AMDesignator', 'AM', 'A'],
+            pmNames: ['@cultureInfo.DateTimeFormat.PMDesignator', 'PM', 'P'],
+            ampm: @ampm
+        };
+
+        $.timepicker.setDefaults($.timepicker.regional['']);
     })
 //]]>
 </script>
\ No newline at end of file