About a possible Datepicker sample app

Hi David, I would like to add a date picker widget to the app so that the user can pick from a small dropdown calendar. It looks as if bootstrap is the way to go? I see that you had developed a working example a few years ago in this forum but when I downloaded it, it threw an error. Any chance you could take a look at it and see if it is simple to fix and provide a download link? Thanks! Pete

Hello Peter,

Please, upgrade your AB copy and take a look at the new DateInput2 app sample, which show how we can use the DatePicker control from the ui-bootstrap 4 framework.

---

You are the best! Is it fairly straight forward to get it to allow for time selection as well? Many thanks, Pete

Hello Peter,

Certainly a Timer picker exists in the UI boostrap framework: you can try to implement it, and, post here if you have any question or problem. However, a time picker can be as simple to use a couple of Input or Select controls, to allows the user to choose the hour and minute.

P.S. Take also a look at the Date Input control. Can be a good replacement for the Date picker too.

---

Thanks David, I was testing in Chrome and didn't realize that the dateinput showed a picker as this does not seem to work in Chrome but does work in the device so I will just work with this control.

Hello Peter,

Certainly, the DateInput2 appear to have a problem with Chrome: it's related with the icon used in the button that shown the date picker, that is, if you replace the icon by text, or add some text aside the icon, you can see that the Date picker works as expected also in Chrome.

On the other hand, I think the Date Input can be considered, since don't require anything else than place a Date Input in the view, and, works well (in my opinion) in all the modern browsers, and, perfectly well (again in my opinion) in platforms like Android and iOS.

---

Hi, Everything is working well. I am storing the data in pouchdb and displaying notes in a report. When selecting a note to edit it, I have the following code on display of the edit view. ArrayLength "[NotesGrid.Data]" "[DataLen]" // To Loop in the right way Dec "[DataLen]" // Iterate over all records in Report Data Loop "0" "[DataLen]" "[I]" // Get the iterated record item ArrayGetItem "[NotesGrid.Data]" "[I]" "[Item]" // And the item/object ID property ObjectGetProp "[Item]" "_id" "[RecordID]" // If this is the record we want to edit... If "[RecordID]" "==" "[CurrentRecordID]" SetVar "note_id" "[Item._id]" "String" SetVar "note_rev" "[Item._rev]" "String" // Get the record's data to be show in the edit inputs ObjectGetProp "[Item]" "title" "[title_edit.Value]" ObjectGetProp "[Item]" "note" "[note_edit.Value]" ObjectGetProp "[Item]" "reminder" "[RDate]" NewDate "[RDate]" "" "[Date]" DateToJSDate "[Date]" "[ReminderDate.Value]" Break EndIf EndIf The issue that I am having is that if the [RDate] variable is defined then it properly sets the [ReminderDate.Value] to the correct date from the database. However, if the reminder is not populated and the value of [RDate] is 'null', it sets the [ReminderDate.Value] to today's date rather than leaving it empty. I am not pre-setting any value in the date input field so I am not sure why it is setting the current date or how to prevent it? Thanks, Pete

Hello Peter,

Trying something like the below:

SetVar "[DateInput1.Value]" "" "String"

Works more or less as expected (Firefox and Chrome place the input's template, Internet Explorer 11 leave the input empty)... so I am sorry, but maybe can't understand exactly your problem, Peter. For sure that I am missing something... :-(

---

Hi David,

I am circling back to this now and because I will be using date time pickers a lot in the app I would really like to have an integrated date time picker. It doesn't seem to me that the sample that you made (DateInput2) is adaptable for this purpose so I have gone looking for something similar that could be used. I have run across this bootstrap date/time picker.

I was wondering if you would be able to let me know whether it should work in AB and if so, what I might need to do to modify the DateInput2 sample to use this configuration instead?

Thanks!
Cheers,
Pete

Hello Peter,

There is no misteries in the usage of that library in our apps, except maybe that we no need to add the required jQuery and Moment libraries, since AB already includes these libraries in our apps. Please, upgrade or download the current release of AB: I added a "TimeDominus" app sample, in which you can one of the samples of the library working: I choose the "custom icons", since, apparently the library are not using the latest releases of Awesome Icons, but App Builder do it, so it's good that we can specify the icons to be used in the calendar/time picker.

Of course you can choose the date picker that you wanted (even don't use any date picker and just use inputs to get the year, month and day from the user)... but, I am not sure if can understand what you mean with this phrase: "It doesn't seem to me that the sample that you made (DateInput2) is adaptable for this purpose so I have gone looking for something similar that could be used."... So the "DateInput2" sample don't work for you? Or you simply prefer to use another one?

---

You are totally the man! Thank you very much, I can't believe how easy it is to implement stuff like this. Cheers, Pete

Hello Peter,

Yes; finally we are dealing with HTML, CSS and Javascript, and, certainly there are lot of stuff that we can use, commonly "as is". :-)

---

Quick question. How do I get the value of the selected date so that I can store it locally?

Hello Peter,

I did not read the Tempus Dominus documentation, so, maybe we can miss something... anyway, we are talking about an HTML input, so, we can get their value using a code like the below:

StartJS window.App.RootScope.UserInputDate = $('#datetimepicker1-input').val(); EndJS Alert "" "[UserInputDate]"

Note, however, that the above code requires an "id" attribute for the input: "datetimepicker1-input". If we wanted to leave the HTML code of the app sample like is, we can also refer to the input using the container ID, so the below code also works:

StartJS window.App.RootScope.UserInputDate = $('#datetimepicker1 input').val(); EndJS Alert "" "[UserInputDate]"

The different is small but must be clear: in the first case we use jQuery to select an element with the ID "datetimepicker1-input" (can be any other, of course); in the second case we use the ID of the input's container, so the jQuery selector must be "#datetimepicker1 input", that is, "an element with an input tag inside the specified element's ID".

Probably the first approach is better here, since we refer to a specific element's ID.

I hope this can help you in some manner.

---

Perfect! Thanks for everything, Pete

You're welcome! :-)

---

Hi David,

Sorry to be a pain but I have one last step before I move onto the next challenge and I have been struggling with it. When the view loads I need to populate the value of the datetime input field with a value stored in local storage.

In the TempusDominus example, I can see that the html field is populated by

<div class="input-group date" id="datetimepicker1" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" data-bs-target=" <div class="input-group date" id="datetimepicker1" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" data-bs-target="#datetimepicker1"> <div class="input-group-append" data-bs-target="#datetimepicker1" data-bs-toggle="datetimepicker"> <div class="input-group-text"><i class="fas fa-calendar"></i></div> </div> </div>"> <div class="input-group-append" data-bs-target="#datetimepicker1" data-bs-toggle="datetimepicker"> <div class="input-group-text"><i class="fas fa-calendar"></i></div> </div></div>

Logically, I need to define the value of #datetimepicker1? Would you mind pointing me in the right direction?

Thanks! Pete

Hello Peter,

I am not sure, but, apparenly you copy too much HTML markp above? That is, the TempusDominus sample HTML markup (inside HTML control) is the below one:

<div class="input-group date" id="datetimepicker1" data-target-input="nearest"> <input id="datetimepicker1-input" id="datetimepicker1-input" type="text" class="form-control datetimepicker-input" data-bs-target="#datetimepicker1"> <div class="input-group-append" data-bs-target="#datetimepicker1" data-bs-toggle="datetimepicker"> <div class="input-group-text"><i class="fas fa-calendar"></i></div> </div> </div>

Anyway... probably the above is not important, so go to the point.

Apparently we can't set the input's value in a more or less common way, but one of the possible ways to establish the value of the input / datetime picker is the below one:

// Prepare a date variable to set into the datetime picker NewDate "[App.Timestamp]" "" "[CurrentDate]" StartJS // Initialize the datetime picker $('#datetimepicker1').datetimepicker({ icons: { time: "far fa-clock", date: "fas fa-calendar", up: "fas fa-arrow-up", down: "fas fa-arrow-down" }}); // Set the value of the datetime picker $('#datetimepicker1').datetimepicker('date', window.App.RootScope.CurrentDate); EndJS

The above code is the same than what you can see in the TempusDominus app sample, except for the creation of a Date variable at the begining, and how we finally set that variable to be the value of the input / datetime picker.

The Tempus Dominus library expect a "moment" (library) object to be used... fortunately the AB Dates variables are "moment" objects, so you can use it. Probably you must get the date from the local storage, then create a Date variable, and finally assign that variable like above.

---

Perfect, I have it working and can hopefully leave you alone for a bit. Thanks once again! Pete

Hello Peter,

No problem at all! I am happy to help when possible. :-)

---