diff --git a/timesheet/inc/class.timesheet_ui.inc.php b/timesheet/inc/class.timesheet_ui.inc.php
index 4b79642aa8..dc3d7a4fd1 100644
--- a/timesheet/inc/class.timesheet_ui.inc.php
+++ b/timesheet/inc/class.timesheet_ui.inc.php
@@ -54,7 +54,7 @@ class timesheet_ui extends timesheet_bo
 
 	function edit($content = null,$view = false)
 	{
-		$etpl = new etemplate('timesheet.edit');
+		$etpl = new etemplate_new('timesheet.edit');
 		if (!is_array($content))
 		{
 			if ($_GET['msg']) $msg = strip_tags($_GET['msg']);
@@ -659,10 +659,6 @@ class timesheet_ui extends timesheet_bo
 					$GLOBALS['egw_info']['flags']['app_header'] .= ' - '.common::show_date($query['enddate']+12*60*60,$df,false);
 				}
 			}
-			if ($query['filter'] == 'custom')	// show the custom dates
-			{
-				$GLOBALS['egw']->js->set_onload("jQuery('.custom_hide').css('visibility', 'visible');");
-			}
 		}
 		$total = parent::get_rows($query,$rows,$readonlys);
 
@@ -811,7 +807,7 @@ class timesheet_ui extends timesheet_bo
 	 */
 	function index($content = null,$msg='')
 	{
-		$etpl = new etemplate('timesheet.index');
+		$etpl = new etemplate_new('timesheet.index');
 
 		if ($_GET['msg']) $msg = $_GET['msg'];
 		if ($content['nm']['rows']['delete'])
@@ -873,7 +869,7 @@ class timesheet_ui extends timesheet_bo
 				'sort'           =>	'DESC',// IO direction of the sort: 'ASC' or 'DESC'
 				'header_left'    => 'timesheet.index.dates',
 				'header_right'   => 'timesheet.index.add',
-				'filter_onchange' => "jQuery('.custom_hide').css('visibility', this.value == 'custom' ? 'visible' : 'hidden'); if (this.value != 'custom' && this.form) this.form.submit();",
+				'filter_onchange' => "app.timesheet.timesheet_filter_change();",
 				'filter2'        => (int)$GLOBALS['egw_info']['user']['preferences'][TIMESHEET_APP]['show_details'],
 				'row_id'         => 'ts_id',
 				//'actions'        => $this->get_actions(),
@@ -1033,7 +1029,7 @@ class timesheet_ui extends timesheet_bo
 	 *
 	 * @param string/int $action 'status_to',set status to timeshhets
 	 * @param array $checked timesheet id's to use if !$use_all
-	 * @param boolean $use_all if true use all timesheets of the current selection (in the session)
+	 * @param boolean $use_all if true use all$key timesheets of the current selection (in the session)
 	 * @param int &$success number of succeded actions
 	 * @param int &$failed number of failed actions (not enought permissions)
 	 * @param string &$action_msg translated verb for the actions, to be used in a message like %1 timesheets 'deleted'
@@ -1224,7 +1220,7 @@ class timesheet_ui extends timesheet_bo
 		$content['msg'] = $msg;
 		$preserv = $content;
 		$sel_options['parent'] = $this->status_labels;
-		$etpl = new etemplate('timesheet.editstatus');
+		$etpl = new etemplate_new('timesheet.editstatus');
 		$etpl->exec('timesheet.timesheet_ui.editstatus',$content,$sel_options,$readonlys,$preserv);
 	}
 
diff --git a/timesheet/js/app.js b/timesheet/js/app.js
new file mode 100644
index 0000000000..cc1640c99b
--- /dev/null
+++ b/timesheet/js/app.js
@@ -0,0 +1,83 @@
+/**
+ * EGroupware - Timesheet - Javascript UI
+ *
+ * @link http://www.egroupware.org
+ * @package timesheet
+ * @author Hadi Nategh	<hn-AT-stylite.de>
+ * @copyright (c) 2008-13 by Ralf Becker <RalfBecker-AT-outdoor-training.de>
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @version $Id$
+ */
+
+/**
+ * UI for timesheet
+ *
+ * @augments AppJS
+ */
+app.timesheet = AppJS.extend(
+{
+	appname: 'timesheet',
+	/**
+	 * et2 widget container
+	 */
+	et2: null,
+	/**
+	 * path widget
+	 */
+
+	/**
+	 * Constructor
+	 *
+	 * @memberOf app.timesheet
+	 */
+	init: function()
+	{
+		// call parent
+		this._super.apply(this, arguments);
+	},
+
+	/**
+	 * Destructor
+	 */
+	destroy: function()
+	{
+		delete this.et2;
+		// call parent
+		this._super.apply(this, arguments);
+	},
+
+	/**
+	 * This function is called when the etemplate2 object is loaded
+	 * and ready.  If you must store a reference to the et2 object,
+	 * make sure to clean it up in destroy().
+	 *
+	 * @param et2 etemplate2 Newly ready object
+	 */
+	et2_ready: function(et2)
+	{
+		// call parent
+
+		this._super.apply(this, arguments);
+		if (typeof et2.templates['timesheet.index'] != "undefined")
+		{
+			this.timesheet_filter_change();
+		}
+
+	},
+
+	/**
+	 *
+	 */
+	timesheet_filter_change: function()
+	{
+		if (etemplate2.getByApplication('timesheet')[0].widgetContainer.getWidgetById('filter').value === "custom")
+		{
+			etemplate2.getByApplication('timesheet')[0].widgetContainer.getWidgetById('timesheet.index.dates').set_disabled(false);
+		}
+		else
+		{
+			etemplate2.getByApplication('timesheet')[0].widgetContainer.getWidgetById('timesheet.index.dates').set_disabled(true);
+		}
+	},
+
+});
diff --git a/timesheet/templates/default/index.xet b/timesheet/templates/default/index.xet
index 4dbebb6177..858bd41877 100644
--- a/timesheet/templates/default/index.xet
+++ b/timesheet/templates/default/index.xet
@@ -8,9 +8,6 @@
 			<description value="End"/>
 			<date statustext="Leave it empty for a full week" id="enddate"/>
 		</hbox>
-		<styles>
-			.custom_hide { visibility: hidden; }
-		</styles>
 	</template>
 	<template id="timesheet.index.add" template="" lang="" group="0" version="1.7.001">
 		<buttononly label="Add" id="add" onclick="egw.open('timesheet');"/>