I have the following function to set the default value of minDate:
$(function() {
$( "#arrival_date" ).datepicker();
$( "#arrival_date" ).datepicker('option','minDate','<?php echo $minDate ?>');
});
But after the page load the $minDate variable sometimes change based on the earliest date in some of my function.
Example if the value of $minDate is "7/29/2012" and after the page is fully loaded sometimes the $mindDate date changes to earlier than "7/29/2012". Say it will change to "7/20/2012".
If this happens I want to change the minDate value of DatePicker to the new date (i.e. "7/20/2012" instead of "7/29/2012").
How to call this function?
UPDATE*
Example code:
<?php
$checkin = "7/29/2012";
$minDate = $checkin;
?>
<head>
$(function() {
$( "#arrival_date" ).datepicker();
$( "#arrival_date" ).datepicker('option','minDate','<?php echo $minDate ?>');
});
</head>
<body>
<?php
for($i=0;$i<$max;$i++){
$r_id=$_SESSION['cart'][$i]['room_id'];
if (!isset($room_id)){
$room_id=$r_id;
}else{
$room_id=$room_id . "," . $r_id;
}
$checkin=$_SESSION['cart'][$i]['checkin'];
$checkout=$_SESSION['cart'][$i]['checkout'];
$nights=$_SESSION['cart'][$i]['nights'];
$q=$_SESSION['cart'][$i]['qty'];
$pname=get_room_type($r_id);
if ($checkin < $minDate) $minDate = $checkin; //<--- here...how can I change the minDate of datepicker to the new value?
}
?>
</body>
</html>
In your case you can so this.
$(function() {
$( "#arrival_date" ).datepicker();
$( "#arrival_date" ).datepicker({ minDate: new Date(<?php echo $checkin ?>) });
});
$( "#arrival_date" ).datepicker( "option", "minDate", selectedDate );
Please refer this link. this may help you. http://jqueryui.com/demos/datepicker/#date-range
I hope this is what you want.
This is taken from an earlier stackoverflow post but it should help you solve your problem
jQuery datepicker minDate variable
$("#checkinDate").change(function() {
test = $(this).datepicker('getDate');
testm = new Date(test.getTime());
testm.setDate(testm.getDate() + 1);
$("#arrival_date").datepicker("option", "minDate", testm);
});
i don't know when or how checkin changes, but maybe something like..
$checkin.change(function () {
newDate = $(this).val();
$( ".selector" ).datepicker({
minDate: new Date(newDate)
});
});
Related
I am working on a codeigniter project which shows a visited path with markers in specific time duration in google map. The map, markers, tooltip, polyline everything works fine in chrome.
But in firefox only one tooltip shows on a marker when the mouse is hovered. Other tooltips dont show up. Then if I click outside the map and hover again on any marker the tooltip shows on that, but not in others. This is same for every marker. And the problem is only in firefox. I get the locations from database. The jsfiddle link is: http://jsfiddle.net/msz08tjx/ Below is the whole code:
<script>
jQuery(document).ready(function(){
$('#frmGPSTag').validationEngine('attach',{
onValidationComplete: function(form, status){
if (status == true){
mapDisplay();
}
}
});
function mapDisplay(){
$.getJSON('<?php echo base_url(); ?>user/gps_tags_json/'+$("#datepicker1").val()+'/'+$("#datepicker2").val(), function(data){
var locations = new Array();
$.each( data, function( key, val ) {
var location = [ parseFloat(val.latitude), parseFloat(val.longitude), val.gps_tag_timestamp];
locations.push(location);
});
if(locations.length > 0)
{
$("#map").css({'height': '600px'});
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker, point, travelCoordinates = new Array();
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
point = new google.maps.LatLng(locations[i][0], locations[i][1]);
marker = new google.maps.Marker({
position: point,
map: map,
title: locations[i][2]
});
travelCoordinates[i] = point
bounds.extend(marker.position);
}
map.fitBounds(bounds);
if(map.getZoom()> 10){
map.setZoom(10);
}
var travelPath = new google.maps.Polyline({
path: travelCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
travelPath.setMap(map);
}
else
{
$("#map").empty();
$("#map").css({'background-color': '','height': 'auto'});
$("#map").html("<?php echo '<ul class=\"list-group\"><li class=\"list-group-item list-group-item-warning\">'.$this->lang->line('no_record').'</li></ul>'; ?>");
}
});
}
});
</script>
and my datepicker functions are:
<script type="text/javascript">
$(function() {
$( "#datepicker1" ).datepicker({
dateFormat: 'yy-mm-dd',
onClose: function( selectedDate ) {
$( "#datepicker2" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#datepicker2" ).datepicker({
dateFormat: 'yy-mm-dd',
onClose: function( selectedDate ) {
$( "#datepicker1" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
I have read a lot of problems like it in the web. But none of the solutions worked for me. Any help would be greatly appriciated. Thanx in advance.
The jsfiddle link is: http://jsfiddle.net/msz08tjx/
Using just release v3 js doesn't seem fix the issue in firefox.
Also add the following marker option will do...
optimized:false
reference-- Issue 7136: Bug: Multiple marker titles not working in stable (3.17.15) version of API.
It is a problem with the "experimental version". Don't use the experimental version in production, it can break unexpectedly.
Change v=3.exp to v=3 in the include of the API:
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'> </script>
To:
<script src='https://maps.googleapis.com/maps/api/js?v=3&sensor=false'> </script>
working fiddle (at least in the version of Firefox I am running, 31.0)
Since Firefox 39 there is not only an issue with the title tag not showing onmousover, but also the mouseover addListener event is not triggering.
Adding "optimised:false" property to the marker properties solves the problem with the mouseover addListener event too.
Ok, Im trying to make a draggable CMS system, now Im stuck on the next problem.
When Im done dragging my 'div' I want to save my new left and top (x and y) variables in my MySQL database using PhP.
I get my left and top variables by the next line of codes:
$(function() {
$( "#3" ).draggable({
stop: function () {
$.post("upload.php", {
left: this.getBoundingClientRect().left,
top: this.getBoundingClientRect().top
})
},
containment: "#containment-wrapper",
scroll: false
});
my upload.php is:
<?
mysql_query("UPDATE nvt SET left='". $_POST['left'] ."'")or die(mysql_error());
mysql_query("UPDATE nvt SET top='". $_POST['top'] ."'")or die(mysql_error());
header("Location: inlogged");
?>
When I'm done dragging my div there is just no reaction?
I think you are missing }); at the end. The code should be :
$(function() {
$( "#3" ).draggable({
stop: function ( event, ui ) {
$.post("upload.php", {
left: parseInt( ui.offset.left ),
top: parseInt( ui.offset.top )
})
},
containment: "#containment-wrapper",
scroll: false
});
}); //see the change
I just want to know if how can my datepicker remembered what month has been selected. For example, I choose June 1, 2013 even after refresh the month to be displayed in date picker is still June.
Here is my code.
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('#weekpicker').datepicker('widget').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('#weekpicker').datepicker( {
changeYear:true,
changeMonth:true,
showButtonPanel:true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#weekpicker').val($.datepicker.formatDate( dateFormat, startDate, inst.settings )
+ ' - ' + $.datepicker.formatDate( dateFormat, endDate, inst.settings ));
selectCurrentWeek();
},
beforeShow: function() {
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
}).datepicker('widget').addClass('ui-weekpicker');
$('.ui-weekpicker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.ui-weekpicker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
You would need to deal with sessions.
Once the website is refreshed, just add the date into a PHP session.
You can read more about sessionsn here and a more concrete example for what you are looking for, here.
Well, you added a space to "" in the if statement. And I guess I have bad logic anyways - you should probably use "&&" instead of "||". So please use the following code exactly as is:
$('input[type=text][id*=myDate1]').datepicker({
showOn: "button",
buttonImage: "/Images/cal.gif",
buttonImageOnly: true,
onSelect: function (dateText, inst) { $('#HiddenField1').val(dateText) },
changeMonth: true,
changeYear: true,
showWeek: true,
firstDay: 1
});
var theDate;
if ($('#HiddenField1').val() != "" && $('#HiddenField1').val() != null) {
theDate = $('#HiddenField1').val();
}
else {
theDate = new Date();
}
alert(theDate);
$('input[type=text][id*=myDate1]').datepicker("option", "showAnim", 'bounce');
$('input[type=text][id*=myDate1]').datepicker("option", "dateFormat", 'dd/mm/yy');
$('input[type=text][id*=myDate1]').datepicker("option", "altFormat", 'dd/mm/yy');
$('input[type=text][id*=myDate1]').datepicker('setDate', theDate);
Hi i developed all this functionality using core PHP everything is working well. Now the main thing is i want this one in CodeIgniter so i am trying to shift the core PHP code into CI code.
My aim is in a view page of codeIgniter there will be two date fields called start date and end date. On the page load which will contain current dates in both fields. These two date fields will be used to select a date range. Those two dates will be shown using below code in the view page called view.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#start_date" ).datepicker({
defaultDate: "+1w",
dateFormat: "yy-mm-dd",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#end_date" ).datepicker( "option", "minDate", selectedDate );
}
}).datepicker("setDate", "0");
$( "#end_date" ).datepicker({
defaultDate: "+1w",
dateFormat: "yy-mm-dd",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#start_date" ).datepicker( "option", "maxDate", selectedDate );
}
}).datepicker("setDate", "0");
});
</script>
</head>
<body>
<div id="main">
<div id="dates">
<label for="start_date">start date:</label>
<input type="text" id="start_date" name="start_date" />
<label for="end_date">end date:</label>
<input type="text" id="end_date" name="end_date" />
</div>
</div>
</body>
</html>
Now this view page will be called from this below controller called show.php.
<?php if(! defined('BASEPATH') ) exit("NO Direct Script Access Allowed");
class Show extends CI_Controller{
public function __construct()
{
parent::__construct();
$this->load->model('view_model');
}
public function view()
{
$this->load->view('view');
}
}
Now we can see two date fields in the view page in a proper CI configurations.I can see up to this. Now i want to send these two date fields to query something in the database, get those and show it in the drop down using Ajax call. So i tried to do it in the following way.
$(document).ready(function(){
var from_date = $("#start_date").val();
var to_date = $("#end_date").val();
$.ajax({
type: 'POST',
async: false,
url: '<?php echo base_url().'show/get_ros';?>',
data : { from: from_date , to: to_date },
success : function(res){
$('#ro').html(res);
}
});
});
The above function is added in the view file and another div tag will be added in the view file to show the results form this Ajax call.
<div id="result">
<select name="ro" id="ro">
</select>
</div>
But before i implement something in model side i am checking whether post call is coming to controller method get_ros or not but it's not coming. I am in middle without knowing how to proceed any one helps it will be great.
First thing first you need to make a new function in your controller which will recieve the data from the ajax call
<?php
public function get_ros(){
if($this->input->post(null)){
//print_r($this->input->post());die; #just to check if the values alerted in the success function of the ajax call or else commnet this line.
echo $result = $this->your_model->your_function(); #call the model function to return the result in HTML markup or whatever
}else{
echo '0'; #if no post submission is found just echo 0
}
}
?>
In your model you will get the post variables:
<?php
function your_function(){
### dump the post variables into local variables ###
$from = $this->input->post('from_date', true);
$to = $this->input->post('to_date', true);
#query your database as you like and "return " the data
}
?>
few things,
add an errorHandler to your ajax request like
error:function(XMLHttpRequest,textStatus,errorThrown){console.log('status: '+textStatus+'error: '+errorThrown}});
so you can see the response status in your console, if there ain´t no error, log your response
I´m not too much into php but doesn´´t javascript think that " show/get_ros" is a js-variable ?
so it must be
url: '<?php echo base_url()."show/get_ros";?>',
and i´m not too much into ajax calls but mustn the data option be an object or String ? so rather
data : "from="+from_date+"&to="+to_date ,
Try to use double quotes " inside the single quote in the ajax url
url: '<?php echo base_url()."show/get_ros";?>',
OR
url: '<?php echo site_url("show/get_ros");?>',
Hope it makes sense
Also you should wrap the ajax call on focus out of the second date fields
$(document).ready(function(){
$("#end_date").focusout(function(){
var from_date = $("#start_date").val();
var to_date = $("#end_date").val();
$.ajax({
type: 'POST',
async: false,
url: '<?php echo base_url()."show/get_ros";?>',
data : { from: from_date , to: to_date },
success : function(res){
$('#ro').html(res);
}
});
});
});
I just get the parameters from PHP GET method and use them using jQuery. There is no output when run the page.
<?php
if (isset($_GET['url'])){
$url = $_GET['url'];
$url = explode(" " , $url);
echo end($url);
exit;
}
?>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">
$('input[type=text]').change(function (){
if ($(this).val() !== ''){
var url = $(this).val():
$.post('grab.php?url='+url+'', function (data){
window.open(data, 'Download', 'width=10,height=10');
$(this).html('');
});
}
});
</script>
</head>
<body>
<input type="text" style="width:100%;height:20px;"/>
</body>
</html>
I'm new to designs and hope mistake is there.
First of all put your document in standards mode (by using a proper doctype at the beginning, which means HTML 4/XHTML 1 strict or HTML 5). Then you can use error console for debugging.
I found following error
Unexpected token: ':' on line 7,
The colon should be a semicolon.
var url = $(this).val():
And then, the actual reason why nothing is happening is because the input is non-existent when the script is invoked/cached. You need to execute it after the DOM has been constructed.
$(document).ready(function() {
// content
});
Final code.
$(document).ready(function() {
$('input[type=text]').change(function (){
if ($(this).val() !== ''){
var url = $(this).val();
$.post('grab.php?url='+url+'', function (data){
window.open(data, 'Download', 'width=10,height=10');
$(this).html('');
});
}
});
});
put it in $(document).ready() like this:
$(document).ready(function() {
$('input[type=text]').change(function (){
if ($(this).val() !== ''){
var url = $(this).val():
$.post('grab.php?url='+url+'', function (data){
window.open(data, 'Download', 'width=10,height=10');
$(this).html('');
});
}
});
});
I think using a .change event on a text input isn't advisable. Usually .blur and .focus are more appropriate.
$(document).ready(function() {
$('input[type=text]').blur(function(){
var currentInput = this;
if ($(currentInput ).val() != ''){
var url = $(currentInput ).val();
$.post('grab.php?url='+url, function(data){
window.open(data, 'Download', 'width=10,height=10');
$(currentInput).val('');
});
}
});
});