Using a Datepicker and jQuery Validation with TikTokTweet

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:

Screen Shot 2015-03-30 at 7.02.30 PM

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:

Screen Shot 2015-03-30 at 7.02.46 PM

Screen Shot 2015-03-30 at 7.02.58 PM

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.

<head>
  <!-- ... -->
  <script type="text/javascript" src="/bower_components/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="/bower_components/moment/min/moment.min.js"></script>
  <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
</head>

Now in place of my old date input, get to use this. A little chunkier, but the javascript makes it a whole lot swankier.

<div class="container">
   <label>Time to tweet </label>
   <div class="row">
       <div class='col-sm-6'>
           <div class="form-group">
               <div class='input-group date' id='datetimepicker1'>

                   <input type='text' class="form-control" name="when_to_tweet" />
               <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
               </span>
               </div>
           </div>
       </div>
       <script type="text/javascript">
           $(function () {
               $('#datetimepicker1').datetimepicker();
           });
       </script>
   </div>
</div>

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:

<script type="text/javascript">
   $(function () {
       $('#datetimepicker1').datetimepicker({
           defaultDate: new Date('{{time_to_send}}')
       });
   });
</script>

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:

<script type="text/javascript" src="/static/bower_components/jquery-validation/dist/jquery.validate.js"></script>

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.

Screen Shot 2015-03-30 at 7.03.22 PM

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.

Advertisements

About Rebecca Mills

Biochemist by trade, transitioning to computer engineering.
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s