I'm trying to create a calendar inside of a text input with JavaScript and mysqli. This calendar has booked dates in it that are based on the start date and the end date in the db.
I have a db with 2 columns:
start_datum (start_date)
end_datum (end_date)
What I want is that the user is able to click on the input date and that it shows this mini calendar where the user is able to pick out dates to make a reservation
However certain dates are blocked because they have been put inside of the db and ate between the start and end date.
The problems I have with this is that I can't create the disabled dates
How do I fix this?
$(function() {
$( "#datepicker" ).datepicker({
numberOfMonths: 1,
minDate:0,
showButtonPanel: true,
});
});
$(function() {
$( "#datepicker1" ).datepicker({
numberOfMonths: 1,
minDate:1,
showButtonPanel: true,
});
});
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display multiple months</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<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>
<?php
$huis_ID = "1";
$sql = "SELECT * FROM reserveringen WHERE huis_ID = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("i", $huis_ID);
$stmt->execute();
$result = $stmt->get_result();
$data = $result->fetch_all(MYSQLI_ASSOC);
if ($data):
?>
<?php foreach($data as $row): ?>
<?php
$start_datum = date('d-m-Y', strtotime($row['start_datum']));
echo $start_datum , "<br>";
$eind_datum = date('d-m-Y', strtotime($row['eind_datum']));
echo $eind_datum , "<br>";
?>
<?php endforeach ?>
<?php else: ?>
No data found
<?php endif ?>
</head>
<body>
<p>start_date: <input type="text" id="datepicker" name ="datepicker"></p>
<p>end_date: <input type="text" id="datepicker1" name ="datepicker1"></p>
</body>
</html>
Pics of what it looks like right now
$('.datepicker').datepicker({
todayHighlight:'TRUE',
startDate: new Date('2022-07-15'),
endDate: new Date('2022-07-31'),
autoclose: true
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"> </script>
<input type="text" class="datepicker" value='' />
<input type="text" class="datepicker" value='' />
Related
I am struggling to implement autocomplete on my page as no results are showing from the database.
Below is the code on the index.php page
<head> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script>
$(function() {
$("#tags").autocomplete({
source: "autocomplete.php"
});
});
</script> </head> <body> <label for="tags">Select Student</label> <div><input id="tags" type="text" name="tags" /> </div></body>
The autocomplete.php file looks like this...
<?php include("session.php");
session_start();
$description_arr = array();
$stmt = "select case
When (login.name is null or login.name='') and (login.surname is null or login.surname='')
then login.username
Else login.name + ' ' + login.surname
End as user_profile
from my_students
inner join login
on stud_id = login.id
where my_students.id = '$login_id'";
$ses_stmt = mysqli_query($conn, $stmt);
while($row = mysqli_fetch_array($ses_stmt)){
array_push($description_arr,$row['user_profile']);}
echo json_encode($description_arr);
?>
Hi I have a confusion in js i called lot of js version in my site what is the proper way
I called this way in different page
<link src="js/jquery.min.js"/>
<link src="js/bootstrap.min.js"/>
<link src="js/owl.carousel.min.js"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link src="js/jquery-1.12.1.min.js"/>
I have slider Date picker etc. So if one is working then rest is not working
So How i make it work all
Gallery Slider
<?php
foreach($block->getGalleryImages() as $image){ ?>
<?php if(!$block->isMainImage($image)):?>
<img src="<?php //echo $image->getData('medium_image_url') ?>">
<?php endif; ?>
<?php } ?>
<div class="product-slider">
<?php /* #escapeNotVerified */ $json=$block->getGalleryImagesJson();
$array = json_decode($json,true);
foreach($array as $item)
{
$imgurl = $item['full'];?>
<div class="item">
<img src="<?php echo $imgurl;?>"/>
</div>
<?php }?>
</div>
<script type="text/javascript">
$.noConflict();
$(".product-slider").owlCarousel({
loop: true,
margin: 50,
responsiveClass: true,
nav: true,
lazyLoad :true ,
rewind : false ,
autoplay: true,
dots: true,
navText : ["",""],
responsive: {
0: {
items: 1
}
, 768: {
items: 2
}
, 991: {
items: 1
}
}
});
</script>
Date Picker
<script type="text/javascript">
jQuery("#dt1-<?php echo $_product->getId()?>").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function (date) {
var dt2 = jQuery('#dt2-<?php echo $_product->getId()?>');
var startDate = jQuery(this).datepicker('getDate');
var minDate = jQuery(this).datepicker('getDate');
//dt2.datepicker('setDate', minDate);
startDate.setDate(startDate.getDate() + 30);
//sets dt2 maxDate to the last day of 30 days window
dt2.datepicker('option', 'maxDate', startDate);
dt2.datepicker('option', 'minDate', minDate);
jQuery(this).datepicker('option', 'minDate', minDate);
}
});
jQuery('#dt2-<?php echo $_product->getId()?>').datepicker({
dateFormat: "dd-M-yy"
});
</script>
<input type="text" id="dt1-<?php echo $_product->getId()?>">
<input type="text" id="dt2-<?php echo $_product->getId()?>">
1 - Change the JavaScript tags from <link /> to <script />. Link tags are for stylesheets and script tags, well, for scripts;
2 - Load JavaScript libraries only once;
3 - Check the URL's and versions you want to load the libraries / stylesheets
from. I guess you're mixing things up a bit.
See example below:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript"src="js/owl.carousel.min.js"></script>
If you need to load CSS files, you should write the following:
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" media="all" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" media="all" />
I need to to do autocomplete suggestion for my website and the data should be retrieved from database. I want to use JQuery autocomplete. here is my code but it doesn't work!
This is my php file with the name of gethint.php:
<?php
require_once ('config.php');
$q=$_REQUEST["q"];
$sql="SELECT `fname` FROM `Property` WHERE fname LIKE '%$q%'";
$result = mysql_query($sql);
$json=array();
while($row = mysql_fetch_array($result)) {
$json[]=array(
'value'=> $row['fname'],
'label'=> $row['fname']
);
}
echo json_encode($json);
?>
and then this is my html file :
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function(){
$("#hint").autocomplete({
source:'gethint.php',
minLength:1
});
});
</script>
</head>
<body>
<form class="sansserif" action="view.php" method="post">
Name: <input type="text" id="hint" name="hint" >
<input type="submit" name="submit" value="View">
</form>
</html>
It took a lot of time but I couldn't find the problem. I was wondering if someone could help me.
Thanks.
<?php
require_once ('..\config.php');
$q=$_REQUEST["term"];
$sql="SELECT `fname` FROM `Property` WHERE fname LIKE '%$q%'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)) {
$json[]=array(
'value'=> $row['fname'],
'label'=> $row['fname']
);
}
echo json_encode($json);
?>
All I changed was the $_REQUEST["q"] to $_REQUEST["term"].
I did some changes, maybe you need to fix something but take a look to see if helps...
The php:
<?php
require_once ('config.php');
$q=$_REQUEST["q"];
$sql="SELECT `fname` FROM `Property` WHERE fname LIKE '%$q%'";
$result = mysql_query($sql);
$json=array();
while($row = mysql_fetch_array($result)) {
array_push($json, $row['fname']);
}
echo json_encode($json);
?>
The html+jquery:
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
</head>
<body>
<form class="sansserif" action="view.php" method="post">
Name: <input type="text" id="hint" name="hint" />
<input type="submit" name="submit" value="View">
</form>
<script type="text/javascript">
$(function() {
$( "#hint" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "gethint.php",
dataType: "jsonp",
data: {
q: request.term
},
success: function( data ) {
response( data );
}
});
},
});
});
</script>
</body>
</html>
Your PHP script should be accepting a term parameter, not q.
I need when I start type on text box automatically get sugessions from database.then when I select a sugession automatically should fill other text fields which are relate to the selected choice.
here is my code,
view
<body>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/ css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery- ui.css">
<meta charset="UTF-8">
</script>
<script type="text/javascript">
$(document).ready(function(){
var ac_config = {
source: "<?php echo site_url('birds/get_birds'); ?>",
select:function(event, ui){
$("#city").val(ui.item.value);
$("#location").val(ui.item.location);
$("#label").val(ui.item.label);
},
minLength:2
};
$("#birds").autocomplete(ac_config);
})
</script>
<script type="text/javascript">
$(document).ready(function(){
var ac_config = {
source: "<?php echo site_url('birds/get_payee_data'); ?>",
select:function(event, ui){
$("#payeename").val(ui.item.name2);
$("#payee_address").val(ui.item.address2);
},
minLength:2
};
$("#test").autocomplete(ac_config);
})
</script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: "dd-mm-yy" });
});
</script>
<form action="#" method="post">
<input type="text" id="birds" />
<p>city: <input type="text" id="city"/></p>
<p>location: <input type="text" id="location"/></p>
<p>label: <input type="text" id="label"/></p>
<p>Date: <input type="text" id="datepicker"/></p>
<input type="text" id="test" />
<p>name: <input type="text" id="payeename"/></p>
<p>address: <input type="text" id="payee_address"/></p>
</form>
controller
class Birds extends CI_Controller{
function index(){
$this->load->view('birds_view');
}
function get_birds(){
$this->load->model('birds_model');
if (isset($_GET['term'])){
$q = strtolower($_GET['term']);
$this->birds_model->get_bird($q);
}
}
public function get_payee_data(){
$this->load->model('birds_model');
if (isset($_GET['term'])){
$ss = strtolower($_GET['term']);
$this->birds_model->load_payee_data($ss);
}
}
}
model
function get_bird($q){
$this->db->select('*');
$this->db->like('bird', $q);
$query = $this->db->get('birds');
if($query->num_rows > 0){
foreach ($query->result_array() as $row){
$new_row['label']=htmlentities(stripslashes($row['bird']));
$new_row['value']=htmlentities(stripslashes($row['aka']));
$new_row['city']=htmlentities(stripslashes($row['city']));
$new_row['location']=htmlentities(stripslashes($row['location']));
$row_set[] = $new_row; //build an array
}
echo json_encode($row_set); //format the array into json data
}
}
function load_payee_data($ss){
$this->db->select('*');
$this->db->like('name', $ss);
$query = $this->db->get('payee_details');
//$query = $this->db->query("SELECT * FROM payee_details WHERE name LIKE '%q%' ");
if($query->num_rows > 0){
foreach ($query->result_array() as $row){
$new_row['name2']=htmlentities(stripslashes($row['name']));
$new_row['address2']=htmlentities(stripslashes($row['address']));
$row_set2[] = $new_row; //build an array
}
echo json_encode($row_set2); //format the array into json data
}
}
under the gihan shows sugessions
You are using/including two separate versions of jquery, that'll be the root cause of the issue.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
I need to add date to the form input field, but in codeigniter it is not working,here is my code in view, I don't know why it is not working, I have link web links also. it is only not working in codeigniter.this page is loaded using ajax.I think it would be the reason for the problem,how can I fix it????
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div id="content">
<h2>Payment Details.</h2>
<?php
$this->load->helper('form');
$attributes = array('method'=>'post','name'=>'payments','id'=>'payments');
echo form_open_multipart('',$attributes);?>
<?php //echo form_open_multipart('payments/insert_payment');?>
<label>Payee Name: </label> <?php echo form_input('payee_name');?><br/><br/>
<label>Address: </label> <?php echo form_input('address');?><br/><br/>
<label>Account No: </label> <?php echo form_input('account_no');?><br/><br/>
<label>Bank Name: </label> <?php echo form_input('bank_name');?><br/><br/>
<label>Branch: </label> <?php echo form_input('branch');?><br/><br/>
<label>Amount: </label> <?php echo form_input('amount');?><br/><br/>
<label>Pick a Check Date: </label> <?php
$data = array(
'name'=> 'check_date',
'id' => 'datepicker',
'placeholder' => 'date',
);
echo form_input($data);?><br/><br/>
<label>Check Number: </label> <?php echo form_input('check_number');?><br/><br/>
<input type="submit" name="submit" value="Next"/>
<?php echo form_close(); ?>
You are trying to add two jquery files with different versions
thats why the datepicker is confused which jquery version can be used
please add jQuery.noConflict() before the document.ready function
Hope this helps :)
<script>
jQuery.noConflict();
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
Debug as following
1> Check console.
2> Use inspect element for actual Id ( lots of frameworks changed it internally).
3> Try to put
$( "#datepicker" ).datepicker(); at end of file
Datepicker is not working because #datepicker didn't exist yet. You could make this work by moving ('#datepicker').datepicker() to after the point in the code where it(#datepicker) is created.
You are adding date picker to the id
$( "#datepicker" ).datepicker();
But where is this Id. You should add datepiker to the view where the id is available and add the respective javascript file also
I saw alot of problems
save the style sheet inside css folder(optional) your css should inside your ci folder
your href in css is not the right code, if your linking css do the code below
<link rel="stylesheet" href="<?php echo base_url();?>css/style.css" />`
make sure your base_url is correct. To see if this correct try to echo base_url();
hope this help you
View:
$this->load->helper(array('form'));
Controller:
function datepicker(){
$this->load->view('datepicker');
}
jQuery:
$(function() {
$( "#datepicker" ).datepicker();
});