Date Time picker does not save selected date to the database - php

In my laravel project, I want to save Datepicker selected date to the database. But my code saves date as "01-01-1970" and not the selected date from the date picker.
I tried to fix it by going through many codes. But no luck.
Here is the controller store function.
public function store(Request $request)
{
$qualification = new qualification();
$qualification->from = date("d-m-Y", strtotime($request->from));
$qualification->to = date("d-m-Y", strtotime($request->to));
$qualification->save();
return redirect()->route('qualification.index')->with('success','Data Added');
}
Here is the blade.php
<label for="date">From:</label><input type="text" name="date" value="" />
<label for="date">To:</label><input type="text" name="date" value="" />
<script>
$(function() {
$('input[name="date"]').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
minYear: 1995,
maxYear: parseInt(moment().format('YYYY'),10)
}, function(start, end, label) {
var years = moment().diff(start, 'years');
});
});
</script>
Please help me to save the selected date to the database. Thank you for any help.

You are trying to get values of $request->from and $request->to in your controller but in HTML both the text fields are named as date.
It Should be Like
HTML:
<label for="date">From:</label><input type="text" class="date" name="from" value="" />
<label for="date">To:</label><input type="text" class="date" name="to" value="" />
In js
<script>
$(function() {
$('.date').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
minYear: 1995,
maxYear: parseInt(moment().format('YYYY'),10)
}, function(start, end, label) {
var years = moment().diff(start, 'years');
});
});
</script>

You can do this
<script>
$(function() {
$('input[name="date"]').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
minYear: 1901,
maxYear: parseInt(moment().format('YYYY'),10),
locale: {
format: 'DD-MM-YYYY'
}
}, function(start, end, label) {
var years = moment().diff(start, 'years');
//alert("You are " + years + " years old!");
});
});
</script>

Related

handling error where date selected less than current date

I'm a newbie in this php and html. I'm developing a laundry system using php with mysql. right now, users can just enter whatever date they want for pickup and delivery.. for example, today is 10 feb 2018, user key in 9 feb 2018 as pickup. that should not be possible. how do i handle that? my html are
<font face="Arial Black">Pickup date:</font>
<input type="date" name="pickupdate">
The below snippet is from one of my projects, see if this helps you in anyway:
The HTML Code:
<label for="from">From</label>
<input type="text" id="from" name="from"/>
<label for="to">to</label>
<input type="text" id="to" name="to"/>
The Javascript Code:
var dateToday = new Date();
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});

subtract the given age into the current date

I have two fields where one field is used to give input of user age and another field to display the date of birth as per current date.
My html code is:-
<div class="col-xs-4 form-group">
<label><?php echo _('DOB'); ?> : </label>
<input value="" type="text" name="jbs_dob" id="jbs_dob" size="17" />
</div>
<div class="col-xs-4 form-group">
<label><?php echo _('Age'); ?> : </label>
<input value="" class="validate[required] form-control" type="text" name="jbs_age" id="jbs_fname" size="17" />
</div>
My js and jquery code is:
$(function () {
$("#jbs_age").click(function () {
var jbs_dob = new Date();
var jbs_age =$('jbs_age').val();
var diff= jbs_dob-jbs_age;
$( "#jbs_dob" ).html(diff);
});
});
Try below code. This will return you Year of the birth. If you provide age 25 then it will show 1991 in birth day field.
$(function () {
$("#jbs_age").click(function () {
var jbs_dob = new Date();
var jbs_age =$('#jbs_age').val();
var age = (jbs_dob.getFullYear() - jbs_age);
$( "#jbs_dob" ).val(age);
});
});

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 get datepicker value on enter keypress?

If I press the enter key after giving the text box value like 03/20/2014 the result will appear. But if I give the value using date picker that doesn't work.
<input class="search-query" id="date" onkeypress="if(event.keyCode==13){return true;}" type="text" name="date" value="" placeholder="mm/dd/yyyy">
<script>
$(function() {
$( "#date" ).datepicker();
});
</script>
if you want to get the date when the user selects it, you can do something like this:
$ ("#datepicker").datepicker (
{
onSelect: function ()
{
var date = $(this).datepicker('getDate');
}
});

Jquery Date Picker On Multiple Input Fields

I have a page in which there are multiple input fields that is fromdate and todate. I have created dynamic ids and name. I have used jquery date picker.
Code:
<?php
$i=1;
foreach($locations as $location)
{
?>
<tr>
<td><?php echo $location['name'];?></td>
<td>
<input type="text" name="txtFromDate_<?php echo $location['pk_locationid'];?>" class="field" style="width:80px;" id="txtFromDate_<?php echo $i;?>"/>
</td>
<td>
<input type="text" name="txtToDate_<?php echo $location['pk_locationid'];?>" class="field" style="width:80px;" id="txtToDate_<?php echo $i;?>"/>
</td>
<td>
<input type="text" name="txtFromTime_<?php echo $location['pk_locationid'];?>" class="time-pick field" style="width:80px;" />
</td>
<td>
<input type="text" name="txtToTime_<?php echo $location['pk_locationid'];?>" class="time-pick field" style="width:80px;"/>
</td>
</tr>
<?php
$i++;
}
?>
Jquery code For Date Picker:
(document).ready(function(){
var count=0;
count=<?php echo count($locations);?>;
for(i=1;i<=count;i++)
{
var dates = $('#txtFromDate_'+i+', #txtToDate_'+i).datepicker({
defaultDate: new Date(),
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
onSelect: function(selectedDate) {
var option = this.id == "txtFromDate_"+i ? "maxDate" : "minDate";
var instance = $(this).data("datepicker");
var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
}
Jquery Date Picker is displayed for fromdate and to date fields. In the above code i have applied the from date to date validation i.e. to date should be greater than from date.
The problem with above code is that this validation is applied on the last row only.
I want that this validation should be applied to all the rows.
You redeclare the dates variable at every iteration of the loop. So when the loop is done, the dates variable that you're using in the onSelect handler is equal to last item that was set in the loop.
Update Try this code:
Update2 One more thing is the issue of variable i. Its current value is available while in the loop, so later on, when the onSelect handler is used, the i has a value as in last iteration. To overcome this, you have to put i in a context of another function, that's why I have wrapped code in the body of the loop in another function to which I'm passing i variable.
Update3 And one more thing - the logic for picking the option (minDate or maxDate) had to be reversed.
$(document).ready(function(){
var count=0;
count=<?php echo count($locations);?>;
for(i=1;i<=count;i++)
{
(function(i) {
$('#txtFromDate_'+i+', #txtToDate_'+i).datepicker({
defaultDate: new Date(),
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
onSelect: function(selectedDate) {
var option, otherPicker;
if (this.id == "txtFromDate_"+i) {
otherPicker = $("#txtToDate_"+i);
option = "minDate";
} else {
otherPicker = $("#txtFromDate_"+i);
option = "maxDate";
}
var instance = $(this).data("datepicker");
var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
otherPicker.datepicker("option", option, date);
}
};
})(i);
}
});

Categories