Can we update values in date picker field based on value in another date picker field in a Cardservice for Google Calendar Add-on?

Question

I wish to populate the value of booking end date based on the value entered by user in the booking start date.

Currently, I am using below codes -

/*-------------------------------------------------------------------------------
  Input field 1 : Booking Start Date
-------------------------------------------------------------------------------*/
  var bookStartDateTimePicker = CardService.newDatePicker()
                          .setTitle("Booking Start Date")
                          .setFieldName("booking_start_date")
                          .setValueInMsSinceEpoch(tomorrow.getTime())
                          .setOnChangeAction(CardService.newAction().setFunctionName("dateStartCheck"));

/*-------------------------------------------------------------------------------
  Input field 2 : Booking End Date
-------------------------------------------------------------------------------*/
  var bookEndDateTimePicker = CardService.newDatePicker()
                          .setTitle("Booking End Date")
                          .setFieldName("booking_end_date")
                          .setValueInMsSinceEpoch(tomorrow.getTime())
                          .setOnChangeAction(CardService.newAction().setFunctionName("dateEndCheck")); 

Answer 1

You need to update the card within your setOnChangeAction function

• You can pass to the action handler function the event object that will contain information about the date selection event - among others information about the newly selected date. This is probably useful for you if you want to update the value in the second date picker field based on the user's input in the first one.
• If you log the event object within your action handler function, you will see the nested structure as following (this is for Gmail, slightly different for Calendar):

e: {"gmail":{...},"commonEventObject":{"hostApp":"GMAIL","formInputs":{"booking_start_date":{"":{"dateInput":{"msSinceEpoch":1652745600000}}},"booking_end_date":{"":{"dateInput":{"msSinceEpoch":1652486400000}}}},"platform":"WEB"},"formInputs":{"booking_start_date":[{"msSinceEpoch":1652745600000}],"booking_end_date":[{"msSinceEpoch":1652486400000}]},"parameters":{}}

Sample for updating the end date based on user's input for the start date:

function buildAddOn() {
 
  /*-------------------------------------------------------------------------------
  Input field 1 : Booking Start Date
  -------------------------------------------------------------------------------*/
  var bookStartDateTimePicker = CardService.newDatePicker()
  .setTitle("Booking Start Date")
  .setFieldName("booking_start_date")
  .setValueInMsSinceEpoch(new Date().getTime())
  .setOnChangeAction(CardService.newAction().setFunctionName("dateStartCheck"));
  
  /*-------------------------------------------------------------------------------
  Input field 2 : Booking End Date
  -------------------------------------------------------------------------------*/
  var bookEndDateTimePicker = CardService.newDatePicker()
  .setTitle("Booking End Date")
  .setFieldName("booking_end_date")
  .setValueInMsSinceEpoch(new Date().getTime())
  .setOnChangeAction(CardService.newAction().setFunctionName("dateEndCheck")); 
  
  var card = CardService
  .newCardBuilder()
  .addSection(CardService.newCardSection()
              .addWidget(bookStartDateTimePicker)
              .addWidget(bookEndDateTimePicker)
              )
  .build();
  
  return card;
}

function dateStartCheck(e){
  console.log("Start date selected")
  console.log("e: " + JSON.stringify(e));
  var newStartDate = e.commonEventObject.formInputs.booking_start_date[""].dateInput.msSinceEpoch;
  console.log("newStartDate: " + newStartDate);
  var newEndDate = newStartDate + + 1000*60*60*24;

  
  
  /*-------------------------------------------------------------------------------
  Input field 1 : Booking Start Date
  -------------------------------------------------------------------------------*/
  var bookStartDateTimePicker = CardService.newDatePicker()
  .setTitle("Booking Start Date")
  .setFieldName("booking_start_date")
  .setValueInMsSinceEpoch(newStartDate)
  .setOnChangeAction(CardService.newAction().setFunctionName("dateStartCheck"));
  
  /*-------------------------------------------------------------------------------
  Input field 2 : Booking End Date
  -------------------------------------------------------------------------------*/
  var bookEndDateTimePicker = CardService.newDatePicker()
  .setTitle("Booking End Date")
  .setFieldName("booking_end_date")
  .setValueInMsSinceEpoch(newEndDate)
  .setOnChangeAction(CardService.newAction().setFunctionName("dateEndCheck")); 
  
  var card = CardService
  .newCardBuilder()
  .addSection(CardService.newCardSection()
              .addWidget(bookStartDateTimePicker)
              .addWidget(bookEndDateTimePicker)
             )
  .build();
  return CardService.newNavigation().updateCard(card);
}

function dateEndCheck(){
  // to do
}