Develop Reference

Jquery datepicker subtract days

I'm using a jquery datepicker link in that i need to subtract 7 days from the current date. I've tried some code but its not working ie, days are not subtracting still showing current date itself. This is the code that i've tried yet. Any help is appreciable.
Demo fiddle
// datepicker
var $startDate = $('.start-date');
var $endDate = $('.end-date');
$startDate.datepicker({autoHide: true,format: 'yyyy-mm-dd'});
$startDate.datepicker("setDate", moment().subtract(7,'d').format('yyyy-mm-dd'));
$endDate.datepicker({
autoHide: true,
startDate: $startDate.datepicker('getDate'),
format: 'yyyy-mm-dd'
});
$endDate.datepicker('setDate', moment().format('yyyy-mm-dd'));
$startDate.on('change', function () {
$endDate.datepicker('setStartDate', $startDate.datepicker('getDate'));
});
// datepicker

As per the setDate this datePicker documentation - You are not using momentJS format date function correctly. You need to convert a date from YYYY-MM-DD to a date object like for example: Wed Sep 17 2020 00:00:00 GMT+1000 (Australian Eastern Standard Time)
For that you can use toDate() function of momentJS - Your code is working now as expected.
$startDate.datepicker("setDate", moment().subtract(7, 'd').toDate());
Or you can also use native Javascript new Date method like this below:
$startDate.datepicker("setDate", new Date(moment().subtract(7, 'd')));
You can also do this using just native JavaScript date function like this below instead of using moment library
var sub7Days = new Date();
sub7Days.setDate(sub7Days.getDate() - 7);
$startDate.datepicker("setDate", sub7Days);
Live Working Demo:
$(function() {
// datepicker
var $startDate = $('.start-date');
var $endDate = $('.end-date');
$startDate.datepicker({
autoHide: true,
format: 'yyyy-mm-dd'
});
$startDate.datepicker("setDate", moment().subtract(7, 'd').toDate());
$endDate.datepicker({
autoHide: true,
startDate: $startDate.datepicker('getDate'),
format: 'yyyy-mm-dd'
});
$endDate.datepicker('setDate', moment().toDate());
$startDate.on('change', function() {
$endDate.datepicker('setStartDate', $startDate.datepicker('getDate'));
});
});
<link rel="stylesheet" href="https://fengyuanchen.github.io/datepicker/css/datepicker.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js" integrity="sha512-Izh34nqeeR7/nwthfeE0SI3c8uhFSnqxV0sI9TvTcXiFJkMd6fB644O64BRq2P/LA/+7eRvCw4GmLsXksyTHBg==" crossorigin="anonymous"></script>
<div class="col-md-3">
<input type="text" class="form-control start-date" id="datefrom" placeholder="Date From">
</div>
<div class="col-md-3">
<input type="text" class="form-control end-date" id="dateto" placeholder="Date To">
</div>

$(function() {
// datepicker
var $startDate = $('.start-date');
var $endDate = $('.end-date');
$startDate.datepicker({autoHide: true,format: 'yyyy-mm-dd'});
console.log(moment().subtract(7,'days').format('yyyy-mm-D'));
$startDate.datepicker("setDate", moment().subtract(7,'d').format('yyyy-mm-D'));
$endDate.datepicker({
autoHide: true,
startDate: $startDate.datepicker('getDate'),
format: 'yyyy-mm-dd'
});
$endDate.datepicker('setDate', moment().format('yyyy-mm-D'));
$startDate.on('change', function () {
$endDate.datepicker('setStartDate', $startDate.datepicker('getDate'));
});
// datepicker
});
<link rel="stylesheet" href="https://fengyuanchen.github.io/datepicker/css/datepicker.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js" integrity="sha512-Izh34nqeeR7/nwthfeE0SI3c8uhFSnqxV0sI9TvTcXiFJkMd6fB644O64BRq2P/LA/+7eRvCw4GmLsXksyTHBg==" crossorigin="anonymous"></script>
<div class="col-md-3">
<input type="text" class="form-control start-date" id="datefrom" placeholder="Date From">
</div>
<div class="col-md-3">
<input type="text" class="form-control end-date" id="dateto" placeholder="Date To">
</div>
Changed moment().subtract(7,'d').format('yyyy-mm-dd') to moment().subtract(7,'d').format('yyyy-mm-D')

how to disable previous dates in calendar?

I am trying to disable previous dates in calendar.I am using this code like
My HTML code is below.
<div class="date-picker">
<div class="input">
<div class="result"><input type="text" class="xxy" value="<?= $c_date1; ?>" ></div>
</div>
<div class="calendar"></div>
My script code.
$(function() {
$(".calendar").datepicker({
dateFormat: 'dd/mm/yy',
firstDay: 1
});
$(document).on('click', '.date-picker .input', function(e){
var $me = $(this),
$parent = $me.parents('.date-picker');
$parent.toggleClass('open');
});
$(".calendar").on("change",function(){
var $me = $(this),
$selected = $me.val(),
$parent = $me.parents('.date-picker');
console.log($parent);
$parent.find('.result').children('input').val($selected);
});
});

How to insert slide range to mysql?

How to insert slide range to mysql ?
When press submit i want to insert slide range into mysql.
I try this code but not work!
How can i do that ?
http://jsfiddle.net/b63u9krv/3/
PHP
<?PHP
include("config.php");
if (isset($_POST["submit"]))
{
$sql="INSERT INTO table_name(slide_value)VALUES('$value_data')";
$result=mysql_query($sql);
}
?>
script
$(function() {
$( "#slider-range-min" ).slider({
range: "min",
value: 0,
min: 0,
max: 700,
slide: function( event, ui ) {
$( "#value_data" ).val( "$" + ui.value );
}
});
$( "#value_data" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
});

Code should be:
<form name="form1" method="post" action="">
<div id="slider-range-min"></div>
<!--missing input field added-->
<input type="hidden" id="value_data" name="value_data"/>
<input type="submit" name="submit" value="OK"/>
</form>
<?PHP
include("config.php");
if (isset($_POST["submit"]))
{
$sql="INSERT INTO table_name(slide_value)VALUES('".$_POST['value_data']."')";//updated
$result=mysql_query($sql);
}
?>
Updates in code description
you are updating value of value_data field, so this should be in
form while you are submitting it.
Instead of using $value_data while inserting you should use
$_POST['value_data'].

jquery ui slider post to mysql

Hello Im trying to update the value of the slider to mysql, i keep getting
"Notice: Undefined index... on line 2 ", I am sure my error is ridiculous but I cant seem to find it, since it worked fine on normal input fields.
<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>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#slider-vertical" ).slider({
range: "min",
min: 0,
max: 100,
value: 60,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
});
</script>
</head>
<body>
<p>
<form action="update.php" method="post">
<label for="amount">Volume:</label>
<input type="text" id="amount" name="amount" style="border:0; color:#f6931f; font-weight:bold;" />
<input type="submit">
</form>
This is my update.php:
<?php
$temp= $_POST['raise'];
echo $temp;
$host=""; // Host name
$username=""; // Mysql username
$password=""; // Mysql password
$db_name=""; // Database name
$tbl_name=""; // Table name
$dbc = mysqli_connect("$host", "$username", "$password", "$db_name")or die("cannot connect");
$sql="UPDATE $tbl_name SET raise='$temp' WHERE id= 1";
?>

After you fixed your variable to $post['amount'], your seeing the value because update.php line 3 echos out the value:
echo $temp;
Line 11 doesn't escape the value with $dbc->real_escape_string() (bad idea!), and finally, to actually update the database you're missing this at the end:
$dbc->query($sql);

How to disable dates in Datepicker using dates entered into database?

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>