You may remember I was using a not very fun looking text field for date/time input. This is pretty much a users worst nightmare, but at the time I was focused on getting the bulk of the app developed and I swore I would return to this later with a better solution. This is pretty sad/funny:
I went in search of better UI component for my users, because they deserve better, and typing a proper date is almost impossible. I envisioned a jQuery dropdown calendar after doing some research on better methods, Bootstrap 3 Date/Time Picker turned out to be the solution I chose. I think it works great and looks really nice. Here are some screen shots:
I installed the datepicker using bower. Bower will find all the necessary packages and dependencies needed and put them in bower_components folder with the bootstrap stuff.
bower install eonasdan-bootstrap-datetimepicker#latest --save
I made sure I had necessary head entries for script and styles needed to use datepicker in the template. Some of these were already present from using bootstrap.
We can even do some cool tricks here. On my tweet_edit template, I made it such that upon editing a tweet, the time to tweet is shown as well, and the user can observe it and decide on a different time if they so choose. This involves adding a default date to the function, mine being the original time to tweet held by the time_to_send variable:
Another important feature that I thought should be implemented was form validation. We need to make sure that even if the user makes a mistake on input, we don’t have anything unusual going into our database that could cause trouble down the line. Like a blank tweet for instance. I used the jQuery Validation plugin for this. I downloaded and installed the plugin, just like bootstrap and datepicker, with Bower:
bower install jquery-validation
And then added an additional script to the top of my template in the head:
Now that that the plugin was ready to use, I went looking through my templates for possible scenarios that could trip the user up. For instance, if they tried to create “empty” tweet with no text. I wanted to prevent this blank tweet from ever entering the database.
jQuery validation made it super easy to put safeguards in place. Adding “required” to the form field will cause an alert to come up and stop things from going any further. Also notice as well that I put in maxlength=”140″, you may notice that this is the max number of characters for a tweet on Twitter. The user will not be permitted to enter any more characters once they have reached 140. You can also write your own rules and messages to use with jQuery plugin, but I didn’t see the need to go there just yet.
<h2>Create a Tweet</h2> <textarea class="form-control" id="tweettext" name="tweettext" maxlength="140" required></textarea>
jQuery form validation is seriously easy to use, and they have some great docs and a nice instructional video on their site. You should go check it out, as well as their other methods.