Disabling jQuery UI Date Picker Dates - javascript

I am trying to disable dates in a jQuery UI Date Picker, it works when I hard code the dates in to the variable in the JS file as follows:
var bookedDays = ["2015-3-7","2015-3-8","2015-3-15"];
In my PHP file I have:
<?php
$testing = "SELECT fromdate, todate FROM messages WHERE listing_id = '".$_GET['listingid']."'";
$resulttesting = mysql_query($testing) or die(mysql_error() . "<br>" . $testing);
while ($rowtesting = mysql_fetch_assoc($resulttesting))
{
$from = $rowtesting['fromdate'];
$to = $rowtesting['todate'];
}
$start_time = strtotime($from);
$end_time = strtotime($to);
$date_list = array($from);
$current_time = $start_time;
while($current_time < $end_time) {
//Add one day
$current_time += 86400;
$date_list[] = date('Y-m-d',$current_time);
}
//Finally add end date to list, array contains all dates in order
$date_list[] = $to;
$date_list_res = '["' . implode('","', $date_list) . '"]';
print_r ($date_list_res);
?>
<script type="text/javascript">
var bookedDays = <?php echo json_encode($date_list_res); ?>;
</script>
When I run a console.log in the JS file for the variable bookedDays I get ["2015-03-05","2015-03-06","2015-03-07","2015-03-08","2015-03-08"] output which is read from the database which is correct but these dates are not disabling in the date picker. Does anybody know where I'm going wrong?

Instead of
<?php echo json_encode($date_list_res); ?>;
Type just
<?php echo $date_list_res; ?>;
Everything should be dandy.

Related

Set date from PHP variable to daterangepicker

I am trying to set date from PHP variable (because values are coming from the database) to daterangepicker but it's not working and it's setting the today's date
Code
<?php $start_date = "04-07-2021"; ?>
<?php $end_date = "10-07-2021"; ?>
<input type="text" name="date-range">
<script>
$(document).ready(function() {
var start_date = <?php echo $start_date; ?>;
var end_date = <?php echo $end_date; ?>;
$('input[name="date-range"]').daterangepicker({
startDate: start_date,
endDate: end_date,
locale: {
format: 'DD-MM-YYYY'
}
});
});
</script>
Your dates are strings so you need to put them in quotes when you turn them into JS string literals:
var start_date = "<?php echo $start_date; ?>";
var end_date = "<?php echo $end_date; ?>";
If you don't, they'll be incomprehensible to the JS interpreter and cause a syntax error (which should have been visible in your browser's Console, although you didn't mention it).

get jQuery variable in php from one page to another

I have a loop on my archive-tour page in which I output dates of on week after then the selected date.
<ul class="uol">
<?php
$start = strtotime($_GET['date']);
$dates = array();
for ($i = 0; $i <= 7; $i++) {
$date = date('Y-m-d', strtotime("+$i day", $start));
$date1 = $date;
$day = date('D', strtotime($date1));
$date = explode('-', $date);
$dateinput = date('Y-m-d', strtotime("+$i day", $start));
$date = $date[2];
echo '<li class="lia"><input type="hidden" class="getdate" value="'.$dateinput.'">' . $date . ' ' . $day . '</li>';
}
?>
<li class="lia" style="background-color:blue"><a style="background- color:blue" href="#tabs-0" class="date tdate"></a></li>
</ul>
Here i have another loop on buttons as seen below.
1:00 am - 2:00 am......
<button type="button" style="background-color:blue" id="ttime<?php echo $post->ID?>" class="btn btn-default time-pick tt_time" value=""></button>
for ($i = 0; $i <= 23; $i++) {
am = "";
if ($i <= 12) {
$am = "am";
} else {
$am = "pm";
}
echo '<button type="button" class="btn btn-default">' . $i.':00 ' . $am . ' - ' . ++$i .':00 '. $am . '</button> ';
--$i;
}
Now user can select date and according time to book tour.
i am getting the selected time and date and i want to highlight the above date and time accordingly. currently setting time and date outer then the loop. but i want to match date with selected date, if it present then highlight it and same for the time. for example in user selects 9:00 am - 10:00 am then my code add one more button with this time. i want to highlight the existing when by applying a if condition in loop that if date=selcted_date then highlight that one.
jQuery('#time<?php echo $post->ID?>').html(t_time);
$(".tdate").html(date);
how can i send the jquery variable t_time from footer page to archive page and get it on archive page in php so that i can use it in if condition.
Remember its is wordpress.
In jquery you can use localStorage.
localStorage.setItem('t_time','Your setTime' ); //set your value
And to get
localStorage.getItem('t_time'); //Get your value
Use jquery's $.post() as follows..
var ttime = jQuery('#time<?php echo $post->ID?>').html();
$.post('php_file_name.php',{'ttime':ttime},function(data,status){
});
And in your php file..
$time = $_POST['ttime'];//get ttime send from jquery
//echo $time

Javascript and PHP using For loop

I have the following code that will output a line chart as follows :
<script class="code" type="text/javascript">
$(document).ready(function(){
var line1=[['2008-08-12 ',14], ['2008-09-12 ',6.5], ['2008-10-12 ',5.7], ['2008-11-12 ',9], ['2008-12-12 ',8.2]];
var plot1 = $.jqplot('chart1', [line1], {
title:'Daily Sales',
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer
}
},
series:[{lineWidth:4, markerOptions:{style:'square'}}]
});
});
</script>
The output for the above code is correct, but i want to insert a PHP loop to select data from mysql and place it insde var line1 as an array
So I created a test code as follows :
<script class="code" type="text/javascript">
$(document).ready(function(){
<?php
$date = date('Y-m-d');
for($i=1;$i<6;$i++){
$newdate = strtotime ( '+1 month' , strtotime ( $date ) ) ;
$newdate = date ( 'Y-m-j' , $newdate );
?>
var line1=[['<?php echo $newdate; ?> ',<?php echo $i ?>]];
<?php
$date = $newdate;
}
?>
var plot1 = $.jqplot('chart1', [line1], {
title:'Daily Sales',
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer
}
},
series:[{lineWidth:4, markerOptions:{style:'square'}}]
});
});
</script>
This outputs the last value which is 2015-5-16 and 5 all i want is to output all the result from 1 to 5 and having dates incremented by each month 2014-12-16 to 2015-5-16.
I hope this makes sense ! Thank You
You're doing this wrong. You don't use PHP to dump text into a Javascript code block directly. That's a sure-fire way of introducing a javascsript syntax error and killing the entire code block.
You build a native PHP structure (array, object, whatever) and then you json_encode() that.
e.g.
<?php
$results = get_data_from_db();
$data = array();
while($row = fetch_row_from_result($results)) {
$data[] = array($row['foo'], $row['bar']);
}
?>
<script type="text/javascript">
var data_from_db = <?php echo json_encode($data); ?>;
</script>
Replace your PHP-Block for "var line1=[['..." with this:
<?php
$date = date('Y-m-d');
$js = " var line1=[";
for($i=1;$i<6;$i++) {
$newdate = strtotime ( '+1 month' , strtotime ( $date ) ) ;
$newdate = date ( 'Y-m-j' , $newdate );
if($i>1) { $js.= ", "; }
$js.= "['".$newdate." ',".$i."]";
$date = $newdate;
}
$js.= "];";
echo $js;
?>

Inserting PHP while in JQuery

I am trying to embed a data picker calendar in my php site. The code, which came off the shelf from DatePicker, allows to select some pre-highlighted dates, which is good as I have a list in a db table with the dates I need.
However, I have had no success in finding a way to include php within the script, or the other way round.
The original calendar script is as follows:
<script type='text/javascript'>
$(function() {
$("#txtDate").datepicker({dateFormat: 'yy-mm-dd'});
});
$(document).ready(function() {
var SelectedDates = {};
SelectedDates[new Date('02/24/2014')] = new Date('02/24/2014');
SelectedDates[new Date('03/10/2014')] = new Date('03/10/2014');
$('#txtDate').datepicker({
beforeShowDay: function(date) {
var Highlight = SelectedDates[date];
if (Highlight) {
return [true, "Highlighted", Highlight];
}
else {
return [true, '', ''];
}
}
});
});
</script>
I would like to be able to select a long list of dates to go in
SelectedDates[new Date('03/10/2014')] = new Date('03/10/2014');
so my original idea was to do as follows:
$(document).ready(function() {
var SelectedDates = {};
<?php
$query = "SELECT eventDate FROM database.calendar WHERE tag='R' AND competition='1'";
$result = mysql_query($query);
while ($row = mysql_fetch_row($result)) {
$eventdate = $row[0];
SelectedDates[new Date('$eventdate')] = new Date('$eventdate');
}
?>
Sadly, this doesn't work (and neither do any of the various attempts to re-add tags within the PHP.
Any idea? Thank you so much for your help!
You have to close your PHP tags to output JavaScript (or use echo as mentioned in a comment):
$(document).ready(function() {
var SelectedDates = {};
<?php
$query = "SELECT eventDate FROM database.calendar WHERE tag='R' AND competition='1'";
$result = mysql_query($query);
while ($row = mysql_fetch_row($result)) {
$eventdate = $row[0];
?>
SelectedDates[new Date('<?php echo $eventdate; ?>')] = new Date('<?php echo $eventdate; ?>');
<?php
}
?>
});
Although I should mention that what you are trying to do is not really ideal. Do the PHP while loop separately, get that into an array, and json_encode that.

jQuery Calender - More than one event per day

I have a calendar on my site that uses javascript/jquery to place events in the calendar. All the events are stored in a MySQL database with the title and Unix timestamp.
My problem is that this method (shown in the code below) only allows one event per day, and creating two rows with the same date, only uses the latter of the two. There are several instances where I need two or more events in one day.
My code:
var CalendarEvent = function (time, title) {
this.time = time;
this.title = title;
}
var allEvents = {
<?php require_once 'ndx/mysql.php';
$events = mysqli_query($con, "SELECT * FROM events");
while($lse = mysqli_fetch_array($events)):
$date = date('Y-m-d', $lse['timestamp']);
$notime = $lse['notime'];
if($notime != 'true'){
$time = date('g:i a', $lse['timestamp']);
}else{
$time = '';
}
$event = addslashes($lse['title']);
?>
'<?php echo $date; ?>': [
new CalendarEvent('<?php echo $time; ?>', '<?php echo $event; ?>')
],
<?php endwhile; ?>

Categories

Resources