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>
Related
Below is the Ajax call in index.php
$(document).ready(function() {
$(document).on("click", ".result p", function(e) {
$(this).parent(".result").empty();
var $txt = $(this).text();
document.getElementById("pd").style.display = "block";
document.getElementById("listpd").style.display = "none";
e.preventDefault();
$.ajax({
type: "POST",
url: "piutang.php",
data: {"nama": $txt},
success: function(msg) {
$("#pd").html(msg)
$("#formNama").val('');
},
error: function() {
alert("failure");
}
});
});
});
The piutang.php (inside the Ajax call) has the text box for the date-picker and also the script for the date picker.
<input type="text" id="datepicker" name="tgl" style="width: 85px;" readonly />
<script>
$(function() {
$("#datepicker").datepicker();
});
$('#datepicker').datepicker({
dateFormat: "dd M yy"
}).datepicker("setDate", new Date());
</script>
After the call, inside the div with id:#pd,
I can see the text box of the date picker with the current date.
But it show the default format mm/dd/yyyy not dd M yy.
What I've tried so far is cut the script code in piutang.php,
then paste/insert the code inside Ajax success, right after $("#pd").html(msg),
but the result is the same thing, inside the div with id:#pd,
the text box show the current date with its default format mm/dd/yyyy.
How do I solve this ?
Thank you.
You need to initialize date picker one time with all settings:
$('#datepicker').datepicker({
dateFormat: "dd M yy"
}).datepicker("setDate", new Date());
This one is enough. Remove other one.
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
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().
I am using jQuery's datepicker in wordpress/PHP and I am using this code to show dates:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
$("#datepicker").datepicker();
$("#datepicker").datepicker("option","dateFormat",'yy-mm-dd');
});
</script>
Date<input type="text" id="datepicker" size="20" maxlength="15" style="width: 80px;" readonly="readonly"/>
It successfully displays my date.
Also, I have a table (wp_redeem_vouchers) in the database that has specific voucher redemption dates saved in it:
id wp_deal_id redeem_date
1 Amazon6767 2012-03-21
2 Ebay87nm 2013-06-12
3 M&Svouc 2013-01-01
4 ASDA 2011-09-08
Question:
How can I retrieve "redeem_date" and compare with the datepicker's textbox date (upon selection) with the date already saved in the database?
Is there anyway I could disable past date so that user can't choose the past date from date picker? i.e The user on 14/03/2013 can't choose 22/02/2013 from datepicker.
For your i)
$('#datepicker').datepicker( {
minDate: 0,
onSelect: function(dateText, inst) {
$.ajax({
type: "POST",
url: "some.php",
data: { date: dateText },
onSuccess: function(e){
alert("success");
}
});
});
Then in the some.php file you do your compare with mysql and you return a success or failure getting the alert(success).
Then I would start with
$date = $_POST['date'];
die($date);
In the some.php just to see if it is passed correctly.
Well, you can pass your datepicker date string (adjust format to $("#datepicker").datepicker("option","dateFormat",'yyyy-mm-dd');) to following JavaScript function which creates a Date object:
function createDate(s) {
var bits = s.split('-');
var d = new Date(bits[0], bits[1] - 1, bits[2]);
return d;
}
Then you have to retrieve the date value from your database.
I do not know if there is a wordpress limitation but you can trigger a Ajax-Request which reads out the database value and give you as a response the date string as a JavaScript variable.
This variable can also be passed to the createDate(date) function. With these two date objects you can call easily compare the date with the time in milliseconds -> getTime() function of date object.
Regards
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