Question

I am using bootstrap-daterangepicker in a form. The way I am currently grabbing the value of this selection works but the way I am getting the values doesn’t seem like a good way.

It seems bad to use the Session to hold the field selections and then unset them when i am done. I just want to be sure that I am not missing something.

I could get the value from the input field but I would have to parse the string to pull the dates out. Doping this could be a maintenance headache because I would need to change the parsing if I change the daterangepicker date formats.

The form field:

    <input type="text" name="carpool_eventDates" id="carpool_eventDates" />

JS to activate the component:

    Template.add_event.rendered = function () {
      // initialize add event modal;
      $('#addEvent')
       .modal();
      // initialize the date range picker
      $('input[name="carpool_eventDates"]').daterangepicker(
        // default date range options
        {ranges: {'Last 5 Days': [Date.today().add({ days: -4 }), 'today'],
              'Next 5 Days': ['today', Date.today().add({ days: 4 })]}
        },
        // grab the selection
        function(start, end) {
          Session.set("showAddEventDialogue_dateRangeStart",start);
          Session.set("showAddEventDialogue_dateRangeEnd",end);
        });
      };

JS save button click handler:

    Template.add_event.events({
        'click button.save-addEventDialogue': function(e, tmpl) {

          // Get the date range selection from the session
          var start = Session.get("showAddEventDialogue_dateRangeStart");
          var end = Session.get("showAddEventDialogue_dateRangeEnd");

          // Do something with the dates

          // Clear the dates from the session now that we are done with them
          Session.set("showAddEventDialogue_dateRangeStart","");
          Session.set("showAddEventDialogue_dateRangeEnd","");

          // Close the dialogue
          Session.set("showAddEventDialogue", false);
        }             
      });

Is this a good way to do this? Or is there a better way?

Thanks.

Answer 1

You could use jQuery’s .data() to store the daterangepicker data on the original <input> element, rather than in Session. So you could rewrite your “grab the selection” code thus:

// grab the selection
function(start, end) {
  $('input[name="carpool_eventDates"]')
    .data("showAddEventDialogue_dateRangeStart", start)
    .data("showAddEventDialogue_dateRangeEnd", end);
});

Then you retrieve the data from the element, rather than from Session:

// Get the date range selection from the element
var start = $('input[name="carpool_eventDates"]').data("showAddEventDialogue_dateRangeStart");
var end = $('input[name="carpool_eventDates"]').data("showAddEventDialogue_dateRangeEnd");

And assuming the <input> is discarded when the modal is closed and template destroyed, you have no Session or other variables to clean up.