Kendo DatePicker Max date issue - datepicker

I have a two kendo DatePickers to select start and end date of a job. job consists of multiple tasks which contains its own completion date (tasks are listed in a grid with kendo DatePicker for each record to select the completion date)
I set max and min of each task when user sets the job start and end date. I use kendo to bind data with kendo (through kendo knockout).
problem is when user clears the end date of a job,I set the max date of task level DatePicker to (2099, 11.31), but when I click on the task level datepicker I cant navigate to next month at once. if i click on some other datepicker can navigate. this happens when I delete start or end date of the job level.

Well this question doesn't seem to be 'active' anymore but for reference, I managed to get around the problem by calling .enable() on the kendo control after setting the new value (I was using ko + ko-kendo but other than that it's exactly the same)
Fiddle: http://jsfiddle.net/AlexPaven/m5M46/2/
Code in fiddle:
var vm = {
val: ko.observable(new Date()),
mx: ko.observable(new Date())
};
ko.applyBindings(vm);
setTimeout(function() {
vm.mx(new Date(2099, 11, 31));
var d = $('#a').data('kendoDatePicker');
d.enable(); // commenting this exhibits the problem - max constraint isn't updated visually
}, 3000);
I'm reasonably sure this has no side effect; if you want to preserve the enabled state I'm sure you can check the state and call enable+disable or disable+enable.
Jeez, this was annoying.
EDIT: wrong, I was fooled by the behavior which is a little more involved. You only get the bug if you open the datepicker each time you set a new maximum; the first time the change is acknowledged but subsequent times it's not. I'll spend a few more minutes with this I suppose...

Related

Auto select an option from a dropdown after a certain date

I'm creating a lost&found log for work, I have a dropdown list with options like "Collected", "Sent to guest", "Donated" etc.
I'd like to have the sheet automatically select 'Donated' after a certain date (maybe after 1 month) IF an option hasn't already been selected.
E.G. If somebody inputs a found pair of gloves on Nov 2nd, The empty dropdown will automatically change to 'Donated' on Dec 2nd unless somebody already selected another option (E.G. 'Collected').
You can accomplish this by either making use of Apps Script to check the conditions and make the corresponding changes or by directly implementing Sheets functions.
Sheets Functions
You can achieve the desired outcome by putting this formula on each status cell:
=IF(TODAY()-D4>30,"Donated","")
It will work as intended, the cell will not display anything until there are 30 days between the TODAY() date and the date provided in the D4 cell. If there are, the cell will display Donated. If another option from the drop-down is selected, that will erase the formula and only the new value will be displayed.
However, this method is more of a quick hack than an actual robust solution, as several things can go wrong. For instance, if an option from the drop-down is chosen by accident and then it is left blank again, the method will not work anymore for that line as the formula will have been permanently erased.
You can read about how TODAY() works here.
Apps Script (recommended)
The following script will check that, for every row in the sheet, both the status cell is blank and that subtracting the DATE FOUND is more than 30 days (unfortunately that has to be done in milliseconds).
function myFunction() {
var spreadSheet = SpreadsheetApp.getActiveSpreadsheet();
var sheet = spreadSheet.getSheetByName("Sheet1");
sheet.getLastRow()
var range = sheet.getRange(4,1,sheet.getLastRow(), 7);
//SELECT A RANGE WITH THE 7TH FIRST COLUMNS AND AS MANY ROWS AS NECESSARY
//(WE ARE INTERESTED IN DATA STARTING FROM ROW 4TH)
var values = range.getValues();
var millisecondsIn30Days = 30 * 24 * 60 * 60 * 1000;
for(var row = 0; row<values.length; row++){
var status = values[row][6]; //STATUS IS THE 6TH ELEMENT IN THE ROW ARRAY (COLUMN G)
if(status == "" && (new Date() - values[row][3]) > millisecondsIn30Days){
//MORE THAN 30 DAYS AFTER FOUND
sheet.getRange(row+4,7).setValue("DONATED");
}
}
}
Of course, that script can be run manually or the job can be automated with an installable trigger that runs, for example, every month. You can read more about how to set up such triggers here.

Google Sheets: Show values on a tab depending on date

We have a restaurant and want to show the Menu on a screen with google sheets.
I am using 2 tabs in Google sheets, The main (number 1) with the menu showing to the visitors, the second tab (number 2) has all the dates from today until coming 6 weeks like:
Column A
Column B
Column C
Column D
21 June
Appetizer this day
Main dish this day
Desert today
22 June
Appetizer this day
Main dish this day
Desert today
23 June
Appetizer this day
Main dish this day
Desert today
etc. etc.
Now what we want is that the 3 menu items are copied to the main tab on the day of today, so if it is 22 June, the corresponding appetizer, main dish and desert are copied to the main tab.
Is that possible?
This can be achieved with Google Apps Script. You can have a JavaScript code snippet that does this for you.
Open the required spreadsheet. Go to the Tools menu and click Script Editor. This will open up the script editor window with an empty function, code will have to be written inside this function, give it a name, I'm using updateFood():
function updateFood() {
// Fetch all the sheets/tabs of the current spreadhsheet
let sheets = SpreadsheetApp.getActiveSpreadsheet().getSheets();
// Select the second sheet/tab using [1], first tab will be [0]
// Fetching the second sheet because that is where the data about the upcoming dates are present
let listSheet = sheets[1];
// Get all the data in the sheet
let data = listSheet.getDataRange().getValues();
// Iterate over all data in the sheet
for(i = 0; i < data.length; i++) {
// Get the date of the current row and create a date object
rowDate = new Date(data[i][0]);
// Get today's date
today = new Date();
// Check if the row date is equal to today's date
if(rowDate.setHours(0,0,0,0) == today.setHours(0,0,0,0)) {
// If the code reaches here, this row has the date same as today
// Get the first tab/sheet and then I'm selecting the cells A1, B1 and C1
// Modify the range as per which cells you want the dish names to be in
let range = sheets[0].getRange("A1:C1");
// Set the values of the selected three cells as the value of the second, third and fourth column in the current row of the 2nd tab which are Appetizer, Main dish and Dessert for that date respectively
range.setValues([[data[i][1], data[i][2], data[i][3]]])
}
}
}
And that's all the code you need! Save it and then you can try clicking on run code and then checking the first tab to see the values updated. However, when you click run for the first time, Google will ask you to grant permissions to the script to access your sheet. Click Review Permissions and then click on your account. Then click Advanced and then click:
.
But you will have to run this code every day. This can be achieved using a time-driven trigger.
In the same script editor window, look at the triggers button on the left:
Click on the + Add Trigger on the bottom right of the screen.
And select the values as follows (change the time as required):
That's all you need. Make sure that in the second tab, create dates in the date column with the Excel DATE(YEAR, MONTH, DAY) function rather than manually typing in the dates.

How to dynamically create and destroy datepicker in materializecss

I want to initialize and destroy datepicker in materializecss. I know how to initialize but unable to find it how to destroy.
I have one textbox and one dropdown.based on dropdown, the textbox type is changed. so when user select dob, I initialized textbox with materializecss datepicker but after that I am not able to change textbox back to its normal mode, I mean where user can insert text or number.
I am using below code to initialize -
$('#txtDatePicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 100 // Creates a dropdown of 15 years to control year
});
A datepicker usually has 3 buttons, however if these buttons are initialized without values ie. today: "" they will not be shown.
$('.datepicker').pickadate({
today: '',
clear: 'Clear selection',
close: 'Cancel'
});
For more information see: http://amsul.ca/pickadate.js/date/#buttons
From your comment
so lets say you have initialized date picker and now I want to destroy it, so that simple text can be written into it.
I think that if you only need a simple text can be written into it. Just add an option like this
$('.datepicker').pickadate({
editable: true
});

How to change months with Datepicker

Is there any way to change the date (value returned by getDate) pressing the change month arrows without using setDate?
It's not much clear your request..try to specify better; anyway see the documentation about datepicker https://jqueryui.com/datepicker/#dropdown-month-year

Get Value on a Window with GridPanel using ExtJS

I have a situation here: I have a form field with trigger xtype, what I want to happen on my trigger function is to open a window with a list or grid of data in it. I want to get the value of those data and assign it as the value of my form field with trigger. Can anyone help me solve this problem. Thank you very much.
You have multiple solutions for this.
You can make use Saki's simple message bus to do the communication between extjs components.
You can create an custom event for your trigger field. When user selects a record in your window, fire the event with the selected record.
Inside your onTriggerClick :
Display your window with grid / view for user selection
Inside your Window (on some submit button):
onSubmitClick: function(){
// Get the selected record & fire event
var selected = grid.getSelectionModel().getSelected();
triggerFieldObject.fireEvent('recordSelect',selected);
}
Inside your event processing (Will be on TriggerField):
onRecordSelect: function(record) {
// Now you have access to the selected record.. process it,
// Set the trigger field value etc
this.setValue('Your Value for Trigger Field');
}
Note: This is a skeleton code and not a complete solution. You will need to add your code according to your requirements.