Хорошо, это действительно сводит меня с ума. Вот рабочий пример того, чего я пытаюсь достичь:
http://www.rockaholics-cologne.de/root/testslidenew.php
Однако в моем другом скрипте php, где у меня есть точно такие же библиотеки css и js и в основном тот же код для функции ползунка, за исключением того, что значения отличаются, ползунок не отображается:
<tbody>
<?php
include_once("php_includes/db_conx.php");
$sql = "SELECT TIME_TO_SEC(starttime), TIME_TO_SEC(endtime), date FROM wishtimes WHERE date BETWEEN '$startDate' AND '$endDate' ORDER BY date";
$query = mysqli_query($db_conx, $sql);
$wishtimes = array();
while($row = mysqli_fetch_assoc($query)) {
$weekday = date('l', strtotime($row['date']));
$wishtimes[$weekday] = $row;
}
$dates = date_range($startDate, $endDate);
print_r ($wishtimes);
print_r($dates);
$weekdays = array("Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday");
for($i=0; $i < count($weekdays); $i++) {
?>
<tr>
<td><?php echo $weekdays[$i]?></td>
<?php
if (isset($wishtimes[$weekdays[$i]])) {
?>
<td colspan="25">TEST<div id="slider<?php echo $i?>"></div></td>
<script>
$(function() {
var start = "<?php echo $wishtimes[$weekdays[$i]]['TIME_TO_SEC(starttime)']?>";
var end = "<?php echo $wishtimes[$weekdays[$i]]['TIME_TO_SEC(endtime)']?>";
start = start / 60;
end = end / 60;
$("#slider<?php echo $i?>").slider({
range: true,
min: 0,
max: 1440, /* Hour * 60 from 0:00 to 24:00 */
step: 15,
values: [ start, end ],
slide: function(e, ui) {
var hours = Math.floor(ui.value / 60);
var minutes = ui.value - (hours * 60);
if(hours.length == 1) hours = '0' + hours;
if(minutes.length == 1) minutes = '0' + minutes;
$('#something').html(hours+':'+minutes);
}
});
});
</script>
<td>
<a href><i class="icon-minus-sign"></i></a>
</td>
<?php
} else {
?>
<td colspan="25">
<script type="text/javascript">
function toggle(id) {
if ($('#'+id).is(":hidden")) {
$('#'+id).slideDown("fast");
} else {
$('#'+id).slideUp("fast");
}
}
</script>
<button id="addwishtime" onclick="toggle('<?php echo $i?>')">Add</button></br>
<div id="<?php echo $i?>" style="display: none;">
<?php
/* --- select FIRM of the current user ---
$sql = "SELECT firm FROM team WHERE username='$log_username' LIMIT 1";
$query = mysqli_query($db_conx, $sql);
while ($row = mysql_fetch_array($query)) {
$firmname = $row[0];
} */
$sql = "SELECT starttime, endtime, shiftname, firm FROM shifts WHERE firm='TestBusiness' ORDER BY starttime ASC";
$query = mysqli_query($db_conx, $sql);
while($shifts = mysqli_fetch_array($query)) {
?>
<form method="post" action="">
<input type="hidden" value="<?php echo $dates[$i]?>" name="date">
<?php echo $dates[$i]?>
<input type="hidden" value="<?php echo $shifts['firm']?>" name="firm">
<?php echo $shifts['firm']?>
<input type="hidden" value="<?php echo $shifts['starttime']?>" name="starttime">
<?php echo $shifts['starttime']?>
<input type="hidden" value="<?php echo $shifts['endtime']?>" name="endtime">
<input type="submit" value="<b><?php echo $shifts['shiftname']?></b> Start: <?php echo $shifts['start']?> End: <?php echo $shifts['end']?>">
</form>
<?php
}
?>
</div>
</td>
</tr>
<?php
}
}
?>
</tbody>
«ТЕСТ» распечатывается, но без слайдера. Если я посмотрю в F12 на Chrome, я вижу, что значения установлены для начала и конца. Ползунок div также создается, но просто на высоте 0px
Что мне здесь не хватает ??
РЕДАКТИРОВАТЬ
Я только что удалил этот скрипт из DatePicker, который также находится на той же странице, и как только я это сделаю, он показывает слайдер, но как я могу заставить их работать?
<script>
$(function() {
var startDay;
var endDay;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('.week-picker').datepicker( {
dateFormat: 'yy-mm-dd',
firstDay: 1,
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDay = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() +1);
endDay = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
var startDate = date.getFullYear() + "-" + (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() +1)) + "-" + ((date.getDate() - date.getDay() +1) < 10 ? '0' + (date.getDate() - date.getDay() +1) : (date.getDate() - date.getDay() +1));
var endDate = date.getFullYear() + "-" + (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)) + "-" + ((date.getDate() - date.getDay() +7) < 10 ? '0' + (date.getDate() - date.getDay() +7) : (date.getDate() - date.getDay() +7));
window.location.href = "?startDate=" + startDate + "&endDate=" + endDate;
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDay && date <= endDay)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
</script>
Надеюсь, проблема в том, что вы устанавливаете значения диапазона в виде строки, но требуется числовой или целочисленный тип. Пожалуйста, преобразуйте строку в число, используя следующий метод, или используйте свой собственный метод для преобразования.
start = parseInt (start); end = parseInt (end);
попробуйте это, я надеюсь, вы получите ответ. благодарю вас.
Других решений пока нет …