What I want to achieve is to block out dates in the Jquery Datepicker that have already been booked. So far I have managed to build a working form with a functioning Datepicker that uses $_POST to send data to my database. I know that I should be using the BeforeShowDay Jquery function but I can't quite figure out how to implement it. Let me walk you through my code.
<?php require_once('inc/header.php');
Connect to the database using PDO and use prepare to input the data. All working fine.
require('database.php');
$stmt = $db->prepare("INSERT INTO besucher (name, surname, email, guests, fromDate, toDate, questions) VALUES (?, ?, ?, ?, ?, ?, ?)");
$stmt->bindParam('1', $_POST['Name']);
$stmt->bindParam('2', $_POST['LastName']);
$stmt->bindParam('3', $_POST['Email']);
$stmt->bindParam('4', $_POST['Guests']);
$stmt->bindParam('5', $_POST['From']);
$stmt->bindParam('6', $_POST['To']);
$stmt->bindParam('7', $_POST['Questions']);
$stmt->execute();
This is where I retrieve the info from the database.
try {
$results = query("SELECT fromDate, toDate FROM besucher");
} catch (Exception $e) {
echo "Data could not be retrieved from the database.";
exit;
}
?>
The form itself.
<!-- Begin page content -->
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="page-header">
<h1>Make a booking enquiry</h1>
</div>
</div>
</div><!--endrow-->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form role="form action="form.php" method="post">
<div class="form-group">
<label for="Name">First Name</label>
<input type="text" class="form-control" id="Name" name="Name" placeholder="Enter First Name" required>
</div>
<div class="form-group">
<label for="LastName">Surname</label>
<input type="text" class="form-control" id="LastName" name="LastName" placeholder="Enter Surname" required>
</div>
<div class="form-group">
<label for="Email">Email</label>
<input type="email" class="form-control" id="Email" name="Email" placeholder="Enter Email" required>
</div>
<div class="form-group">
<label for="Guests">Number of Guests</label>
<input type="number" id="Guests" class="form-control" name="Guests" placeholder="z.b. 4" required>
</div>
<div class="form-group">
<label for="From">From <span class="glyphicon glyphicon-calendar"></span></label>
<input type="text" id="From" name="From" class="form-control" required>
</div>
<div class="form-group">
<label for="To">To <span class="glyphicon glyphicon-calendar"></span></label>
<input type="text" id="To" name="To" class="form-control" required>
</div>
<div class="form-group">
<label for="textarea">Questions?</label>
<textarea class="form-control" id="textarea" name="Questions" rows="3"></textarea>
</div>
<div class="form-group">
<label for="checkbox" class="sr-only">Checkbox</label>
<input id="checkbox" type="checkbox"> I would like to recieve emails from Muscheltraum
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div><!--endrow-->
</div><!--container-->
</div><!--wrap-->
<?php require_once('inc/footer.php'); ?>
This is the datepicker.js file code where I want to put the BeforeShowDay function. Unfortunately, I don't know how to get the fromDate and toDate from my SELECT query into my date-picker and how that would fit into the below code. It's really frustrating because I know exactly what I want to do and how the pieces should fit together but I just can't work how to implement it.
From the Jquery UI API
beforeShowDayType: Function( Date date )
Default: null
A function that takes a date as a parameter and must return an array with:
[0]: true/false indicating whether or not this date is selectable
[1]: a CSS class name to add to the date's cell or "" for the default presentation
[2]: an optional popup tooltip for this date
The function is called for each day in the datepicker before it is displayed.
$.datepicker.setDefaults( $.datepicker.regional[ "de" ] );
$(function() {
$( "#From" ).datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
numberOfMonths: 1,
gotoCurrent: true,
minDate:0,
maxDate: "+1y",
onClose: function( selectedDate ) {
$( "#To" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#To" ).datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
numberOfMonths: 1,
gotoCurrent: true,
maxDate: "+1y",
onClose: function( selectedDate ) {
$( "#From" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
Basic idea, didn't test but it should work.
PHP
Let's assume you have your dates to disable in an array in PHP
$disablethese = array("2014-01-03","2014-01-13","2014-01-23");
Print your From Date field with disabled dates in data attribute using json_encode
<input type="text" id="From" name="From" class="form-control" required data-disablethese="<?=json_encode($disablethese)?>">
JQuery
var disablethese = $("#From").data("disablethese"); //this will auto-decode JSON to Array
Now you can use disablethese variable in your beforeShowDate
var disablethese = ["2014-01-03","2014-01-13","2014-01-23"];
$('input').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ disablethese.indexOf(string) == -1 ]
}
});
JSFiddle Example
<?php
include'db.php';
$Pro_id = 4;
$dateslistselect1[]='';
$queryres = mysqli_query($conn, "SELECT start_date,end_date FROM table_name WHERE id='".$Pro_id."' AND YEAR(start_date) = YEAR(CURDATE()) OR YEAR(start_date) = YEAR(CURDATE()) + 1") or die(mysqli_error($conn));
while($row = mysqli_fetch_array($queryres))
{
$start = strtotime($row['start_date']);
$end = strtotime($row['end_date']);
for ($i1=$start; $i1<=$end; $i1+=86400) {
$dateslistselect1[]= '"'.date('d-m-Y',$i1).'"';
}
}
$dateslistselect1=array_filter($dateslistselect1);
$totaldayslist1 =implode(", ", $dateslistselect1);
?>
<script>
var disableddates = [<?php echo $totaldayslist1; ?>];
function DisableSpecificDates(date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [disableddates.indexOf(string) == -1];
}
</script>
<script type="text/javascript">
(function( $ ) {
var disableddates = [];
$("#in").datepicker({
minDate: new Date(),
dateFormat: "mm-dd-yy",
beforeShowDay: DisableSpecificDates,
numberOfMonths: 1,
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
$("#out").datepicker("option", "minDate", dt);
}
});
$("#out").datepicker({
minDate: new Date(),
dateFormat: "mm-dd-yy",
beforeShowDay: DisableSpecificDates,
numberOfMonths: 1,
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate());
$("#out").datepicker("option", "maxDate", dt);
}
});
/* $( ".datepicker" ).datepicker( "option", "maxDate", dt );*/
})( jQuery );
</script>
Related
I want to put start date as final date of final date column if user doesn't select final date when form submit. my code is below.
<div class="col-md-4">
<div class="input-group">
<label class="control-label">{!!Lang::get('site_lang.start_date')!!}</label>
<input id="startDate" style="width:80%;" name="start_date" autocomplete="off"/>
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<label class="control-label">{!!Lang::get('site_lang.end_date')!!}</label>
<input id="endDate" style="width:80%;" name="end_date" autocomplete="off"/>
</div>
</div>
Script
<script>
$('#startDate').datepicker({
uiLibrary: 'bootstrap4',
iconsLibrary: 'fontawesome',
format: '{{config('app.date_format_js')}}',
maxDate: function () {
return $('#endDate').val();
}
});
$('#endDate').datepicker({
uiLibrary: 'bootstrap4',
iconsLibrary: 'fontawesome',
format: '{{config('app.date_format_js')}}',
minDate: function () {
return $('#startDate').val();
}
});
</script>
How about calling a function before submitting form and check if the endDate is empty or undefined. If so just set the startDate to endDate input field.
function beforeSubmit()
{
if($('#endDate').val()==="" || $('#endDate').val() === undefined)
{
$('#endDate').val($('#startDate').val());
}
}
<form onsubmit="return beforeSubmit()" >
<input type="submit" name="Submit" value="Submit"/>
</form>
If you use jquery ui datepicker
Two way you can set end Date
$('#startDate').datepicker();
$('#endDate').datepicker();
// Set End date on click submit button if end date is empty set end date value as start date
// then submit form
$("#submit").click(function(){
if(!$("#endDate").val()){
var startDate = $("#startDate").val()
$("#endDate").val(startDate)
}
$("#form").submit()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form id="form" action="">
<input id="startDate" name="start_date" autocomplete="off"/>
<input id="endDate" name="end_date" autocomplete="off"/>
<button id="submit" type="submit">Send</button>
</form>
I've tried to subtract between two dates. Date "a" and Date "b" using this code that I've found here. It works with jsfiddle.net but not with my project.
This is my code :
HTML and JS
$(document).ready(function() {
$("#startdate,#enddate").datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
dateFormat: 'dd/mm/yy',
})
$("#startdate").datepicker({
dateFormat: 'dd-mm-yy'
});
$("#enddate").datepicker({
dateFormat: 'dd-mm-yy'
});
$('#enddate').change(function() {
var start = $('#startdate').datepicker('getDate');
var end = $('#enddate').datepicker('getDate');
if (start < end) {
var days = (end - start) / 1000 / 60 / 60 / 24;
$('#days').val(days);
} else {
alert("You cant come back before you have been!");
$('#startdate').val("");
$('#enddate').val("");
$('#days').val("");
}
}); //end change function
}); //end ready
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css">
<div class="form-group">
<label class="control-label col-md-3">date 1</label>
<div class="col-md-1 col-xs-11">
<input type="text" class="form-control" id="startdate">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">date 2</label>
<div class="col-md-1 col-xs-11">
<input type="text" class="form-control" id="enddate">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">result</label>
<div class="col-md-1 col-xs-11">
<input type="text" class="form-control" id="days">
</div>
</div>
But when I import into the project, it does not work. Like JS file not found the HTML's "id" or else. Can anyone help me ?
This is The JSFIDDLE link to this query.
it's working fine with me did you check in incognito mode? ctrl+shift+N and check in incognito
My 2 Date Pickers bind with Angularjs directive. But i validate with java script.
after selecting date it return default date.
Script
<script>
if (datefield.type != "date") { //if browser doesn't support input type="date", initialize date picker widget:
jQuery(function ($) { //on document.ready
$('#start_date').datepicker({
dateFormat: 'yy-mm-dd',
minDate: 0,
onSelect: function (date) {
var date2 = $('#start_date').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
$('#end_date').datepicker('setDate', date2);
//sets minDate to start_date date + 1
$('#end_date').datepicker('option', 'minDate', date2);
}
});
$('#end_date').datepicker({
dateFormat: 'yy-mm-dd',
onClose: function () {
var start_date = $('#start_date').datepicker('getDate');
console.log(start_date);
var end_date = $('#end_date').datepicker('getDate');
if (end_date <= start_date) {
var minDate = $('#end_date').datepicker('option', 'minDate');
$('#end_date').datepicker('setDate', minDate);
}
}
});
});
}
</script>
Html Code
<div class="col-md-5">
<div class="form-group">
<label name="lblOccup1"> Check in</label>
<input type="date" id="start_date" class="form-control" placeholder="Check in" data-ng-model="departuredate"/>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label name="lblOccup1"> Check out</label>
<input type="date" id="end_date" class="form-control" placeholder="Check Out" data-ng-model="returndate"/>
</div>
</div>
<div class="col-md-2">
<a class="link_button2" ng-href="#Url.Action("Booking", "home")?Rooms={{rooms}}&Destination={{des}}&DepartureDate={{departuredate}}&ReturnDate={{returndate}}"> Search </a>
</div>
After press search button i get null value to mvc controller.
Search Form
Controller
What is wrong with this code?
How to get Start Date and End Date using jquery.
For an example:
I need to get output:
Start date - 22/08/2016(should not be greater than today date and should not be auto-selected)
If a person select start date like today date ,end date should be filled automatically after one year date.
End date: 22/08/2017(by default in non-editable text box)
This my HTML code
<div class="form-group">
<label class="control-label">Start Date</label>
<div id="fromdatetimepicker" class="input-group">
<input type="text" class="form-control col-sm-5" placeholder="Select a Start Date" />
<a id="calIcon" class="input-group-addon btn btn-danger">
<span class="glyphicon glyphicon-calendar"></span>
</a>
</div>
</div>
<div class="form-group">
<label for="travelInputName">End Date</label>
<input readonly type="text" class="form-control" id="todatetimepicker">
</div>
This my js code
jQuery("#fromdatetimepicker").datetimepicker({
widgetPositioning: {
horizontal: 'left',
vertical: 'bottom'
},
allowInputToggle : true,
format: 'DD/MM/YYYY',
"minDate": moment()
});
jQuery("#todatetimepicker").datetimepicker({
widgetPositioning: {
horizontal: 'left',
vertical: 'bottom'
},
allowInputToggle : true,
format: 'DD/MM/YYYY',
});
Please, help me! How to do this and thanks in advance.
Try this
jQuery("#fromdatetimepicker").on("dp.change", function (e) {
var start_date = e.date
var end_date = start_date.setFullYear(date.getFullYear() + 1);
var todatetimepicker = jQuery('#todatetimepicker').data("DateTimePicker");
todatetimepicker.date(end_date)
});
Please modify "jQuery("#fromdatetimepicker").datetimepicker" event listener with below code and remove "jQuery("#todatetimepicker").datetimepicker" event listener as such it is redundant.
Please check below snppet.
$( function() {
$( "#fromdatetimepicker" ).datepicker({
dateFormat : 'dd/mm/yy',
onSelect: function(dateText) {
var dateText = dateText.split('/');
var to_date = dateText[0]+'/'+dateText[1]+'/'+(parseInt(dateText[2])+1);
jQuery("#todatetimepicker").val(to_date);
}
});
} );
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div class="form-group">
<label class="control-label">Start Date</label>
<div class="input-group">
<input id="fromdatetimepicker" type="text" class="form-control col-sm-5" placeholder="Select a Start Date" />
<a id="calIcon" class="input-group-addon btn btn-danger">
<span class="glyphicon glyphicon-calendar"></span>
</a>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="travelInputName">End Date</label>
<input readonly type="text" class="form-control" id="todatetimepicker">
</div>
can u try this
$('#dob').datepicker({
onSelect: function(value, ui) {
console.log(ui.selectedYear)
// var op = New date calculation Here
$('#datehidden').val(op);
},
maxDate: '+0d',
yearRange: '1920:2010',
changeMonth: true,
changeYear: true,
});
I'm struggling to find out why this doesn't work, I trying to fetching from jquery datepicker requests via URL any dates from the DATETIME column in my datebase called time? Below I'v added a picture of the URL being sent to server and of time column.
JAVASCRIPT:
<label for="from">From</label>
<input type="text" name="from" id="from"/>
<label for="to">To:</label>
<input type="text" name="to" id="to"/>
$( "#from" ).datepicker();
$( "#to" ).datepicker();
$( "#from" ).datepicker( "option", {dateFormat: 'dd-mm-yyT00:00:00', showAnim: 'show' });
$( "#to" ).datepicker( "option", {dateFormat: 'dd-mm-yyT23:59:59',showAnim: 'show'});
$('#to').val(to);
$('#from').val(from);
PHP:
var from = getParameterByName('from');
var to = getParameterByName('to');
var from = parseDateTime($('#from').val());
var to = parseDateTime($('#to').val());
my.php?=from='+from+'&to='+to+'&rand='+Math.random()
$query = 'SELECT * FROM register WHERE time BETWEEN ( "#from" ) AND ( "#to" )';
$result = mysql_query($query);
while($row = mysql_fetch_array($result)){
echo $row['time']."<br>";
}
Use setDate method which Sets the date for the datepicker
$(function() {
$("#datepicker").datepicker();
$("#datepicker").datepicker("setDate", new Date('10/12/2012'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type="text" id="datepicker">
Fiddle here
You can use jquery-ui-timepicker-addon to add the time.
Try this Fiddle and this with formatted date and time: https://jsfiddle.net/rayon_1990/2wpp2qc1/2/