I'm using [https://fullcalendar.io/][1]
[1]: https://fullcalendar.io/ in my project, I need to disable previous date and unselectable,
I try below code:but I don't know how to disable previous date...
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
var check = $.fullCalendar.formatDate(start,'yyyy-MM-dd');
var today = $.fullCalendar.formatDate(new Date(),'yyyy-MM-dd');
if(check < today)
{
alert('disabled');
}
else
{
var seleted_cells = parseInt($("#day_selected").text());
seleted_cells = seleted_cells + 1;
$("#day_selected").text(seleted_cells);
}
},
Anyone please help...
Just pass current date in the line -> start: ''. Replace your calender id, Some what like this
// constrain to an open-ended range
$('#calendar2').fullCalendar({
defaultView: 'month',
validRange: {
start: '2017-05-01'
}
});
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
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 have added some code to my website but just can't fiqure out how to add cookie functionality
This is the code so far:
<script type="text/javascript">
$(document).ready(function () {
$.fancybox('<p class="msgAlert">The following pictures contain nudity. <br />If you are not allowed or willing to watch such content please leave this page.<p>Yes I Accept</p></p>', {
closeBtn: false,
closeClick: false,
helpers: {
overlay: {
css: {
'background': 'rgba(0, 0, 0, 0.9)'
}
}
}
});
$("body").on("click", "#do_accept", function () {
$.fancybox.close();
});
$("body").on("click", ".fancybox-overlay", function () {
window.location.href = "index.php";
});
});
</script>
I can't add php code so I need some advice. The idea ist to have a 10 day cookie in order to show the message just once every 10 days.
Here's the link: https://www.olafernst.com/photo/gallerynudes.html
Thanks a lot
To set cookies in javascript just use document.cookie
document.cookie = "Name=Value; expires=<DATE>';
to get date in right format you can use toUTCString method on Date object.
To add days to current date you can use answer to this quetion:
How to add number of days to today's date?
You use jquery so you can use jQuery cookie plugin for this as #gustavogb write in a comment.
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>
When I make a selction on the calendar and add an event, it sends the info to my PHP script and the event is placed in the database as expected. Great!
The problem is when I select another date and add the event (without refresh), it adds the event twice in the MYSQL database. Not Great!
This perpetually adds up with the increasing clicks until a refresh is made. Also the "extra" events added have no time placed in the DB except for "0000-00-00 00:00:00", so in turn it appear correct upon output. Am I just missing something simple? What am I doing wrong?
<script>
$(document).ready(function(){
select: function(start, end, allDay){
$("popup").show();
$(".title").focus();
var start = Date.parse(start) / 1000;
var end = Date.parse(end) / 1000;
var allDay = allDay:
$("submitForm").click(function(){
var title = $(".title").val();
var description = $("description").val();
var team_id = <?php echo $id ?>;
if(title != "" || title != " "){
$.post("script.php", {...}, function(){
$(".title").val("");
$(".description").val("");
start = "";
end = "";
title = "";
description = "";
team_id = "";
allDay = "";
calendar.fullCalendar('unselect');
calendar.fullCalendar('refetchEvents');
});
}else{
alert("You must enter a title");
}
$(".popup").hide();
});
}
});
</script>
Obviously this is not the entire JS/Jquery but this is what matters. What am I missing? Thanks in advance. Your help is appreciated!
Here you attach the click event repeatedly when you select a date.
select: function(start, end, allDay){
$("submitForm").click(function(){});
})
So, if your $("popup") exist on document.ready just put this line of code, outside
of the definition of the plugin
Here submit form is found and click event is attached, no matter if the element has display:none property:
$(document).ready(function() {
$("submitForm").click(function(){});
$('#calendar').fullCalendar({
select:select: function(start, end, allDay){})
})
})
if you add the $("popup") element, later dynamically in the jQuery script you have to bind the click event, but be careful to put that code somewhere where it will be executed only once.
I guess your click is getting attached on each success. Place your code click function outside your success callback.
I actually had to add a random session id to fix the problem and then clear the id after the post was completed.
You need to use the following in your success function:
$('#save_button').unbind()
So that as per #mehul9595 you remove all the accumulated events bound to the click.
Help from: https://stackoverflow.com/a/9688908/2468603