I have the following code to set the minimum date of datepicker.
$( "#sd" ).datepicker({
// before datepicker opens run this function
beforeShow: function(){
// this gets today's date
var theDate = new Date();
// sets "theDate" 2 days ahead of today
theDate.setDate(theDate.getDate() + 2);
// set min date as 2 days from today
$(this).datepicker('option','minDate',theDate);
},
// When datepicker for start date closes run this function
onClose: function(){
// this gets the selected start date
var theDate = new Date($(this).datepicker('getDate'));
// this sets "theDate" 1 day forward of start date
theDate.setDate(theDate.getDate() + 1);
// set min date for the end date as one day after start date
$('#ed').datepicker('option','minDate',theDate);
}
});
If today's date is 11/14/2012 then the value of datepicker is 11/16/2012. However, since the date should be based on server's datetime I cannot use javascript date because it will get the current date of the computer instead of server's date.
So what I did is change it to the following code:
$( "#sd" ).datepicker({
// before datepicker opens run this function
beforeShow: function(){
// this gets today's date
var theDate = new Date();
// sets "theDate" 2 days ahead of today
//theDate.setDate(theDate.getDate() + 2);
theDate.setDate(<?php echo $this->session->userdata('checkin') ?>);
// set min date as 2 days from today
$(this).datepicker('option','minDate',theDate);
},
// When datepicker for start date closes run this function
onClose: function(){
// this gets the selected start date
var theDate = new Date($(this).datepicker('getDate'));
// this sets "theDate" 1 day forward of start date
theDate.setDate(theDate.getDate() + 1);
// set min date for the end date as one day after start date
$('#ed').datepicker('option','minDate',theDate);
}
});
Please take a look at this line:
theDate.setDate(<?php echo $this->session->userdata('checkin') ?>);
BTW, I am using codeigniter session.
This works great but the problem is the minimum date in datepicker is not set to 11/16/2012 instead it was set to 11/2/2012.
Anyone know how to insert the PHP value correctly into jQuery?
I have already found the answer. Here it is:
$( "#sd" ).datepicker({
// before datepicker opens run this function
beforeShow: function(){
// this gets today's date
var theDate = new Date();
theDate.setDate(<?php echo date('d', strtotime($this->session->userdata('checkin'))) ?>);
// set min date as 2 days from today
$(this).datepicker('option','minDate',theDate);
},
// When datepicker for start date closes run this function
onClose: function(){
// this gets the selected start date
var theDate = new Date($(this).datepicker('getDate'));
// this sets "theDate" 1 day forward of start date
theDate.setDate(theDate.getDate() + 1);
// set min date for the end date as one day after start date
$('#ed').datepicker('option','minDate',theDate);
}
});
It should extract the day only and not the whole date.
theDate.setDate(<?php echo date('d', strtotime($this->session->userdata('checkin'))) ?>);
Instead of
theDate.setDate(<?php echo $this->session->userdata('checkin') ?>);
Related
I use the popular JQuery UI Datepicker to add/modify events on my web site. I am having a problem with getting the date to show up right using setDate. The incorrect date seems to always show up no matter what I do. Here are some various things I have tried:
The date shows up as 01/17/1970 when it should be 10/15/2015, this is how I need it to work, with the php:
$(function() {
var date = new Date(<?php echo strtotime($date); ?>);
$("#date").datepicker();
$("#date").datepicker("setDate", date);
$("#date").datepicker( "option", "showAnim", "slideDown" );
});
The date has inconsistent values when done like this, the date will always be wrong no matter what date you set, but there is no pattern.
$(function() {
var date = new Date(2015, 10, 15);
$("#date").datepicker();
$("#date").datepicker("setDate", date);
$("#date").datepicker( "option", "showAnim", "slideDown" );
});
The Javascript Date object's constructor takes milliseconds when given only one argument.
The PHP function strtotime() returns the Unix Timestamp, the number of seconds since 1970-01-01.
If you multiply the timestamp by 1,000, you'll get a suitable value to pass to the Date constructor.
var date = new Date(<?php echo (strtotime($date) * 1000); ?>);
I had also tried it like this previously, but forgot to put quotation marks around the php. Now it works:
<script>
$(function() {
$("#date").datepicker();
$("#date").datepicker("setDate", "<?php echo $date ?>");
$("#date").datepicker( "option", "showAnim", "slideDown" );
});
</script>
i have used a date picker from bootstrap. I was wondering how would i exclude the 10 days from the selected day the user has clicked
for example the user chooses 10th April 2015. That user can only select dates from 10th April 2015 - 19th April 2015 which would be the ending date.
Here is my code for the date picker.
<script type="text/javascript">
var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
$(function () {
$('#startdate').datetimepicker({
minDate:today,
format: 'YYYY-MM-DD HH:MM:SS'
}).change(function (selected) {
var startDate = new Date(selected.date.valueOf());
$('#enddate').datetimepicker('maxDate', startDate+10);
});
$('#enddate').datetimepicker({
minDate:today,
format: 'YYYY-MM-DD HH:MM:SS'
});
});
</script>
Option "enabledDates", disables selection of dates NOT in the array, perhaps that will work for you?
http://eonasdan.github.io/bootstrap-datetimepicker/Options/#enableddates
I know this question has been asked many times as I have found a few on google and also on stackoverflow.
but none of them explained how to format my datetime in my php so it works in combination with jquery countdown timer. so I am going to ask it here in a hope i get someone shed a light on this for me.
Basically what i am trying to do is to create a countdown timer which will work with mysql datetime.
the datetime is stored in mysql so All need to do is to get the correct format in my php so the countdown timer could work with it.
I am using this plugin: http://keith-wood.name/countdown.html
and here is what i have so far:
PHP formatting:
$end_date = date("m d Y H:i:s T", strtotime($row["end_date"]));
Jquery/Javascript code:
<script type="text/javascript">
$(function(){
var countdown = $('#countdown'),
ts = new Date(<?php echo $end_date * 1000; ?>),
finished = true;
if((new Date()) > ts)
{
finished = false;
}
$('#defaultCountdown').countdown({
timestamp : ts,
callback : function(days, hours, minutes, seconds)
{
var message = "";
message += days + " days, ";
message += hours + " hours, ";
message += minutes + " minutes, ";
message += seconds + " seconds ";
message = (finished ? "Countdown finished" : "left untill the New Year");
countdown.html(message);
}
});
});
</script>
when i run this code, all i get is 0 hours, 0 minutes, 0 seconds.
I can only suspect that the issue is from formatting the datetime in my php section!
or am i missing something else as well?
okay I have managed to minify the code to this:
<script type="text/javascript">
$(document).ready(function () {
$('#defaultCountdown').countdown({
until: new Date(<?php echo $end_date; ?>),
compact: true
});
});
</script>
and changed the php to this:
$end_date = date("Y, n, j, G, i, s", strtotime($row["end_date"]));
However, the time shown in the coutdown timer is wrong (way off).
the $end_date is: September 22 2013 23:30:00 GMT in mysql datetime
but the jquery countdown timer is showing:
34d 06:21:48
2013, 9, 22, 23, 30, 00
34days and 6 hours blah blah is absolutely wrong!
what am i doing wrong here now?
The JavaScript Date object is constructed as follows:
Date(year, month, day, hours, minutes, seconds, milliseconds)
That means you probably should be doing something along these lines:
$end_date = date("Y, n, j, G, i, s", strtotime($row["end_date"]));
Sources:
JavaScript Date-object
PHP date-function
EDIT:
In addition, I seem to have found the problem in the jQuery Countdown manual:
A note on Date - the JavaScript Date constructor expects the year,
month, and day as parameters. However, the month ranges from 0 to 11.
To make explicit what date is intended (does a month of 3 mean March
or April?) I specify the month from 1 to 12 and manually subtract the
1. Thus the following denotes 25 December, 2010.
So, you'd have to split the string, substract 1 from the month and rebuild...
$tmp_date = explode(', ', $end_date);
$tmp_date[1] = $tmp_date[1] - 1;
$end_date = implode(', ', $tmp_date);
Link to jsFiddle
im writing a small calendar based on php and jquery which has the a function to calculate the time difference and display a popup 15 minutes before.
Can some one tell me how can i calculate the time difference in minutes and popup 15 minutes before.
my time is saved as
18-07-2012 15:13:54
jsBin demo
var php = '19-07-2012 03:00:00'.split('-');
var phpDate = php[1]+'/'+php[0]+'/'+php[2];
var phpTime = new Date(phpDate).getTime();
var currTime = new Date().getTime();
var difference= phpTime-currTime;
var leftMin = Math.ceil( difference/(1000*60) );
$('#test').text(leftMin+' MINUTES LEFT!');
Code explanation:
To get the remaining time I've done a millisecond comparison of the php returned time in milliseconds from Jan. 1 1970
and the current time in ms from Jan 1 1970 - subtracting the two values and getting the milliseconds difference. To calculate that difference in minutes I've just done:
var leftMin = Math.ceil( difference/(1000*60) );
The trick was to get the right time format and to revert your (php) returned time to that format too.
The default format looks like: MONTH/DAY/YEAR HOURS:MINUTES:SECONDS
To convert the php returned time '19-07-2012 03:00:00'to that one, I used:
var php = '19-07-2012 03:00:00'.split('-'); // split in array fractions
var phpDate = php[1]+'/'+php[0]+'/'+php[2]; // reposition array keys and add '/'
which returns: 07/19/2012 03:00:00 and now we can compare it to the current time e.g.:
07/19/2012 03:45:21
To retrieve the ms from your converted php time we can use:
var phpTime = new Date(phpDate).getTime(); // get "ms from our string
and for the current time we just take:
var currTime = new Date().getTime(); // get "ms from 1/1/1970
Now having our two milliseconds values we can simply subtract them to get the remaining time:
var difference= phpTime-currTime;
Check PHP's DateTime::diff! Maybe it helps you.
var dateStr = '18-07-2012 15:13:54'//Day-Month-Year
var dateArray = dateStr.split('-')
var d1 = new Date(dateArray[1]+'-'+dateArray[0]+'-'+dateArray[2])
var dateStr2 = '18-07-2012 14:10:54'//Day-Month-Year
var dateArray2 = dateStr2.split('-')
var d2 = new Date(dateArray2[1]+'-'+dateArray2[0]+'-'+dateArray2[2])
var minutes = (d1-d2)/1000/60
-edit; revised code below:-
function timeDiff(date1, date2){
//date format: Day-Month-Year
var dateArray = date1.split('-')
var d1 = new Date(dateArray[1]+'-'+dateArray[0]+'-'+dateArray[2])
var dateArray2 = date2.split('-')
var d2 = new Date(dateArray2[1]+'-'+dateArray2[0]+'-'+dateArray2[2])
var minutes = (d1-d2)/1000/60
return minutes;
}
if(timeDiff('18-07-2012 15:13:54', '18-07-2012 14:59:54')<=15){
alert('popup')
}
php has an mktime() function (http://php.net/manual/en/function.mktime.php) which takes in a hours, minutes, seconds, month, day, year and calculates the seconds since the epoch (in like 1971). Then you can subtract 15*60 use the date() function to go from seconds back to a date format. (http://php.net/manual/en/function.date.php)
Once the user has selected the date from the datepicker, i want to add 41 days.
<script language="javascript">
$(document).ready(function() {
$("#startdate").datepicker({ dateFormat: 'd/m/y'});
$('#startdate').datepicker({
onSelect: function(dateStr) {
var nights = parseInt($('#numofdays').val());
var depart = $.datepicker.parseDate('d/m/y', dateStr);
depart.setDate(depart.getDate('d/m/y') + nights);
$('#calc').val(depart);
}
});
});
</script>
Start: <input type="text" id="startdate" class="datepicker"><br />
<input type="hidden" id="numofdays" value="41"><br />
Calc: <input type="text" id="calc">
You might just need to combine the options in the same initiating function:
$("#startdate").datepicker({
dateFormat: 'd/m/y',
onSelect: function(dateStr, inst) {
var nights = parseInt($('#numofdays').val());
var depart = $.datepicker.parseDate('d/m/y', dateStr);
depart.setDate(depart.getDate('d/m/y') + nights);
$('#calc').val(depart.toLocaleDateString());
}
});
See this in action: http://jsfiddle.net/william/L9Szd/.
$('#startdate').datepicker('getDate') will return a Date object
d = $('#startdate').datepicker('getDate');
d.setDate(d.getDate()+nights); // add int nights to int date
alert(d);
Adding d.getDate() and nights will jump time forward. So if 9/16/2011 + 41 days you'll get 10/25/2011
would seem strange as a user to select a date, and then the box says a date that's 41 days later instead of the one I picked. why not do this addition server side with PHP?
$date_string = date('Y-m-d', strtotime('+41 days', strtotime($_POST['date_input'])));
This is the only simple way I found to do this:
To set date to 41 days ahead of the selected date:
1.Fetch selected date from a datepicker field
var newdate = new Date($("#datepicker_date_field_1").datepicker("getDate"));
2.Increase the date got from above
newdate.setDate(newdate.getDate() + 41);
3.Assign the newly formed date to another (or same) datepicker field
$("#datepicker_date_field_2").datepicker("setDate",newdate);