use HTML date picker in IBM watson conversation dialog to get date as input from user

问题

I am trying to use <input type="date" id="birthday" name="birthday"> to display a calendar to be selected by user on IBM dialog. So, when this calendar will ask for date in the chat bot and then after user selecting the date, it should store the selected date as variable or any context variable. How I have to implement it in IBM Watson chatbot. Thanks

回答1:

It really depends on how your front-end app is built to call IBM Watson API. Trying to be more generic, you would need to do:

First, you would need to add the html syntax into your answer/response node on Watson Conversation:

Please select your date: <br /> 
<input type="date" id="birthday" name="birthday">

And in your front-end code (probably index.html that contains your UI), you would need a function to identify what was selected, e.g:

document.getElementById("birthday").addEventListener("change", function() {
    let inputDate = this.value;
    let ifYouWantEntireDateFormat = new Date(inputDate);
    console.log(inputDate); // 2020-04-20
    console.log(ifYouWantEntireDateFormat); //e.g. Mon April 20 2020 00:00:00 etc
});

You could also use querySelector function. In addition, if no value is selected it will return "Invalid date"

With all that in mind, you also need to know that Watson API accepts the payload having the context variables on it, which is what you need. I would recommend checking the API docs first to understand more. But according to what I understood, your payload might be similar to:

const AssistantV2 = require('ibm-watson/assistant/v2');
const { IamAuthenticator } = require('ibm-watson/auth');

const assistant = new AssistantV2({
  version: '2020-04-01',
  authenticator: new IamAuthenticator({
    apikey: '{apikey}',
  }),
  url: '{url}',
});

assistant.message({
  assistantId: '{assistant_id}',
  sessionId: '{session_id}',
  input: {
    'message_type': 'text',
    'text': 'Hello',
    'options': {
      'return_context': true
    }
  },
  context: {
    'global': {
      'myDatePicker': inputDate,
      'system': {
        'user_id': 'my_user_id'
      }
    },
    'skills': {
      'main skill': {
        'user_defined': {
          'account_number': '123456'
        }
      }
    }
  }
})
  .then(res => {
    console.log(JSON.stringify(res.result, null, 2));
  })
  .catch(err => {
    console.log(err);
  });

Important links:

Input type Date - MDN
Watson Assistant API doc - IBM Watson

来源：https://stackoverflow.com/questions/61204579/use-html-date-picker-in-ibm-watson-conversation-dialog-to-get-date-as-input-from

标签

html

calendar

ibm-watson

watson-assistant