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);
}
});
Related
im trying to use two date picker in a page. it seems to worked fine but after clicked on the submit button the date entered is not the same as the choosen date. both of the date inserted to the database is 01-01-1970.
how can i fix this?
<div class="form-group">
<label class="control-label col-sm-4">Date Issued</label>
<div class="col-sm-5">
<input class="form-control" type="text" id="dateIssuedpc" name="dateissued" required class="form-control" placeholder="Enter Date Issued"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">Date Expired</label>
<div class="col-sm-5">
<input class="form-control" type="text" id="dateExpiredpc" name="dateexpired" required class="form-control" placeholder="Enter Date Expired" />
</div>
</div>
<script>
$( function() {
$( "#dateIssuedpc").datepicker({
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true
});
$( "#dateExpiredpc" ).datepicker({
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true
});
} );
</script>
if field data type in database is datetime then
$dateexpired = $_POST['dateexpired'];
$new_dateexpired = date("Y-m-d H:i:s",strtotime($dateexpired));
$dateissued = $_POST['dateissued'];
$new_dateissued = date("Y-m-d H:i:s",strtotime($dateissued));
if field data type is date then
$dateexpired = $_POST['dateexpired'];
$new_dateexpired = date("Y-m-d",strtotime($dateexpired));
$dateissued = $_POST['dateissued'];
$new_dateissued = date("Y-m-d",strtotime($dateissued));
This is not datepicker problem, rather problem is with PHP code.
Mysql date format is always YYYY-MM-DD HH:II:SS
So while inserting data to mysql table, you have to convert the format for mysql
Ex:
$postDate = $_POST['date'];// just collect value from post fields.
$date = date("Y-m-d H:i:s",strtotime($postDate));
You need to format your date properly. First of all change format from dateFormat: "dd-mm-yy", to *dateFormat: "dd-mm-yyyy",* to better recognise year.
After that from php side you something like this
$dateissued = date("Y-m-d", strtotime($_POST['dateissued']) ); //MySql date format
I have dynamic form, Now when Input generated, there is 2 datepicker (FromDate, ToDate), and you can generate many of this tow inputs.
The Input come like this:
<input type="text" class="input-date displayDate complexField" name="Course[FromDate][1]" value="" />
<input type="text" class="input-date displayDate complexField" name="Course[ToDate][1]" value="" />
Each Input will generate jQuery for datepicker like this:
$(document).ready(function() {
{/literal}$(".input-date").datepicker({literal}{
dateFormat: dFormat,
showOn: 'button',
changeMonth: true,
changeYear: true,
minDate: new Date(1940, 1 - 1, 1),
maxDate: '+10y',
yearRange: '-99:+99',
onSelect: function(selected) {
$("[name^='Course[FromDate]']").datepicker("option","maxDate", selected)});
$("[name^='Course[ToDate]']").datepicker("option","minDate", selected)});
}
});
Now everything work fine, you can add many these two inputs and all of them with datepicker.
The Only problem is:
The option onSelect work fine only if you have only the first element (FromDate and ToDate) the ToDate can't be greater than FromDate and vice versa,
But when I add other elemnts which will be:
<input type="text" class="input-date displayDate complexField" name="Course[FromDate][2]" value="" />
<input type="text" class="input-date displayDate complexField" name="Course[ToDate][2]" value="" />
The onSelect will work wrong, it will work 4 together, I need it work with elements with array index (1) alone, and in elements with index number (2) works alone and so on.
Please advice me on this ...
Use this code and try agin
$('document').ready(function(){
$('.input-date').on('click',function(){
$(this).datepicker({literal}{
dateFormat: dFormat,
showOn: 'button',
changeMonth: true,
changeYear: true,
minDate: new Date(1940, 1 - 1, 1),
maxDate: '+10y',
yearRange: '-99:+99',
onSelect: function(selected) {
$("[name^='Course[FromDate]']").datepicker("option","maxDate", selected)});
$("[name^='Course[ToDate]']").datepicker("option","minDate", selected)});
}
});
});
can't find solution to this issue. So i have datepicker input field, it works fine, i can choose date and save it to database. But when i want to edit this saved value in edit_profile.php this field is empty, i need to see the user specified date. How to do it?
Datepicker function:
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true
}).val('<?php echo $age;?>');
});
Input:
<input name="datepicker" type="text" id="datepicker" class="date_picker" value="" />
what to do ?
Can't you just do this:-
<input name="datepicker" type="text" id="datepicker" class="date_picker" value="<?php echo $age;?>" >
I think you should use defaultDate option, for example
$( "#datepicker" ).datepicker({ dateFormat: "yy-mm-dd", changeMonth: true, changeYear: true, defaultDate: yourDate });
You can use SetDate or Defaultdate option of datepicker:
$('#dateselector').datepicker("setDate", new Date(2008,9,03) );
I have to input field "From" and "to
<input type="text" name="startDate" id="from" size="12"/>
<input type="text" name="endDate" id="to" size="12"/>
If would like to know how I could make in sort that datepicker block the calendar within the month where From is selected. So if I choose November 20th, then the id "to" could only be after the 20th to 31st of november. It can't go to the other month.
Here's what I have
var dates = $( "#from, #to" ).datepicker({
changeMonth: false,
numberOfMonths: 1,
maxDate: '+0D',
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 );
}
});
How could we block the user to not go pass the month selected?
You could use a date range picker like this one: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/
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);
}
});