CJuiSlider & extended javascript functions..

I am trying to implement CJuiSlider into a form to manage my two time fields (ETA start and end arrival times for a job).

In my renderpartial _form view for job/create I have the below code. However I need to extend the basic javascript to a few javascript functions

So question is, how do I implement a larger amount of javascript and reference it as per the 2nd example contained at Using-a-jquery-ui-slider-to-select-a-time-range

So far I have it creating & storing values into the right fields but need the extended javascript to convert it to HH:MM format so it validates and stores correctly in the DB…

	<div class="row">

		<?php $this->widget('zii.widgets.jui.CJuiSlider', array(

								'id'=>'amtSlider',

							    'options'=>array(

									'min'=>0,

									'max'=>1440,

									'step'=>30,

									'range'=>true,

									'values'=>array(540,1020),

									'slide'=>'js:function(event, ui) { $("#job_org_starttime").val(ui.values[0]); $("#job_org_finishtime").val(ui.values[1]);}',

								),

								'htmlOptions'=>array(

									'style'=>'height:12px;'

								),

							)); ?>

		<?php //echo $form->labelEx($model,'org_starttime'); ?>

		<?php echo $form->textField($model,'org_starttime'); ?>


		<?php //echo $form->labelEx($model,'org_finishtime'); ?>

		<?php echo $form->textField($model,'org_finishtime'); ?>

		<?php echo $form->error($model,'org_starttime'); ?>

		<?php echo $form->error($model,'org_finishtime'); ?>

	</div>

Code that needs to be replaced;

'slide'=>'js:function(event, ui) { $("#job_org_starttime").val(ui.values[0]); $("#job_org_finishtime").val(ui.values[1]);}',

Code I need as per example @ Using-a-jquery-ui-slider-to-select-a-time-range;

function slideTime(event, ui){

	var minutes0 = parseInt($("#slider-range").slider("values", 0) % 60);

	var hours0 = parseInt($("#slider-range").slider("values", 0) / 60 % 24);

	var minutes1 = parseInt($("#slider-range").slider("values", 1) % 60);

	var hours1 = parseInt($("#slider-range").slider("values", 1) / 60 % 24);

	$("#time").text(getTime(hours0, minutes0) + ' - ' + getTime(hours1, minutes1));

}


function getTime(hours, minutes) {

	var time = null;

	minutes = minutes + "";

	if (hours < 12) {

		time = "AM";

	}

	else {

		time = "PM";

	}

	if (hours == 0) {

		hours = 12;

	}

	if (hours > 12) {

		hours = hours - 12;

	}

	if (minutes.length == 1) {

		minutes = "0" + minutes;

	}

	return hours + ":" + minutes + " " + time;

}

slideTime();

(Obviously I am going to tweak this code so its 24hr format)

Solved it myself… not sure if its the best way but it works!

'slide'=>'js:function(event, ui) {

  var minutes0 = parseInt(ui.values[0]%60);

  var hours0 = parseInt(ui.values[0]/60 % 24);

  minutes0 = minutes0 + "";

  hours0 = hours0 + "";

  if (minutes0.length == 1) {minutes0 = "0" + minutes0;}

  if (hours0.length == 1) {hours0 = "0" + hours0;}

  $("#job_org_starttime").val(hours0 + ":" + minutes0);


  var minutes1 = parseInt(ui.values[1]%60);

  var hours1 = parseInt(ui.values[1]/60 % 24);

  minutes1 = minutes1 + "";

  hours1 = hours1 + "";

  if (minutes1.length == 1) {minutes1 = "0" + minutes1;}

  if (hours1.length == 1) {hours1 = "0" + hours1;}

  $("#job_org_finishtime").val(hours1 + ":" + minutes1);

}',

Just bumped into an issue when updating this via job/update and the slider gets its values from,

'values'=>array(540,1020),

Is there anyway we can use javascript, or other means, to set default values from ones stored in our DB when we are updating this job?

^ as in using the stored start/finish times in the job record.

Ok, figured this out myself, adding it here in case others find it useful. I do this by passing an additional array with 2 values from the controller to the view and then assign them to the slider.

In my loadModel function I strip the seconds from my times so HH:MM:SS becomes HH:MM. I do not need seconds so remove them at this point.

In both my actionCreate & actionUpdate I pass another array, like so,

For actionCreate

$this->render('create',array(

                 'model'=>$model,

                 'slid'=>array(540, 1020),

              ));

540 seconds = 09:00 (9am) and 1020 seconds = 17:00 (5pm). 9-5pm is my default time for arrival for a new job (ie the whole day)

and ,

For actionUpdate

$this->render('update',array(

                 'model'=>$model,

                 'slid'=>array($this->getDecTime($model->org_starttime), $this->getDecTime($model->org_finishtime)),

              ));

$this->getDecTime($model->org_starttime) converts the string value ‘HH:MM’ to a decimal value in seconds.

Function getDecTime() is purely a function that converts, for example, 09:00 to 540 seconds suitable for the slider.

getDecTime

public function getDecTime($timestr) {

   // timestr is always HH:MM

   $h = (int)substr($timestr, 0, 2);

   $m = (int)substr($timestr, -2);

   $timeval = $h * 60 + $m;

   return $timeval;

}

In the views create.php and update.php I have the following (to pass on the slider start & finish times);

<?php echo $this->renderPartial('_form', array('model'=>$model, 'slid'=>$slid,)); ?>

and, in my _form.php I have the following in my slider gadget;

<?php $this->widget('zii.widgets.jui.CJuiSlider', array(

...

    'values'=>$slid,

...

Code is pretty rough but it works nicely. Hope this helps out.