List of 24 hour toggles. How does Wappler handle date manipulation?

JonL · August 22, 2019, 9:12pm

So I was trying to finish a feature in my main bubble app. It’s sort of a scheduling block.

I had to create 24 buttons that can toggle as selected or not and then save the toggles dates in the database.

The list of 24 toggles is created grabbing the actual time(resetting seconds and minutes to 0) and adding one hour to each toggle.

So if it’s 13:35 it will create a list of 24 date objects starting at 14:00:00 and finishing at 13:00:00( next day).

Date manipulation is complicated but in Bubble it’s even more. You can’t create the list without JS manipulation.

How would I replicate something like this in Wappler? I don’t need a detailed solution.

Just want to understand how Wappler manages dates, list of dates, timezones and adding/substracting time units.

George · August 22, 2019, 9:31pm

In Wappler date manipulation is very easy.
You just add a date component and with its value you can do date calculations with the supplied date formatters.

We also have a great date & time picker so you might not even need different buttons.

JonL · August 22, 2019, 9:51pm

Using buttons(actually divs with an onclick event) is just for cheering up the UI. Time picker doesn’t fit very well here as there is multiple selection and needs to be mobile friendly.

So a user would be able to click what times are good for him(it’s sort of a poll to choose dates) quickly with a tap.

The scheduler/time poll looks something like this.

It’s actually very similar to what doodle does.

So from 1 to 10 how difficult would it be with Wappler? I don’t expect everything to be a 1. Even less if it’s related with date manipulation.

mebeingken · August 23, 2019, 1:09am

Hey Jon,

This might get you started…not with the formatting, but with some logic to get the date/time for a list of buttons:

Copy this into a page:

<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>Untitled Document</title>
  <script src="dmxAppConnect/dmxAppConnect.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="dmxAppConnect/dmxFormatter/dmxFormatter.js" defer=""></script>
  </head>
  <body is="dmx-app" id="time">
    <dmx-array id="arr1" dmx-bind:items="[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]"></dmx-array>
    <dmx-datetime id="varCurrentTime" utc="true"></dmx-datetime>
    <div class="container">
      <div class="row" is="dmx-repeat" id="repeat1" dmx-bind:repeat="arr1.items">
        <div class="col-4 offset-4 pt-1 pb-1">
          <dmx-value id="varTime" dmx-bind:value="varCurrentTime.datetime.addHours($value).formatDate(&quot;MM-dd-yyyy HH:00:00&quot;)"></dmx-value>
          <button class="btn btn-info" dmx-text="varTime.value">Button</button>
        </div>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body></html>

It creates an array with numbers sequentially that are used to add hours to current time.

The row is a repeat children (ie. a repeating group) that has a simple column, with a variable and a button that get’s its value from the variable.

The variable uses the array to add hours:

varCurrentTime.datetime.addHours($value).formatDate("MM-dd-yyyy HH:00:00")

–Ken

JonL · August 23, 2019, 7:50am

Hey Ken!

Thank you a thousand times for putting this up. I completely missed the array object. not only you’ve helped me with this scenario but with so many I know now I can implement with thIs object.

Now I just need to figure out the UI although shouldn’t be an issue as BS has a toggle button bind.