How to block off a date in Kendo DatePicker - kendo-ui

Is there a way to block off a date with the Kendo DatePicker? So if they click open the calendar, and they want to select the 10th of December, I can have that date either disabled or removed ( preferrably disabled ). I don't see any documentation on how to do this.
<div id="datePicker"></div>
$('#datePicker').kendoDatePicker({
// I need it dynamically done, I don't want to hard code the date.
// So if the user clicks it, a request will be handled to send back any dates that are previously taken.
});

For the 10th Dec you can do it like this:
$("#datepicker").kendoDatePicker({
value: new Date(2019,11,5),
disableDates: [new Date(2019,11,10)]
});
disableDates can be an array or a function. You can use dates or weekday names. please check the documentation in my comment to know more. Please notice that 11 is month 12. Why does the month argument range from 0 to 11 in JavaScript's Date constructor?
If you would like to use a function here is how:
disableDates: function (date) {
var dates = $("#datepicker").data("kendoDatePicker").options.dates;
if (your condition) {
return true;
} else {
return false;
}
}

Related

Google Sheets add a Permanent timestamp

I am setting up a sheet where a person will be able to check a checkbox, in different times, depending on the progress of a task. So, there are 5 checkboxes per row, for a number of different tasks.
Now, the idea is that, when you check one of those checkboxes, a message builds up in the few next cells coming after. So, the message is built in 3 cells. The first cell is just text, the second one is the date, and the third one is time. Also, those cells have 5 paragraphs each (one per checkbox).
The problem comes when I try to make that timestamp stay as it was when it was entered. As it is right now, the time changes every time I update any part of the Google Sheet.
I set u my formulas as follows:
For the text message:
=IF($C4=TRUE,"Insert text 1 here","")&CHAR(10)&IF($E4=TRUE, "Insert text here","")&CHAR(10)&IF($G4=TRUE, "Insert text 3 here","")&CHAR(10)&IF($I4=TRUE, "Insert text 4 here,"")&CHAR(10)&IF($K4=TRUE, "Insert text 5 here","")
For the date:
=IF($C4=TRUE,(TEXT(NOW(),"mmm dd yyyy")),"")&CHAR(10)&IF($E4=TRUE,(TEXT(NOW(),"mmm dd yyyy")),"")&CHAR(10)&IF($G4=TRUE,(TEXT(NOW(),"mmm dd yyyy")),"")&CHAR(10)&IF($I4=TRUE,(TEXT(NOW(),"mmm dd yyyy")),"")&CHAR(10)&IF($K4=TRUE,(TEXT(NOW(),"mmm dd yyyy")),"")
And for the time:
=IF($C4=TRUE,(TEXT(NOW(),"HH:mm")),"")&CHAR(10)&IF($E4=TRUE,(TEXT(NOW(),"HH:mm")),"")&CHAR(10)&IF($G4=TRUE,(TEXT(NOW(),"HH:mm")),"")&CHAR(10)&IF($I4=TRUE,(TEXT(NOW(),"HH:mm")),"")&CHAR(10)&IF($K4=TRUE,(TEXT(NOW(),"HH:mm")),"")
And it all looks like this:
I would appreciate it greatly if anyone could help me get this to work so that date and time are inserted after checking those boxes and they donĀ“t change again
Notice that your struggle with the continuous changing date time. I had the same struggle as yours over the year, and I found a solution that works for my case nicely. But it needs to be a little more "dirty work" with Apps Script
Some background for my case:
I have multiple sheets in the spreadsheet to run and generate the
timestamp
I want to skip my first sheet without running to generate timestamp
in it
I want every edit, even if each value that I paste from Excel to
generate timestamp
I want the timestamp to be individual, each row have their own
timestamp precise to every second
I don't want a total refresh of the entire sheet timestamp when I am
editing any other row
I have a column that is a MUST FILL value to justify whether the
timestamp needs to be generated for that particular row
I want to specify my timestamp on a dedicated column only
function timestamp() {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const totalSheet = ss.getSheets();
for (let a=1; a<totalSheet.length; a++) {
let sheet = ss.getSheets()[a];
let range = sheet.getDataRange();
let values = range.getValues();
function autoCount() {
let rowCount;
for (let i = 0; i < values.length; i++) {
rowCount = i
if (values[i][0] === '') {
break;
}
}
return rowCount
}
rowNum = autoCount()
for(let j=1; j<rowNum+1; j++){
if (sheet.getRange(j+1,7).getValue() === '') {
sheet.getRange(j+1,7).setValue(new Date()).setNumberFormat("yyyy-MM-dd hh:mm:ss");
}
}
}
}
Explanation
First, I made a const totalSheet with getSheets() and run it
with a for loop. That is to identify the total number of sheets
inside that spreadsheet. Take note, in here, I made let a=1;
supposed all JavaScript the same, starts with 0, value 1 is to
skip the first sheet and run on the second sheet onwards
then, you will notice a function let sheet = ss.getSheets()[a]
inside the loop. Take note, it is not supposed to use const if
your value inside the variable is constantly changing, so use
let instead will work fine.
then, you will see a function autoCount(). That is to make a for
loop to count the number of rows that have values edited in it. The
if (values[i][0] === '') is to navigate the script to search
through the entire sheet that has value, looking at the row i and
the column 0. Here, the 0 is indicating the first column of the
sheet, and the i is the row of the sheet. Yes, it works like a
json object with panda feeling.
then, you found the number of rows that are edited by running the
autoCount(). Give it a rowNum variable to contain the result.
then, pass that rowNum into a new for loop, and use if (sheeet.getRange(j+1,7).getValue() === '') to determine which row
has not been edited with timestamp. Take note, where the 7 here
indicating the 7th column of the sheet is the place that I want a
timestamp.
inside the for loop, is to setValue with date in a specified
format of ("yyyy-MM-dd hh:mm:ss"). You are free to edit into any
style you like
ohya, do remember to deploy to activate the trigger with event type
as On Change. That is not limiting to edit, but for all kinds of
changes including paste.
Here's a screenshot on how it would look like:
Lastly, please take note on some of my backgrounds before deciding to or not to have the solution to work for your case. Cheers, and happy coding~!

How to filter in crossfilter by current date and yesterday's date?

I want to make a query in crossfilter to filter all data from today's date.
Example: I have this query:
var countPerDim2 = Dim2.filterExact("1.1.2018").group().reduceSum();
So crossfilter will filter data from 1.1.2018.
But I want crossfilter to automatically get the the current date.
My reason is that I want to draw two charts to compare them.
Like :
Chart 1 by Date 1.1.2018 and Chart 2 by Date 31.12.17
How can I get the filter by yesterday's date? Is there a function like datenow() for the current day and maybe datenow(-1) for yesterday's date?
Thank you and happy new year!
Today and yesterday
To answer your immediate question, JavaScript's new Date() will return the current time and date as a JavaScript Date object. Then you just need to convert the date object to a string to match your date format.
You can use d3.time.format to produce those strings. Looks like you would want something like
d3.time.format('%-d.%-m.%Y')
(or perhaps with m and d reversed - unclear from your example whether month or day comes first)
Yesterday is something like
var date = new Date();
date.setDate(date.getDate()-1);
See the JavaScript Date documentation for more details.
Comparing two days
However, I think you'll run into a more fundamental problem, which is that crossfilter doesn't have the concept of multiple filters, so it's hard to compare one date against another in side-by-side charts.
Off the top of my head, the best thing I can think of is to "freeze" a group using a fake group:
function freeze_group(group) {
var _all = group.all().slice();
return {
all: function() {
return _all;
}
};
}
You'd apply one date filter, then call
chart.group(freeze_group(group));
on the chart you want to have that date. Now it won't change when the filter changes, and you can apply the other date filter for other charts.

Comparing dates using Dynamic Action on DatePicker Oracle Apex

I have a date picker where the user simply chooses a date then a Dynamic Action is suppose to send an alert if the user clicks tomorrow(sysdate+1).
The Datepicker term is the simple layout.
The Dynamic Action-->
Name: Valid Date
Event: Change
Selection type: Item(s)
Item(s): datepicker_name
Condition: equal to
Value: sysdate+1
When I run the program and click any day on the calendar, no alert comes up. I thought the problem was the format. The Dynamic Action sees the date as "DD/MM/YYYY" while the Datepickers output is "DD-Mon-YY" so it could not compare them. Apples and Oranges. But I played around with the format to make it all the same but still no progress.
Thanks again for your time and help!
As #ScottWe mentions: you're trying to apply PLSQL logic in HTML/javascript. The 'When - Condition' is evaluated at runtime and thus you can't use PLSQL there.
The date arithmetic is a bit annoying in javascript though, so if you're a unfamiliar with it, here is a way you can perform your check (which is, is the entered date tomorrow or not).
Taking my clues from these:
Date difference in Javascript (ignoring time of day)
JavaScript how to get tomorrows date in format dd-mm-yy
Add this function to the page's javascript section for global variables and functions:
function isTomorrow(pDateItem){
function getTomorrow(){
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
return tomorrow;
};
function cutTime(pDate){
return new Date(pDate.getFullYear(), pDate.getMonth(), pDate.getDate());
};
// check if pDateItem leads to a selection
// check if it is a datepicker
// check if a date has been selected
if ( $(pDateItem).length
&& $(pDateItem).data("datepicker")
&& $(pDateItem).datepicker("getDate") !== null
)
{
var tomorrow = getTomorrow();
var check = $(pDateItem).datepicker("getDate");
var one = cutTime(check);
var two = cutTime(tomorrow);
return one.getDate() === two.getDate();
};
return false;
}
Then in your Dynamic action 'When' condition, use a javascript expression with this code:
isTomorrow(this.triggeringElement)
Then the corresponding True Actions will only fire when the date is set to tomorrow.

jfxtras - CalendarPicker getDisplayedCalendar in EventFilter wrong

I have a CalendarPicker with an EventFilter. In the EventFilter I want the displayedCalendar with CalendarPicker.getDisplayedCalendar(), but I get the wrong date. It is the last date before CalendarPicker update the displayedCalendar.It seems that my EventFilter is executed before the standard events of the CalendarPicker.And I cannot use an EventHandler because the event is consumed by CalendarPicker.For example:- I see March 2015 in CalendarPicker.- change the month to April 2015- in my CalendarPiker.addEventFilter() I get with CalendarPicker.getDisplayedCalendar() "2015-03-01"- the CalendarPicker shows April 2015
How can I execute the standard Events before my EventFilter?Here is some code:
calendarpicker.addEventFilter(MouseEvent.MOUSE_CLICKED, new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent event) {
if (event.getButton().equals(MouseButton.PRIMARY)) {
Calendar cal = calendarpicker.getCalendar();
if (cal != null) {
selectedDate = cal.getTime();
log.debug(String.format("(selectedDate): %s" , selectedDate));
log.debug(String.format("(displayed): %s" , calendarpicker.getDisplayedCalendar().getTime()));
}
}
}
});
If I pick a date in the calendarpicker, everything is o.k.
The selectedDate is the picked date and displayed calendar is the 1th day of the displayed month.
If I use the spinner to change the month or the year, the selectedDate do not change (I think this is correct because I do not select one date), but the displayed date is the 1th date of the month before I changed the month (e.g. change from april to march => 01.04.2015 instead of 01.03.2015).
I understand what you want. However, events are fired in some order, and there is no rule mandating what order that should be. In this case there is nothing mandating that the mouse clicked event must be fired after any properties have changed.
Are you not listening for the wrong event? If you would register a listener on the displayedCalendarProperty() you would be informed when the displayed date changes, no matter what triggered it (a mouse click, keyboard navigation -ListSpinner supports that-, or programatically).

Kendo Datepicker shows wrong format when value is set past max date

I have a pair of Kendo Datepicker fields on a page for Start Date and End Date. The Start Date defaults to today's date and the End Date defaults to today's date a year from now. The user is allowed to pick a date from the Kendo Datepicker calender or enter a date manually.
The Datepicker calendar popup on the End Date field has a 'max' option set so it won't show dates greater than one year from now, but a user can enter a later date manually. If they do so and click Submit on my form, the server-side validation will catch the problem and display the form again with an error.
I want to leave the date the user manually entered in the Datepicker field intact so they can see the source of the problem, but keep the 'max' option in the calendar. But when I set the Datepicker options with a 'max' and a 'value' that's after the max, it shows the value in the wrong format.
Here's how to replicate:
HTML:
<!-- Note future date in 'value' attribute. -->
<input id='dateField' style="width: 100%;" type="text" value="20160618">
JS:
var dateField = $("#dateField");
// The DatePicker's value comes from the dateField's 'value' attribute.
var value = moment(dateField.val(), 'YYYYMMDD').toDate(); // moment().toDate() gives a JavaScript Date object.
// Initialize the date picker options object with some common settings.
datePickerOptions = {
format: 'MM/dd/yyyy',
value: value,
}
// Set the max to be one year from now.
datePickerOptions.max = new Date(moment(new Date()).add('years', 1).toDate());
// Initialize the DatePicker.
dateField.kendoDatePicker(datePickerOptions);
// Here's a workaround I found... After initializing the picker, manually set the value back to the correctly formatted string.
//dateField.val(moment(value).format('MM/DD/YYYY'));
jsFiddle with the above code.
Set the 'value' attribute of the input tag to be a date after the max date and the date will display like this:
Fri Jun 19 2015 00:00:00 GMT-0700 (Pacific Standard Time)
instead of how it should be:
06/15/2015
Is this a Kendo bug or is it broken by design? Or am I goofing up somewhere?
Yeah, it looks like the control is working fine. The issue is that the control fails fast on testing for max, which means it doesn't apply some other options (eg. format). I'd vote for broken by design.
try this...
datePickerOptions = {
format: 'MM/dd/yyyy',
value: moment(value).format('MM/DD/YYYY'),
max: new Date(moment(new Date()).add('years', 1).toDate())
}

Resources