create a date picker on a custom field sugarcrm 7

So I have a custom dashlet with a custom field and that custom field I would like to have the date picker show when I click on the field and when I pick a date the date is populating in that field.  It appears sugarcrm already has that setup in the system but using it appears a little tricky. I got as far as the code below but then this.view is undefined.  Everything else in my dashlet works except for setting up the datepicker on a custom field.  How do I go about doing that?  Help would be appreciated, thanks!
var $field = this.$('input[name=dashlet_pipeline_start_date]');
  $field.datepicker({     timeFormat: this.getUserTimeFormat(),     scrollDefaultNow: true,     step: 15,     className: 'prevent-mousedown',     appendTo: this.view.$el  });
  • Why not indicate that the field is a "date" field and this should be done for you if your .hbs properly loads the SugarFields
  • So I figured out you can simply use the datepicker with no arguments.

    That's fine but the calendar still does not show up.  In fact I click in the field, the cursor stays in the field and I can't blur from the field and the actual date picker module does not show up.  No error is given.

    I'm doing this now:

    this.$('#id_of_input').datepicker(); 

    Within the _renderHtml function.  I don't know why it's now showing up.

    Here's the hbs template:

    <div class="dashlet-options">
    <div class="row-fluid">
          <div class="span4" id="start-date-div">
             <input type="text"
                id="dashlet_pipeline_start_date"
                name="dashlet_pipeline_start_date"
                placeholder="Start Date"
                rel="datepicker">
          </div>
          <div class="span4">
             <input type="text" name="dashlet_pipeline_end_date" placeholder="End Date">
          </div>
          <div class="span4">
             <input class="btn" type="button" value="Refresh" name="dashlet_pipeline_refresh">
          </div>
       </div>
    </div>
  • Just IGNORE me.  Simply setting type="date", I'm using HTML5 technology to populate the date and I was calling a [0].focus() function on the element while datepicker was selected, that's why the cursor was stuck.  :-/  Man.  Well at least it's fixed, using HTML5 date picker works good for me in this case.  Thanks!