I’m trying to read dates from a text file for example - '08/12/2017'
$.get('disableDays.txt', function(data) {
var disableSpecificDays = data;
The values are getting read. I'm then trying to disable dates in the datepicker based on text file entries
It works when I set the value like this:
addDates: ['08/12/2017', '10/14/2017'],
This doesn’t work :
addDates:+ disableSpecificDays,
I’ve tried setting as array but I know jquery is not same as array and like:
addDates:+ $('#disableSpecificDays').val,
var today = new Date();
var y = today.getFullYear();
var dates = $('#full-year').multiDatesPicker({
//addDates: ['08/12/2017', '10/14/2017'],
//addDates:+ $('#disableSpecificDays').val,
addDates:+ disableSpecificDays,
numberOfMonths: [3,4],
defaultDate: '1/1/'+y
beforeShowDay: $.datepicker.noWeekends
});
What I am doing wrong?
Can I write back to the text file with:
file_put_contents($file, $current);
Related
I have an array of dates pulled from a database that I am trying to disable on the datepicker. The array below is the results from my database. Using Jquery UI datepicker. Disable array of Dates as guidance, I tried to disable the dates from my array. My page is connected to
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> and my own .js file.
From my HTML page:
<input id="resDate">
From my JavaScript file:
$(document).ready(function () {
blackoutDates();
});
function blackoutDates() {
var unavailableDates = ["10/27/2018", "11/8/2018", "4/25/2018"]
$(function () {
$("#resDate").datepicker({
todayHighlight: true,
beforeShowDay: function (date) {
var string = jQuery.datepicker.formatDate('mm-dd-yy', date);
return [unavailableDates.indexOf(string) == -1]
}
});
});
}
On JSFiddle the result is that the dates are completely unaffected (i.e. none are disabled). On my page, I received the error "Uncaught TypeError: Cannot read property 'formatDate' of undefined".
Since that function did not work, I also tried:
$(document).ready(function () {
blackoutDates();
});
function blackoutDates() {
var unavailableDates = ["10/27/2018", "11/8/2018", "4/25/2018"]
$(function () {
$("#resDate").datepicker({
todayHighlight: true,
beforeShowDay: function unavailable(date) {
dmy = date.getDate() + "/" + (date.getMonth() + 1) + "/" +
date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, "","Available"];
} else {
return [false, "", "Unavailable"];
}
}
});
});
}
This did not disable any dates on both my page and JSFiddle. When I step through it while debugging with Chrome, the loop breaks after May 5,2018. Maybe it is having issues because it did not reach all of my array dates?
I have really confused myself. All advice is appreciated! Thank you!
Your first solution:
jQuery.datepicker.formatDate('mm-dd-yy', date) return mm/dd/yyyy, but the element of var unavailableDates is like "4/25/2018".
Your second solution:
your string format is different with var unavailableDates. one is mm/dd/yyyy, the other one is dd/mm/yyyy.
After fixed that, your codes should work.
Perhaps you already knew, beforeShowDay need to return one array:
As API defines:
A function that takes a date as a parameter and must return an array
with:
[0]: true/false indicating whether or not this date is selectable
[1]: a CSS class name to add to the date's cell or "" for the default presentation
[2]: an optional popup tooltip for this date
And another point is each element of var unavailableDates is string.
but the parameter of beforeShowDay is one date object, I prefer to predefining each element of var unavailableDates with new Date()
Then below is my solution
change each element of var unavailableDates to Date object. like new Date(2018, 09, 27)
get new Set() from var unavailableDates, then just simple check by .has() whether dateStr existes in that set(). (Also you can use Array.filter to check whether the date is unselectable). If true, return `[false, 'your css class', 'your tooltip'],
if false, return [true,'',null]
PS: use Set(), we can avoid loop the array again and again, it will improve the efficiency a lot.
add one CSS class which is in var unavailableDates, you can customize the CSS=.disable-day by yourself.
Update: Added sample codes for .Net.
Below is the working sample:
$(document).ready(function () {
blackoutDates();
});
function blackoutDates() {
//assuming <%=DateTimeText%> is one string like mm-dd-yyyy;mm-dd-yyyy
var unavailableAspxDatesString = '10-27-2018;11-08-2018;04-25-2018' //= '<%=DateTimeText%>'
let unavailableDateSet = new Set(unavailableAspxDatesString.split(';'))
/*var unavailableDates = [new Date(2018, 09, 27), new Date(2018, 10, 08), new Date(2018, 03, 25)]
let unavailableDateSet = new Set(unavailableDates.map(function(item){
return jQuery.datepicker.formatDate('mm-dd-yy', item)
}))*/
$(function () {
$("#resDate").datepicker({
todayHighlight: true,
beforeShowDay: function (calDate) {
return unavailableDateSet.has(jQuery.datepicker.formatDate('mm-dd-yy', calDate)) ? [false, 'disable-day', 'no available day!!!'] : [true, '','']
/*
return unavailableDates.filter(function(item){
return item.getTime()==calDate.getTime()}).length > 0 ? [false, 'disable-day', 'no available day!!!'] : [true, '','']*/
}
});
});
}
.disable-day{
background-color:red;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="resDate">
I'm trying to render the full calendar and I want each cell to be in a different color according to an array of mine that contains a color for each day of the given month.
I get this array in Jason.
eg "json_backgrundColor [1] ='red'"
(1 being the day date number of the month. possibale array key range 1-30/31).
here is an array in jason for e.g:
{"1":"green","2":"blue","3":"blue","4":"yellow","5":"yellow","6":"yellow","7":"yellow","8":"yellow","9":"blue","10":"blue","11":"yellow","12":"yellow","13":"yellow","14":"yellow","15":"yellow","16":"blue","17":"blue","18":"yellow","19":"yellow","20":"yellow","21":"yellow","22":"yellow","23":"blue","24":"green","25":"red","26":"red","27":"green","28":"green","29":"green","30":"green","31":"green"}
my first problem is that i cannot seem to get the number of the given cell day as an integer (1-31) in JS.
here is the code(php while echoing Js): `
for ($i = 1; $i <= 12; $i++) {
$month = $i - 1;
$json_array_for_fullCalendar[$i] = self::convert_events_to_json_for_full_calendar($fullCalendarMonth[$i],$_POST['display_Language']);
echo "<div id='calendar$i'></div>
<script>
var json = $json_array_for_fullCalendar[$i];
var JsMonth = $month;
var JsYear = $year;
var json_backgrundColor = $JsonMonthBackgroudCell[$i];
$('#calendar$i').fullCalendar({
var moment = $('#calendar$i').fullCalendar('getDate');
var cellDate = moment.format('d');
events: json,
fixedWeekCount: false,
defaultDate: new Date(JsYear, JsMonth, 1),
dayRender: function (date, cell) {
cell.css('background-color', json_backgrundColor[cellDate])
},
});
</script>"; }
This code does not even render the full calendar (and this is my seconed problem).
my seconed problem is that its hard to me to render the full calendar when im trying to get the array key in js variables.
e.g for seconed problem:
when im not using a variables and i use an integer insted :
dayRender: function (date, cell) {
cell.css('background-color', json_backgrundColor[1])
},
and when im droping this lines from the code:
var moment = $('#calendar$i').fullCalendar('getDate');
var cellDate = moment.format('d');
the full calendar is rendering without any problem.
I'm a bit new with communicating PHP and JS.. I tryed to find a solution for this on my own for a long time.
any suggestion?
thanks!
take a look here
http://jsfiddle.net/z8Jfx/7/
and proceed from there.
var $calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultView: 'month',
dayRender: function (date, cell) {
var today = new Date();
var end = new Date();
end.setDate(today.getDate()+7);
if (date.getDate() === today.getDate()) {
cell.css("background-color", "red");
}
if(date > today && date <= end) {
cell.css("background-color", "yellow");
}
}
});
Hi i am using bootstrap datepicker. I need to get the value from datepicker text box in the format like date-month-year to my controller but presently i am getting values like
Tue Oct 01 00:00:00 IST 2013
I have tried formatting date but still i am getting same result . I have tried like below
$(function() {
window.prettyPrint && prettyPrint();
$('#birthday').datepicker({
format: "DD, d MM, yy"
})
});
If the format attribute is not working. You can try something similar to this:
var dt = $('#dt').datepicker({format:'dd/mm/yyyy'}).on('changeDate', function(ev) {
var newDate = new Date(ev.date);
var year = newDate.getFullYear();
var month = (newDate.getMonth()+1);
var day = newDate.getDate();
dt.setValue(day+'-'+month+'-'+year);
dt.hide();
}).data('datepicker');
You are formatting your date by yourself.
You can ignore the format attribute.
I am trying to reset value of rich:calender input box via java script but couldnt do it any way at all. the UI of my form (snippet only) is...
<rich:calendar id="startDate" datePattern="dd MMM yyyy" value="#{classBean.startDate}" popup="true" onchanged="calcDuration();">
</rich:calendar>
the java script is
function calcDuration()
{
sdate =$('frm_course:startDate').component.getSelectedDateString("dd MMM
yyyy");
var currentdate = new Date();
var sdatecmp = new Date(sdate);
if(sdatecmp > currentdate)
{
alert('The Start Date is Greater than today!');
$('frm_viewCourseDetail:startDate').component.value = ""; // 1
document.getElementById('frm_course:startDate').value =""; // 2
}
}
None of the lines 1 and 2 resets the richcalender's value. Help is required here. thanks.
The calendar (and other components) is backed by a JavaScript object which has the methods you need.
Use either #{rich:component('startDate')} or RichFaces.$('startDate') to get a reference to that object and then call resetValue().
For other methods check the docs
I'm hoping to get some help with my problem i have been having with jquery datepicker.
Please visit this site for information regarding the problem with code samples:
http://codingforums.com/showthread.php?p=929427
Basically, i am trying to get the 1st day and day 31st working and have yet to find a way to do this. They say it may be an error within the jquery calendar.
Here is the code.
//var disabledDays = ['3-31-2010', '3-30-2010', '3-29-2010', '3-28-2010', '3-2-2010', '3-1-2010', '4-1-2010' ];
var checkDays = null;
function noWeekendsOrHolidays(date)
{
// optional: ensure that date is date-only, with no time part:
date = new Date( date.getFullYear(), date.getMonth(), date.getDate() );
// no point in checking if today is past the given data:
if ( (new Date()).getTime() > date.getTime() ) return [false,'inthepast'];
if ( checkDays == null )
{
checkDays = [];
// convert disabledDays to a more reasonable JS form:
for ( var d = 0; d < disabledDays.length; ++d )
{
var p = disabledDays[d].split("-");
checkDays[d] = new Date( parseInt(p[2]), parseInt(p[0])-1, parseInt(p[1]) );
}
}
var datetime = date.getTime();
for ( var i = 0; i < checkDays.length; i++)
{
if ( checkDays[i].getTime() == datetime ) return [false,'holiday'];
}
return [true,'']; // default CSS style when date is selectable
}
jQuery(document).ready(function() {
<%
response.write "var theSelectedDay = $.datepicker.parseDate(""y-m-d"", '" & theDate & "');" & vbcr
%>
jQuery('#datepicker2').datepicker({
dateFormat: 'yy-mm-dd',
constrainInput: true,
firstDay: 1,
defaultDate: theSelectedDay,
beforeShowDay: noWeekendsOrHolidays,
onSelect: function(date) {
endDate = date;
startDate = theSelectedDay;
}
});
});
The theSelectedDay is formatted like ['2010-3-1']
I have set the clock back on my computer in order to test this out. It's set on March 1st.
I have a big calendar on the main page and when the user clicks on a day it pops up this datepicker. Like i said, it all works fine for days 2-30 but not for day 1 and 31.
If they choose day 2 (and it was march 2nd) then Monday would not be selectable of course since its a past day.
Hope that helps.
You mean valueOf(), not getTime().