This question already has answers here:
jquery datetime picker set minDate dynamic
(9 answers)
Closed 8 years ago.
I am using datepicker for the selection of start date and end date of an event.
$(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker2" ).datepicker();
});
<input type="text" id="datepicker">
<input type="text" id="datepicker2">
Now both the date pickers are working fine except I want to restrict datepicker2 to not allow any dates less that the date already selected for datepicker
You can try these too
$(function() {
$('#datepicker, #datepicker2').datepicker({
showOn: "both",
beforeShow: customRange,
dateFormat: "dd M yy",
});
});
function customRange(input) {
if (input.id == 'datepicker2') {
var minDate = new Date($('#datepicker').val());
minDate.setDate(minDate.getDate() + 1)
return {
minDate: minDate
};
}
return {}
}
Copied From jQuery UI Datepicker Range
Related
I'm currently doing a Hotel Reservation website and I'm trying to learn how to disable jQuery DatePickers depending on the values from database.
For example, the dates March 1 up to March 5 are inserted into the Database A tables checkin and checkout rows.
So now checkin has March 1 value and checkout has March 5.
Let's say I have two jQuery datepicker, one for checkin and one for checkout. How do I disable the days March 1 and March 5 in them taken from the value inside the database?
Here's my current script for the datepicker:
$(function () {
$("#checkin").datepicker({
dateFormat: "M-dd-yy",
minDate: 0,
onClose: function () {
var date2 = $('#checkin').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
$('#checkout').datepicker('setDate', date2);
$('#checkout ').datepicker('option', 'minDate', date2);
datepicked();
$('#checkout').datepicker('option');
}
});
$('#checkout').datepicker({
dateFormat: "M-dd-yy",
minDate: 0,
onSelect: function () {
var dt1 = $('#checkin ').datepicker('getDate');
var dt2 = $('#checkout').datepicker('getDate');
datepicked();
//check to prevent a user from entering a date below date of dt1
if (dt2 <= dt1) {
var minDate = $('#checkout ').datepicker('option', 'minDate');
$('#checkout').datepicker('setDate', minDate);
$('#checkin').datepicker('option');
}
}
});
var datepicked = function() {
var checkin = $('#checkin');
var checkout = $('#checkout');
var nights = $('#nights');
var fromDate = checkin.datepicker('getDate');
var toDate = checkout.datepicker('getDate');
if (toDate && fromDate) {
var oneDay = 1000*60*60*24;
var difference = Math.ceil((toDate.getTime() - fromDate.getTime()) / oneDay);
nights.val(difference);
}
};
});
$(function () {
$("#date").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
autoclose: true,
startDate: new Date()
});
});
Thank you very much in advanced.
If you try to set initial value's for this input's just use setDate after datepicker initializtion.
In PHP set value attribute for input:
<input id="checkin" value="<?= date('M-dd-yy', $valueFromDbCheckin) ?>">
And just call setDate:
$( "#checkin" ).datepicker( "setDate", $('checkin').val() );
If you try to disable some date's in datepicker's then you probably could try this solution:
Disable array of date's Jquery DatePicker
Actually, i am using jquery datepicker and getting month in "MONTH-YEAR" format?
how i can get month number form this format in PHP or JAVASCRIPT?
js code:
$("#date1_live").datepicker({
changeMonth: true,
changeYear: true,
showAnim:'slideDown',
dateFormat:'M yy'
});
html text field:
<input type="text" name="reportMonth" id="date1_live" required Placeholder="Select Start Date" >
using php try like this
$month = 'JAN-2014';
echo date('m', strtotime($month));
Please take a look at the following documentation.
jQuery UI Datepicker
The format for parsed and displayed dates. For a full list of the
possible formats see the formatDate function.
Code examples:
Initialize the datepicker with the dateFormat option specified:
$( ".selector" ).datepicker({ dateFormat: "yy-mm-dd" });
try this,
alert($("#datepicker").datepicker({ dateFormat: "mm-yy" }).val());
or Demo
{
changeMonth: true,
changeYear: true,
showAnim:'slideDown',
dateFormat:"mm-yy"
}
This question already has answers here:
How to change date format (MM/DD/YY) to (YYYY-MM-DD) in date picker
(18 answers)
Closed 9 years ago.
Hi I am trying to format the jquery datepicker so that it displays as yyyy-mm-dd
I have both a start_date and end_date..
I have tried changing the script in the head to:
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker({dateFormat: 'yy-mm-dd'});
});
</script>
however it still appears when I am trying to put it in a database as 00-00-000
I would really appreciate any help!
Ryan
$(function(){
$("#to").datepicker({ dateFormat: 'yy-mm-dd' });
$("#from").datepicker({ dateFormat: 'yy-mm-dd' }).bind("change",function(){
var minValue = $(this).val();
minValue = $.datepicker.parseDate("yy-mm-dd", minValue);
minValue.setDate(minValue.getDate()+1);
$("#to").datepicker( "option", "minDate", minValue );
})
});
http://jsfiddle.net/gaby/WArtA/
I have PHP+JQUERY room reservation application. I'm using the datepicker widget for picking date and I encounter a problem. I try to convert the selected date (in dd/mm/yyyy format) to YYYY-mm-dd format in order to INSERT it to my database. When I pick the first dates, it converts well but when I pick other dates, I see the date 1969-12-31. Here is my JQUERY code:
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
minDate: 0,
maxDate: "+3W",
dateFormat: "dd/mm/yy",
beforeShowDay: function (date) {
var day = date.getDay();
return [(day == 0 || day == 1 || day == 2 || day == 3 || day == 4), ''];
},
onSelect: function(dateText) {
$("#registration").load("room.php #registration", {selectedDate: dateText}, function() {
$( "input:submit, a, button", ".registration" ).button();
$( "a", ".registration" ).click(function() { return false; });
});
}
});
});
And then i echo the result for testing:
<?php if(isset($_POST['selectedDate']))
{
$selectedDate=$_POST['selectedDate'];
echo date('Y-m-d',strtotime((string)$selectedDate));
}
?>
Here is an image in my app: http://oi43.tinypic.com/29tv2c.jpg
1:
Eventually i by passed the problem. instead of converting it in PHP, i converted it in JS:
onSelect: function(dateText) {
//Converting the date format by spliting the date.
var dt= dateText;
var arrDt = dt.split('/');
var newDt = arrDt[2] + "-" + arrDt[1] + "-" + arrDt[0];
//Loading the rooms div acoording to the sent selected date in JSON format
$("#registration").load("room.php #registration", {selectedDate: newDt}, function() {
$( "input:submit, a, button", ".registration" ).button();
$( "a", ".registration" ).click(function() { return false; });
});
}
But i still don't know what caused the date() function conversion problem!
What's type of selected date that you store in MySQL? With DATE data type you just have to pass 'YYYY-MM-DD format to INSERT statement.
See this question for more details
And also this http://dev.mysql.com/doc/refman/5.5/en/datetime.html
Can someone please tell me how I can make the datepicker pick a date that is after a certain date I choose.
For example I want the date picker to pick dates after 03/08/2012.
Here is my simple datepicker:
<script type="text/javascript">
$(function(){
$("#date").datepicker({ dateFormat: 'm/d/yy', minDate: 0});
});
</script>
What if the date was stored in a php variable. for eg. $var='03/08/2012'. Is splitting it one by one only way to do it?
I am trying to get the date from a dynamic php variable. For eg:
<script type="text/javascript">
$(function() {
$( "#date" ).datepicker({ minDate: new Date(<?php echo $split_date[2];?>, <?php echo ($split_date[0] - 1);?>, <?php echo $split_date[1]; ?>)});
});
</script>
<?php
$date='03/08/2011';
$split_date=explode("/",$date);
echo $split_date[0];
echo $split_date[1];
echo $split_date[2];
?>
but nothing i tried so far works!
According to jQuery's doc on the Datepicker, you should do
<script>
$(function() {
$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
});
</script>
Restrict the range of selectable dates with the minDate and maxDate options. Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ('+1M +10D'). For the last, use 'D' for days, 'W' for weeks, 'M' for months, or 'Y' for years.
If you want it to start from 03/08/2012, you should write
<script>
$(function() {
$( "#datepicker" ).datepicker({ minDate: new Date(2012, 3 - 1, 8)});
});
</script>
You can also refer to this answer:
changing minDate option in JQuery DatePicker not working
Try:
<script type="text/javascript">
$(function(){
$("#date").datepicker({
'dateFormat': 'm/d/yy',
'minDate': new Date(<?php echo date('Y, m, d'); ?>)
});
});
</script>