first code is for take dates between 2 dates from my table reservas...
<?php
include "controlreservas/conexion.php";
$sql1="select llegada, salida from reservas";
$query = $con->query($sql1);
$r=$query->fetch_array();
$begin = new DateTime( $r["llegada"] );
$end = new DateTime( $r["salida"] );
$end = $end->modify( '+1 day' );
$interval = new DateInterval('P1D');
$daterange = new DatePeriod($begin, $interval ,$end);
?>
<?php foreach ($daterange as $date) : ?>
<?php echo $date->format("Y-m-d"); ?>
this it´s working :
2016-12-20
2016-12-21
2016-12-22
2016-12-23
2016-12-24
Now the next code is for disable this dates (all this dates, only get from the select ) in my datepicker :
<script>
$(function() {
var disabledDays = ["<?php echo $date->format("Y-m-d"); ?>"];
var date = new Date();
jQuery(document).ready(function() {
$( "#datepicker1").datepicker({
dateFormat: 'Y-m-d',
beforeShowDay: function(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if($.inArray(y + '-' + (m+1) + '-' + d,disabledDays) != -1) {
//return [false];
return [true, 'ui-state-active', ''];
}
}
return [true];
}
});
});
});
</script>
the result is only disables first date, not all dates :
thanks for you time
The variable disabledDates (in javascript) should be an Array of strings, where each string represents a date that you want to disable.
What you can do is create that list from the $daterange variable that you have in php:
$dates_ar = [];
foreach ($daterange as $date) {
$dates_ar[] = $date->format("Y-m-d");
}
$disabled_dates = '"' . implode('", "', $dates_ar) .'"';
And then in your javascript code you can use the $disabled_dates variable (which is a string that contains the values you need:
$(function() {
var disabledDays = [<?php echo $disabled_dates; ?>];
Related
I'm programming appointment planer and still struggling with the issue that javascript doesn't generate events and prints the code just in plain text, so at first I have one php function which fetches all appointments from the sql database and generates javascript code
<script>
function getEventData() {
<?php
function showAppointments($von, $bis){
$link = OpenDB();
try {
$query = 'SELECT termin_id, client, dateFrom, dateTill, title, descri FROM termin WHERE dateFrom BETWEEN :von AND :bis';
$statement = $link->prepare($query);
$statement->bindValue(':von', $von, PDO::PARAM_STR);
$statement->bindValue(':bis', $bis, PDO::PARAM_STR);
$statement->execute();
$row = $statement->fetchAll();
}
catch (PDOException $e) {
p($e);
}
CloseDB($link);
return $row;
}
if(empty($von) && empty($bis)) {
$von = date("Y.m.j",strtotime("monday this week"));
$bis = date("Y.m.j",strtotime("sunday this week"));
}
if(isset($_POST['last_week'])){
$von = date("Y.m.j",strtotime("previous monday"));
$bis = date("Y.m.j",strtotime("previous sunday"));
}
if(isset($_POST['next_week'])){
$von = date("Y.m.j",strtotime("next monday"));
$bis = date("Y.m.j",strtotime("next sunday"));
}
$rows = showAppointments($von, $bis);
echo "const appointments = [";
for($i = 0; $i < sizeof($rows); $i++) {
$columns = array_values($rows[$i]);
echo "[";
for($j=0; $j< sizeof($columns); $j++){
echo "'".$columns[$j]."'";
if( $j < sizeof($columns)-1) echo ",";
}
echo "]";
if( $i < sizeof($rows)-1) echo ",";
}
echo "];";
?>
then all events are generated by jquery and returned
return {
events:[
$.each(appointments, function(index, row){
eval("{'id':"+ row[0] + ",'client':"+ row[1] +",'start':" + new Date(row[2])+",'end': "+ new Date(row[3]) +",'title':'"+ row[4] +"','description':'"+ row[5] +"'}");
});
]}}
</script>
the code in foreach is printed as plain text, how can I fix the issue? it should actually print something like
{'id':1, 'start': new Date(year, month, day, 12), 'end': new Date(year, month, day, 13, 30),'title':'Lunch with Mike'}
you should try the Jquery.each outside Events and then use eval(Array.join); in JavaScript, that should work
* In javascript part i got the dates that are booked by user on dates, i n calendar i marked that dates are unavilable, but i want to show user info on that dates
<script type="text/javascript">
// Add New Dates and Block Out Booked Days Below
/*var unavailableDates1 = ["20-5-2016", "21-5-2016", "22-5-2016", "23-5-2016", "5-6-2016", "7-6-2016", "8-6-2016",
"15-6-2016", "16-6-2016", "25-6-2016", "26-6-2016", "27-6-2016", "28-6-2016", "14-2-2016",
"15-7-2016", "16-7-2016", "17-7-2016", "18-7-2016", "19-7-2016","20-7-2016","21-7-2016",
]; */
var unavailableDates = <?php echo json_encode($arr2); ?>;
var unavaila = <?php echo json_encode($e); ?>;
document.write(unavailableDates);
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1 ) + "-" + date.getFullYear();
if($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
}else {
return [false, "", unavaila];
}
}
$(function() {
$("#Datepicker1").datepicker({
numberOfMonths:3,
beforeShowDay: unavailable
});
});
</script>
*
and my php code is getting the dates from database in between start to end m, and showing calendar booked, how to show info on that
<?php
include 'dbconfig.php';
$query_getaway = "SELECT * FROM getaway_table; ";
$result_getaway = $db->query($query_getaway);
$category = mysqli_real_escape_string($db, filter_input(INPUT_POST, 'category')) .'<br>';
$resort = mysqli_real_escape_string($db, filter_input(INPUT_POST, 'resorts')) .'<br>';
if( $category != 0 ){
$query = "SELECT * FROM booking_request where room_id = '$resort' '<br>' ";
$result = $db->query($query);
if( $result -> num_rows > 0 ) {
while( $row = $result-> fetch_assoc() )
{
$name = $row['getaway_name']." <br>";
$start = $row['check_in_date']." <br>";
$end = $row['check_out_date']." <br>";
$guest_n[]= $row['guest_name'];
$guest_number[]= $row['guest_phone'];
$arr1 = range(strtotime($row['check_in_date']),strtotime($row['check_out_date']), "86400");
array_walk_recursive($arr1, function(&$element) { $element = date("j-n-Y", $element); });
foreach ($arr1 as $value)
{
$arr2[]= $value;
}
$arrt= (array_merge($guest_n, $guest_number));
//print_r($arrt);
foreach($arrt as $val)
{
echo $arr_val[]=$val;
}
$arr[]= $value;
}
}
else { echo "select" ;}
?>
how to get the result to show user details on mousehover on dates from db.
I have php code from this I got complete dates of room that are booked by one user like 12-15.
And 17-18, for second user 20-21, I got marked these dates on calendar.
Now I want to show user info on mouse hover:
<?php
include 'dbconfig.php';
$query_getaway = "SELECT * FROM getaway_table; ";
$result_getaway = $db->query($query_getaway);
$category = mysqli_real_escape_string($db, filter_input(INPUT_POST, 'category')) .'<br>';
$resort = mysqli_real_escape_string($db, filter_input(INPUT_POST, 'resorts')) .'<br>';
if( $category != 0 ){
$query = "SELECT * FROM booking_request where room_id = '$resort' '<br>' ";
$result = $db->query($query);
if( $result -> num_rows > 0 ) {
while( $row = $result-> fetch_assoc() )
{
$name = $row['getaway_name']." <br>";
$start = $row['check_in_date']." <br>";
$end = $row['check_out_date']." <br>";
$guest_n[]= $row['guest_name'];
$guest_number[]= $row['guest_phone'];
$arr1 = range(strtotime($row['check_in_date']),strtotime($row['check_out_date']), "86400");
array_walk_recursive($arr1, function(&$element) { $element = date("j-n-Y", $element); });
foreach ($arr1 as $value)
{
$arr2[]= $value;
}
$arrt= (array_merge($guest_n, $guest_number));
//print_r($arrt);
foreach($arrt as $val)
{
echo $arr_val[]=$val;
}
$arr[]= $value;
}
}
else { echo "select" ;}
?>
Then in js part I showed unavailable dates, bot on hover I'm unable to show user complete info:
<script type="text/javascript">
// Add New Dates and Block Out Booked Days Below
/*var unavailableDates1 = ["20-5-2016", "21-5-2016", "22-5-2016", "23-5-2016", "5-6-2016", "7-6-2016", "8-6-2016",
"15-6-2016", "16-6-2016", "25-6-2016", "26-6-2016", "27-6-2016", "28-6-2016", "14-2-2016",
"15-7-2016", "16-7-2016", "17-7-2016", "18-7-2016", "19-7-2016","20-7-2016","21-7-2016",
]; */
var unavailableDates = <?php echo json_encode($arr2); ?>;
document.write(unavailableDates);
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1 ) + "-" + date.getFullYear();
if($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
}else {
this line is showing unavlaible on hover, i want from database user info
return [false, "","unavalible"];
<?php echo $val; ?>
}
}
$(function() {
$("#Datepicker1").datepicker({
numberOfMonths:3,
beforeShowDay: unavailable
});
});
</script>
I have a container div which loops through items in a PHP array to generate repeating element divs all with a unique ID.
I am using a countdown plugin (http://keith-wood.name/countdown.html) to apply to a date on each element and it worked out in PHP.
This all works fine until I load more elements into the page using AJAX /PHP. The countdown isn't applied to the new items and I am struggling to figure out how I would do this.
echo "<div class=\"item\" id=\"item_$id\">
<h4 class=\"name\">$Name</h4>
<p>$Cat</p>";
if ($expires != '') {
$year = date('Y', strtotime($discount['expires']));
$month = date('n', strtotime($discount['expires']));
$day = date('d', strtotime($discount['expires']));
$hour = date('H', strtotime($discount['expires']));
$minute = date('i', strtotime($discount['expires']));
$secs = date('s', strtotime($discount['expires']));
$countdown_html = '<div class="defaultCountdown" id="countdown_' . $id . '" data-year="'. $year .'" data-month="'. $month .'" data-day="'. $day .'" data-hour="'. $hour .'" data-minute="'. $minute .'" data-secs="'. $secs .'"></div>';
echo "<script type=\"text/javascript\">
$(window).load(function(){
var year = $('#countdown_$id').attr('data-year');
var month = $('#countdown_$id').attr('data-month');
var day = $('#countdown_$id').attr('data-day');
var hour = $('#countdown_$id').attr('data-hour');
var minute = $('#countdown_$id').attr('data-minute');
var secs = $('#countdown_$id').attr('data-secs');
$('#countdown_$id').countdown({until: new Date(year, month - 1, day, hour, minute, secs)});
});
</script>";
}
echo "</div>\n";
}
function loadMoreItems(getQuery, page) {
//load items
$.get(getQuery, null, function(data) {
var container = $(data).find('#container');
if (container) {
var newItemsHTML = "";
newItemsHTML = $(container).html();
var $newItems = $(newItemsHTML);
$container.isotope('insert', $newItems, true);
//add jquery effects to new elements
$newItems.find('.hcaption').hcaptions({effect: "fade"});
$newItems.find(".live-tile").liveTile({pauseOnHover: true});
$('.defaultCountdown').each( function() {
var year = $(this).attr('data-year');
var month = $(this).attr('data-month');
var day = $(this).attr('data-day');
var hour = $(this).attr('data-hour');
var minute = $(this).attr('data-minute');
var secs = $(this).attr('data-secs');
$('#' + this.id).countdown({until: new Date(year, month - 1, day, hour, minute, secs)});
});
}
}, 'html');
}
After your ajax function returns, just call the jquery to initialise the countdowns again.
Instead of using php to echo the values into the jQuery call - add them to the div itself, e.g
<div class="defaultCountdown" data-year="2013" data-month="11">
Then to initialise it would be:
$('div.defaultCountdown').each( function() )
{
year = $(this).attr('year');
...
$(this).countdown({until: new Date(year, month - 1, day, hour, minute, secs)});
});
Add some way of checking if an element has already been processed. You could create the elements initially with class="unprocessed"
<div class="defaultCountdown unprocessed">
The countdown initialise function would then be:
$('div.defaultCountdown.unprocessed').each(function(){...})
After the countdown has been initialised remove the 'unprocessed' class name
$(".element").each(function() {
var item_id = "#" + this.id;
if(this.id != 'discount_0'){
container.find(discount_id).remove();
}
$(element_id).countdown({until: new Date($year, $month - 1, $day, $hour, $minute, $secs)});
});
when you are applying countdown you are calling on $(element_id), it should be
$(item_id)
and you are using $year, $month - 1, $day, $hour, $minute, $secs all these are php variables,you cannot use them as jquery variables
I have a registration form, where people can select multiple dates selected from a database. I use the jQuery UI Datepicker. Everything works fine, but when I submit the form it saves me the date itself like this : "09/16/2012,08/04/2011,04/19/1994". I would like to store the ID of the date instead.
Does anyone know how to get the ID of the selected date, and put it in the value="" attribute?
<input type="text" class="datepicker" name="live[]" value="">
<script>
var dates = [<?php $i=0; while($dataDate = mysql_fetch_object($dates)) : echo ($i>0) ? ", " : ""; echo '"'.date("n-j-Y", strtotime($dataDate->date)).'"'; $i++; endwhile;?>];
var enabledDays = dates;
function enableAllTheseDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < enabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,enabledDays) != -1) {
return [true];
}
}
return [false];
}
$('.datepicker').datepicker({
beforeShowDay: enableAllTheseDays,
yearRange: "1994:2012",
changeMonth: true,
changeYear: true
});
</script>
Okay so heres totally new aproach to get desired outcome.
first of all, put the dates in json obejct.
make your SQL query select id, date from database
now if you have php json available, just use
<?php
while($row = mysql_fetch_object($query) ) {
$data[] = array( "id" => $row['id'], "date" => $row['date'] );
}
echo "var dates = [" . json_encode($data) . "];";
?>
otherwise you can do it like this:
<?php
echo "var dates = [";
while($row = mysql_fetch_object($query) ) {
$data[] = '{"id" : "' .$row["id"] . '", "date" : "' . $row["date"] . '" }';
}
echo implode(',', $data);
echo "];";
?>
Now we got json object which should look like
[{"id" : "12", "date": "2012-02-01"},{"id" : "33", "date": "2012-02-03"}]
i tweaked your function little bit, to work with our json object
function enableAllTheseDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
var datestr = y + "-" + m + "-" + d;
for (i = 0; i < dates.length; i++) {
if( dates[i].date == datestr) {
return [true];
}
}
return [false];
}
$('.datepicker').datepicker({
beforeShowDay: enableAllTheseDays,
yearRange: "1994:2012",
changeMonth: true,
changeYear: true
});
Now back to getting the id
$('.datepciker').on('change',function() {
for(var i = 0; i < dates.length; i++) {
if( dates[i].date == $(this).val() )
var index = dates[i].id;
}
$("#date_id_holder").val( index );
});
and now your $("#date_id_holder") contains the id of selected date