jQuery datepicker not working - Laravel app - php

I contained my datepicker input inside if statement, so it doesn't work. I don't know whether it isn't working because of if statement or else, but when there is no if statement, datepicker works fine. Scripts are included in right order, so that is fine.
jQuery scripts:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function() {
$('#nextDate').datepicker({
dateFormat: "yy-mm-dd",
});
$("#currentDate").datepicker({
dateFormat: "yy-mm-dd",
minDate: 0,
onSelect: function(date){
var date2 = $('#currentDate').datepicker('getDate');
date2.setDate(date2.getDate()+7);
$('#nextDate').datepicker('setDate', date2);
}
});
});
</script>
The page where datepicker should be, stands like this:
if(Auth::user()->role == 2) { ?>
<form class="form-horizontal" method="POST" action="/rentals">
{{ csrf_field() }}
<div class="form-group">
<div class="col-sm-5 col-sm-offset-1">
<input class="form-control" type="text" id="currentDate" name="start">
</div>
<div class="col-sm-5">
<input class="form-control" type="text" id="nextDate" name="end">
</div>
</div>
<button type="submit" class="btn btn-success">Rent it</button>
</form>
<?php } ?>

Have you tried to initiate the datePickers from the console simply with:
$('#nextDate').datepicker({});
If so what errors do you get? This may not be the actual answer but another thing to try would be to put wrap your javascript code document ready rather than the function you are using now:
$(document).ready(function(){
$('#nextDate').datepicker({
dateFormat: "yy-mm-dd",
});
$("#currentDate").datepicker({
dateFormat: "yy-mm-dd",
minDate: 0,
onSelect: function(date){
var date2 = $('#currentDate').datepicker('getDate');
date2.setDate(date2.getDate()+7);
$('#nextDate').datepicker('setDate', date2);
}
});
});
Also I would recommend removing the options from the datepicker calls when testing. Sometimes they are the source of the error so start with just:
$(document).ready(function(){
$('#nextDate').datepicker();
$('#currentDate').datepicker();
});

Related

Using datepicker-ui in WordPress but the value is Null everytime

My datepicker works, at first! But if i'm checking the value of the input (with the datepicker) the value always is Null. The right value is displaying and an alert shows the right date. But in my php file i just retrieve null
<form action="" method="post">
<div class="flex-grid fg-step-1">
<div class="col col-medium-6 col-small-12 ">
<p style="margin-bottom: 20px;">Date Start</p>
<input type="text" id="dateStart" name="dateStart" class="datepicker">
</div>
<div class="col col-medium-6 col-small-12 ">
<p style="margin-bottom: 20px;">Date End</p>
<input type="text" id="dateEnd" name="dateEnd" class="datepicker">
</div>
</div>
<input type="submit" class="main_btn"">
</form>
jQuery(document).ready(function(){
jQuery('#dateEnd').prop('disabled', true);
jQuery( '#dateStart' ).datepicker({
changeMonth: true,
changeYear: true,
showAnim: "slideDown",
dateFormat: "yy-mm-dd",
minDate: 0,
onSelect: function(selectedDate){
jQuery('#dateEnd').datepicker('option', 'minDate', selectedDate);
jQuery('#dateEnd').prop('disabled', false);
alert(selectedDate);
}
});
jQuery( '#dateEnd' ).datepicker({
changeMonth: true,
changeYear: true,
showAnim: "slideDown",
dateFormat: "yy-mm-dd",
onSelect: function(selectedDate){
alert(selectedDate);
}
});
})
<?php
if ( $_POST['dateStart'] == Null ) {
$dateStart = false;
$in_date_start = "";
} else {
$in_date_start = $_POST['dateStart'];
}
if ( $_POST['dateEnd'] == Null) {
$dateEnd = false;
$in_date_end = "";
} else {
$in_date_end = $_POST['dateEnd'];
}
?>
The Problem is, that we are using WordPress and using our own Theme. I need a solution for retrieving the selectedDate in my php-code
You can use hidden field :
1) get date and set in hidden field {with JS} and retrieve date from hidden field in php { at form submission }

How do I get the date from a datepicker using PHP?

How do I get the date from a jquery UI datepicker like the month and save the value of it in a variable in php?
I've seen a lot of things like this <div id="calendar"></div> and I don't understand.
Thanks.
Here's my code
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
var day1 = $(this).datepicker('getDate').getDate();
var month1 = $(this).datepicker('getDate').getMonth();
var year1 = $(this).datepicker('getDate').getYear();
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
var day2 = $(this).datepicker('getDate').getDate();
var month2 = $(this).datepicker('getDate').getMonth();
var year2 = $(this).datepicker('getDate').getYear();
}
});
});
</script>
</head>
<body>
<label for="from"> FROM </label>
<input type="text" id="from" name="from">
<label for="to"> TO </label>
<input type="text" name="username" id="to" name="to">
<input type="submit" name="boton" value=" Submit ">
</body>
</html>
HTML
<input type="text" name="datepicker" value="26-10-15" />
PHP
if it has isset submit denotes that the submit the form
<?php if($_REQUEST['datepicker'])){
echo $_POST['datepicker'];
} ?>
You have to apply datepicker to input field like
<input type="text" value="<?php echo date("Y-m-d"); ?>" name="selectedDate"/>
Than in PHP just check value from $_GET or $_POST:
$selectedDate = isset($_REQUEST['selectedDate']) ? $_REQUEST['selectedDate'] : null;
You have HTML:
<input type="text" name="username" id="to" name="to">
For that you call datepicker:
$( "#to" ).datepicker({/* ... */});
Now all you need to do is:
Wrap your input fields with <form action="mySubmitScript.php" method="post"></form> add additionally <input type="submit" value="submit">
In PHP you do:
if (isset($_POST['to'])) {
$to = $_POST['to'];
}
You can submit form without reloading page using $.ajax() jQuery method.

how Jquery UI Datepicker value set when redirect to this page?

When i submitted form than if error occurred than value is not set in datepicker which is selected before. Datepicker field empty . how this possible ??
<html>
<head>
<script type="text/javascript" >.
$(function() {
$( "#dob" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: '1900:'
});
$( "#dob" ).datepicker( "option", "dateFormat", "dd-mm-yy" );
});
</script>
</head>
<body>
<form>
<input type="text" name="dob" id="dob" value="<?php if(isset($_SESSION['dob'])) echo $_SESSION['dob']; ?>" placeholder="Please enter date of birth" required/>
</form>
<body>
</html>
There can be many reasons for this issue.
Either the dob variable is null/empty/undefined.
The dob value is not in the correct format.
You have not used defaultDate in the datepicker.
For 1st part, you can only log and debug what is wrong.
For 2nd part, you can format the value in correct format. Search on SO for formatting a string to Date.
For the 3rd part:
$(function () {
$("#dob").datepicker({
defaultDate: $(this).val(), //Add this
dateFormat: 'dd-mm-yy', // And this too
changeMonth: true,
changeYear: true,
yearRange: '1900:'
});
});

hide/show Jquery with datepicker not working

I am trying to develop a calendar input variable which also allows for a datepicker for the input boxes.
HTML
<select id="select">
<option value="Type">Type</option>
<option value="Range">Range</option>
<option value="Individual">Individual</option>
</select>
<div id="range" style="display:none;">
<input type="text" name="job_from" id="job_from" placeholder="From" class="datepicker" />
<input type="text" name="job_to" id="job_to" placeholder="To" class="datepicker" />
</div>
<div id="ind" style="display:none;">
<button type="button" id="add2" class="submit">Add Another Date</button>
<div id="item2">
<div><input type="text" class="datepicker" name="jobdates[]" /></div>
</div>
</div>
SCRIPT
$(document).ready(function(){
$("#add2").click(function (e) {
//Append a new row of code to the "#items" div
$("#item2").append('<div><input type="text" class="datepicker" name="jobdates[]" /><button class="delete submit" type="button">Delete</button></div>');
});
$("body").on("click", ".delete", function (e) {
$(this).parent("div").remove();
});
$('#select').change(function(){
if($('#select option:selected').text() == "Range"){
$('#range').show();
}
else{
$('#range').hide();
}
if($('#select option:selected').text() == "Individual"){
$('#ind').show();
}
else{
$('#ind').hide();
}
})
});
Here is the jsfiddle
when I take away the datepicker jquery function the hide/show functionality works, when i put the datepicker script in nothing works. Can someone explain why I cannot get both to work
Your code is fine, I believe you just weren't including the core jQueryUI files that the DatePicker needs in order to run.
Add this to the head of your page:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
EXAMPLE 1
To address the issue where datepicker is not being initialized due to the new elements being written to the DOM after the jQuery has initialized the datepicker, you simply must call the datepicker when the user creates a new DOM element.
$("#add2").click(function (e) {
//Append a new row of code to the "#items" div
$("#item2").append('<div><input type="text" class="datepicker" name="jobdates[]" /><button class="delete submit" type="button">Delete</button></div>');
// This is where you need to add the datepicker jQuery again <<<<<<<<<
$(".datepicker").datepicker({ changeMonth: true, changeYear: true, numberOfMonths: 2, showWeek: true, dateFormat: 'dd-mm-yy'});
});
EXAMPLE 2
I think its not possible.
Make a second input (for datepicker) and show hide it if checked box...
The rest is js and css
EDIT:
$(document).ready(function(){
$("#add2").click(function (e) {
//Append a new row of code to the "#items" div
$("#item2").append('<div><input type="text" class="datepicker" name="jobdates[]"/><button class="delete submit" type="button">Delete</button></div>');
$(".datepicker").datepicker({ changeMonth: true, changeYear: true, numberOfMonths: 2, showWeek: true, dateFormat: 'dd-mm-yy'});
});
$("body").on("click", ".delete", function (e) {
$(this).parent("div").remove();
});
$('#select').change(function(){
if($('#select option:selected').text() == "Range"){
$('#range').show();
}
else{
$('#range').hide();
}
if($('#select option:selected').text() == "Individual"){
$('#ind').show();
}
else{
$('#ind').hide();
}
})
});

how to show a specific interval of date in the date field?

I like to insert a date of birth field in the php form? The range of values to be entered must be in between two years(ex:1988-12-20 to 1992-1-1). I am just a starter in php.<input type="date" name="dob">
You can do this between two years(ex:1988-12-20 to 1992-1-1)
<input type="date" name="bday" min="1988-12-20" max="1992-01-01" />
You can achieve this with html5 easily
<input type="date" name="bday" min="1990-01-02" max="2010-01-02" />
An alternative way is to use the Jquery Datepicker.
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'yy-mm-dd',
minDate: '1988-12-20',
maxDate: '1992-1-1'
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

Categories