Can someone help me, I want to add time and date to an app without the user having to insert this.
I have figured out how to fix the Date, but not the time.
Can anyone help me ?
Loading a text widget automatically on page refresh
Well, I'm kind of new to appmaker so this isn't necessarily the easiest way to to it. But this works. I added a new text widget named todaysDate to the screen as shown below:
Then I went into clientside script and added this code in ready function.
$(function(){
google.script.run
.withSuccessHandler(upDateToDaysDate)
.getTodaysDate();//this code
google.script.run
.withSuccessHandler(upDateLastRecipient)
.getLastEmailRecipient();//this was already there
});
And I added this function above it because it appears that functions have to be defined before they are used.
function upDateToDaysDate(s){
app.pages.Email.descendants.TodaysDate.value=s;
}
And then in server script I added this function:
function getTodaysDate(){
return Utilities.formatDate(new Date(),Session.getScriptTimeZone(),"E MMM d, yyyy");//for time just add HH:mm:ss to the format parameter
}
When you load the page or preview, the the ready function will call the server script and it will return todays date and upDateTodaysDate() will load it into the todaysDate text widget.
Related
I have a function to add a dynamic due date to the Countdown Timer widget from Elementor (Pro). With ACF Pro I created a options page with a date and time picker to change the date, but it doesn't work and I cannot see why. I also tried other codes from this page, but they also don't work. I get a timer with 0 days, hours, minutes and seconds or with the date entered via the Elementor edit page.
Here's the code:
add_action( 'elementor/frontend/widget/before_render', function(\Elementor\Element_Base $element){
if ("countdown" != $element->get_name()) return;
$countdown_date = get_post_meta(get_the_id(), "my-date-field",true);
$element->set_settings("due_date",date("Y-m-d H:i",strtotime($countdown_date))) ;
});
Thanks for any help.
Please make sure that you named the Field Name is "my-date-field" and the Field Type is "Date Time Picker"(look at below image for more detail).
If this is not fix your issue then:
Do you get any error message on WP Dashboard or Debug console?
Update:
After take a look on your backend and make some debug, i found that you set your custom field is in option page, while this piece of code use to get the value of the custom field base on the post's ID.
To get this value, you will need a different code like this:
add_action( 'elementor/frontend/widget/before_render', function(\Elementor\Element_Base $element){
if ("countdown" != $element->get_name()) return;
$countdown_date = get_field('my-date-field', 'option', false);
$element->set_settings("due_date",date("Y-m-d H:i",strtotime($countdown_date)));
});
Also, please make sure that you set the correct return format to "y-m-d H:i:s" for the code working as below image:
I'm using the standard FullCalendar Events(as a json feed) and have everything working fine...almost.
var calendar = new Calendar(calendarEl, {
events: '/myfeed.php'
});
My initial view is a 'dayGridMonth' so the FC default behavior is to only retrieve the events for that month by appending the startParm/endParam querystring.
This is not what I want.
On the backend of this request, I'm currently sending the entire calendar feed (ignoring the start/end params) so I don't have to keep hitting my AJAX '/myfeed.php' page every time somebody clicks on "Next" to view the next month.
However, I can't get FullCalendar to know that it already has the whole json feed and not to bother getting anything else - just show the next month from the data we have. I've played around with lazyFetching but that seems to force that it goes to the AJAX call every time.
Any ideas on how I do this?
Thx!
I am trying to set visibleRange manually, I have start and end in props, and when component loading in React I am trying to
calendarRef.current.getApi().view.calendar.setOption('visibleRange', {
start: formatDate(new Date(from)),
end: formatDate(new Date(to)),
});
Also was trying to set via props
visibleRange={
{
start: format(new Date(from), 'yyyy-MM-dd'),
end: format(new Date(to), 'yyyy-MM-dd'),
}
}
The problem is that when I click prev/next I send Inertia.visit() to the server and receive events list and dates from/to but the component is fully re-rendered because of SSR (Inertia) and Callendar shows then initial dates because i have needed dates i want to set it to it but not success.
But nothing works
It still shows the range of the current week.
Can someone help me with how I can do it? Thanks.
This works, i still don't understand what visibleRange do, but to set manually date you have to use 'gotoDate()'
calendarRef.current.getApi().view.calendar.gotoDate(formatDate(new Date(from)));
New appmaker user here.
I'm trying to port the work permits approval "app" I made with G Suite form+spreadsheet+GAS; users should enter the day, the start and end time of the permit.
I can see from the Forum Sample that the Date field type is a DateTime field type, so I can use it in my model.
The problem is I cannot find the time picker in the widgets, and the date box has no option to also enter the time.
Am I missing something?
Time Pickers for App Maker
I read your question and thought I'd try to role one of my own and this is what I came up with. I put all of the buttons on a pageFragment and call it with app.showDialog(app.pageFragments.timePicker2);
I only use clientside script.
function updateOutput(){
var h=app.pageFragments.TimePicker2.properties.hour||'00';
var m=app.pageFragments.TimePicker2.properties.minute||'00';
var s=app.pageFragments.TimePicker2.properties.second||'00';
var t=h + ':' + m + ':' + s;
app.pageFragments.TimePicker2.descendants.timeLBL.text=t;
return t;
}
function updateHour(v){
app.pageFragments.TimePicker2.properties.hour=v;
updateOutput();
}
function updateMinute(v){
app.pageFragments.TimePicker2.properties.minute=v;
updateOutput();
}
function updateSecond(v){
app.pageFragments.TimePicker2.properties.second=v;
updateOutput();
}
Here's what my time picker looks like:
Yes. Adding all of the buttons is a nuisance but there are a few features about AppMaker that make it more tolerable.
First you can assign the TimePicker form properties which I use as global properties. I had three hour,minute and second.
Then after you add all of the hour buttons you can grab all of them at one time by clicking each one while holding down control on a windows machine and click on the onClick event and pick custom action and type this in updateHour(widget.text); the code completion won't give you text as an option but type it any way.
I just figured out how to grab the buttons all a one time by pushing shift and selecting with the mouse
Do the same thing with the minute and second buttons using updateMinute(widget.text) and updateSecond(widget.text); This saves you a lot of time typing all of the functions into each widget control panel. Also you don't have to bother giving all of the buttons special names like I did.
But you might like to format them with the following css.
And again you can grab all of the buttons at one time and change the following setting:
That way you can style all of the buttons at one time.
My save button just copies the final string into a label on the main panel.
app.pages.Testing.descendants.timeLBL2.text=app.pageFragments.TimePicker2.descendants.timeLBL.text;
app.closeDialog();
You will probably want to do something more elegant.
Here's a demo: in preview mode. Sorry about the 24 hour clock. I always use this for my own stuff because it's so much easier and I like it. You'll probably want AM & PM. I'll probably go back and do that too.
For an AM/PM Picker I used these functions:
function updateOutputAP(){
var h=app.pageFragments.TimePicker3.properties.hour||'00';
var m=app.pageFragments.TimePicker3.properties.minute||'00';
var s=app.pageFragments.TimePicker3.properties.second||'00';
var ap=app.pageFragments.TimePicker3.properties.ap||' ';
var t=h + ':' + m + ':' + s + ' ' + ap;
app.pageFragments.TimePicker3.descendants.timeLBL.text=t;
return t;
}
function updateHourPM(v){
app.pageFragments.TimePicker3.properties.hour=v;
app.pageFragments.TimePicker3.properties.ap='PM';
updateOutputAP();
}
function updateHourAM(v){
app.pageFragments.TimePicker3.properties.hour=v;
app.pageFragments.TimePicker3.properties.ap='AM';
updateOutputAP();
}
function updateMinuteAP(v){
app.pageFragments.TimePicker3.properties.minute=v;
updateOutputAP();
}
function updateSecondAP(v){
app.pageFragments.TimePicker3.properties.second=v;
updateOutputAP();
}
And this is what my picker looks like:
Now that I know how to pick the components easily with the mouse it was a break to make this change.
Three AppMaker Time Pickers:
At this time App Maker doesn't provide out of the box Time or Date/Time picker widgets, it means that you need to implement one by yourself. There are at least two ways to accomplish this task:
App Maker way
Wait and hope when App Maker will introduce Time or Date/Time picker widget or use existing App Maker widgets to emulate Time Picker. Calendar Sample can be a good starting point:
Hack into DOM/JS
If you have no concerns about cross-browser compatibility and you are OK to get you hands dirty with DOM manipulation by javascript, creating events listeners and other cool stuff, then you can play with HTML widget and native date/time or time input, or even some third party library.
One simple option would be to simply use a textbox and set the validation in the model field.
You can update your Date object on save or just use as is depending on your application. You get the benefit of auto validation errors in the UI to guide your user and it takes only seconds to set up.
Regex:
\b((1[0-2]|0?[1-9]):([0-5][0-9]) ([AaPp][Mm]))
When i click on button need to display message instead of loading image for long running process.Need to show what is happening in my code behind.Like below stages
Collecting information from database..........
Generating PDF document..............
Sending e-Mail........
Done.
Note:No need to set default time for stages it need to take message from code behind and display.
Please send me any related links.
Thanks in advance.
Check out Easy incremental status updates for long requests
You could easily add a TextBox control and change the Text property by your code behind, in function of what you do.
For example:
private void Loading()
{
txtLoading.Text = "stage1.Collecting information from database";
// PUT CODE TO COLLECT INFORMATION FROM DATABASE HERE
txtLoading.Text += "\r\nstage2.Generating PDF document";
// PUT CODE TO GENERATE PDF DOCUMENT HERE
// ETC ETC
}
Hope it helps :)