Date Fields and Crowd HTML Elements

Question

I'm working with AWS Mechanical Turk and I'm setting up a form using crowd elements to build a form. I'm using a few crowd-input forms and they work fine but I was wondering if there was a datepicker similar to the bootstrap date picker.

I tried bringing in the bootstrap datepicker but it did not help. once I clicked the date it didn't store the date.

   <crowd-form>
    <div class="row">
      <div class="col-md-6">
            <crowd-card image="https://s3.amazonaws.com/cv-demo-images/basketball-outdoor.jpg"></crowd-card>
      </div>
      <div class="col-md-6">
            <crowd-input name="fuelticket" label="Fuel Ticket"></crowd-input>
            <div class="input-group date" data-provide="datepicker">
                <crowd-input name="fuelingdate" label="Fueling Date" ></crowd-input>
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-th"></span>
                </div>
            </div>
      </div>
    </div>
    </crowd-form>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#datepicker').datepicker({
              format: 'mm/dd/yyyy'
            });
        });
    </script>

Answer 1

You can use the type="date" attribute to turn it into a datepicker.

Here is example code:

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  Please enter today's date:
  <crowd-input name="date" type="date"></crowd-input>

</crowd-form>

Here is a jsfiddle with the same code: https://jsfiddle.net/tcpuh0af/

And here is the full documentation for https://docs.aws.amazon.com/sagemaker/latest/dg/sms-ui-template-crowd-input.html

Please let us know if you have any additional questions.

Thank you,

Amazon Mechanical Turk