How can I use Date Picker in my form in bootstarp

Question

I want to use from date picker from a template this is my field:

<div class="form-group">
<h4 class="card-title">Material Date picker</h4>
<div class="row ">
<div class="col-md-6">
<label class="m-t-20">Default Material Date Picker</label>
<input  type="text" class="form-control" placeholder="2017-06-04" id="mdate">
<label class="m-t-40">Default Material Date Timepicker</label>
<input type="text" id="date-format" class="form-control" placeholder="Saturday 24 June 2017 - 21:44">
</div>
</div>
 </div>

and this is Java script code. I don't know about Java script code. but in template is written , "Use .bootstrapMaterialDatePicker to create it. " But I don't know where?

part of Java script code:

(function($) {
"use strict"


// MAterial Date picker
$('#mdate').bootstrapMaterialDatePicker({
    weekStart: 0,
    time: false
});
$('#timepicker').bootstrapMaterialDatePicker({
    format: 'HH:mm',
    time: true,
    date: false``
});
$('#date-format').bootstrapMaterialDatePicker({
    format: 'dddd DD MMMM YYYY - HH:mm'
});

$('#min-date').bootstrapMaterialDatePicker({
    format: 'DD/MM/YYYY HH:mm',
    minDate: new Date()
});
// Clock pickers
$('#single-input').clockpicker({
    placement: 'bottom',
    align: 'left',
    autoclose: true,
    'default': 'now'

I see this error in consol:

Uncaught TypeError: $(...).bootstrapMaterialDatePicker is not a function
at form-pickers-init.js:6:17
at form-pickers-init.js:108:3