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
Related
I would like to block specific dates and week days dynamically from MySQL database records. I have done to some extent and not able to proceed further.
json_encode(array("days"=>$days_off,"dates"=>$resultarr))
The above will output the following:
{"days":["0","1","1","1","1","1","0"],"dates":["2015-06-01","2015-06-02","2015-06-03","2015-06-04","2015-06-05"
,"2015-06-06","2015-07-09","2015-07-10","2015-07-28","2015-07-29","2015-07-30","2015-07-31"]}
And in the front end, the jquery written in this way:
success: function(data){
var dateToday = new Date();
var ndata = $.parseJSON(data);
if ($('#datepicker').length) $("#datepicker").datepicker({
minDate: dateToday, firstDay: 1, //endDate: '+0m',
dateFormat: "DD d MM yy", showOtherMonths:false,
beforeShowDay: function(date){
var day = date.getDay();
var selected = $("#datepicker").datepicker('getDate');
return [ndata[day] !=0, ""];
}
});
}
The above will block only the days(monday-sunday) but not able to block specific dates which I get from above json data.
You will need to check if the date is the same as any of the ones passed in your JSON. It could be done like this:
beforeShowDay: function(date) {
//Check if it's a forbidden day of the week.
var day = date.getDay();
var okDay = (ndata.days[day] != 0);
//Check if it's a forbidden date.
var formatted_date = $.datepicker.formatDate('yy-mm-dd', date)
var okDate = ($.inArray(formatted_date, ndata.dates) == -1);
//Only return true if both day of week and date are allowed.
return [okDay && okDate]
}
Please note that I have not tested this code. Also, I changed from ndata[day] to ndata.days[day] since that seemed to be more inline with your JSON, but I might be wrong there. Here is the documentation on .inArray(), and here is the documentation on datepicker.formatDate().
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
Hi all I'm using daterangepicker.jQuery.js
( http://trac.vtiger.com/cgi-bin/trac.cgi/browser/vtigercrm/branches/6.0.0/vtiger6/libraries/jquery/jquery-ui/third-party/jQuery-UI-Date-Range-Picker/js/daterangepicker.jQuery.js?rev=13838 )
per default it's initialized at 1970-01-01 and i've searched in the whole javascript but i didn't find it does someone know how to change this value ? and if possible how to limit the calendar in today's date please
( EDIT )
I've tried
<script type="text/javascript">
$(function(){
$('#rangeBa, #rangeBb').daterangepicker();
});
$(document).ready(function(){
var date = '17-05-2013';
$('#rangeBa, #rangeBb').daterangepicker('setDate', date);?
})
</script>
but it's not working
This works like a charm. You can try it.
var today = new Date();
var endDate = new Date();
endDate.setMonth(endDate.getMonth() + 1);
$('#rangeBa, #rangeBb').daterangepicker({
startDate: today, // after open picker you'll see this dates as picked
endDate: endDate,
locale: {
format: 'DD-MM-YYYY',
}
}, function (start, end, label) {
//what to do after change
}).val(today + " - " + endDate); //set it to see it inside input (don't forget to format dates)
If you want to limit date range just use minDate and maxDate options.
Try like
$(document).ready(function(){
var date = '17-05-2013';
$("#my_input").datepicker('setDate', date);
})
Make sure that the datepicker date format would be like 'dd-mm-yyyy' only
As per your edit
/*$(function(){
$('#rangeBa, #rangeBb').daterangepicker();
});*/
$(document).ready(function(){
var date = '17-05-2013';
$('#rangeBa, #rangeBb').daterangepicker();
$('#rangeBa, #rangeBb').daterangepicker('setDate', date);
})
and you can try by date object like
defaultDate = new Date(2013,05,17);
$('#rangeBa, #rangeBb').daterangepicker('setDate', defaultDate);
try it.
<script type="text/javascript">
var today = new Date();
$(function () {
$('#rangeBa, #rangeBb').daterangepicker({
"startDate": today,
},
locale: {
format: 'DD-MM-YYYY',
},
function (start) {
startdate = start.format('DD-MM-YYYY')
});
});
</script>
You can try like this and daterangepicker take default date of today..
<input type="text" name="daterange" value="01/01/2018 - 01/15/2018" />
<script>
$(function() {
$('input[name="daterange"]').daterangepicker({
opens: 'left'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
</script>
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>