How to get form values for custom component (bootstrap-daterangepicker)?
I am using bootstrap-daterangepicker on 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 looks like using a session to store the selected fields and then disable them when I'm done. I just want to be sure that something is missing.
I could get the value from the input field, but I would have to parse the string to output the dates. Dope this can be a maintenance headache because I will need to change the parsing if I change the date formats of the daterangepicker.
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 click clicker:
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 it? Or is there a better way?
Thank.
source to share
You can use jQuery . data () to store the daterangepicker data in the original element <input>
, not in the session. Thus, you can rewrite your "grab selection" code like this:
// grab the selection
function(start, end) {
$('input[name="carpool_eventDates"]')
.data("showAddEventDialogue_dateRangeStart", start)
.data("showAddEventDialogue_dateRangeEnd", end);
});
Then you fetch data from that element, not from the 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 it's <input>
discarded when the modal is closed and destroyed by the template, you don't have a session or other variables to clean up.
source to share