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)