Hi @paulsnolan ,
@justinburch has mentioned significant points especially about client or server side decision and the consistency across your portal.
If it is going to be a client side using jQuery,CSS and HTML then following are the steps for you. (Again please follow what justin has mentioned about securing API)
In Portal Management:
Step 1: Creating Web Template:
1. Under content > Web Templates > Create New template
2. Give a name "DatePickerWithValidation" as an example
3. Choose your website
4. Then paste the following code as an example
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="flex-col-sm-5">
<div class="flex-row">
<div class="flex-col-sm-5">
<div class="form-field-wrapper">
<div class="input-group date datetimepickerclass" id="datetimepicker1">
<input type="text" id="datetimepicker1" placeholder="Start Date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="flex-col-sm-5">
<div class="form-field-wrapper">
<div class="input-group date datetimepickerclass" id="datetimepicker2">
<input type="text" id="datetimepicker2" placeholder="End Date">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Step 2: Creating Page Templates
1. In Portal Management > Website > Page Template
2. Create New and give a name of your choice (DatePickerPageTemplate)
3. And then choose your web template from the above step. Screenshot below

Step 3: Creating Web page
Now create your web page using Portal studio under the template you can see the "DatePickerPageTemplate"

Step 4: Adding Custom JavaScript and CSS to the recently added web page
1. In portal management > open the web page which you have created
2. Under Localized Content > Select the page
3. Advanced > under Custom Javascript
$(function () {
var start_date1 ='';
var end_date1 = '';
if(start_date1=='' && end_date1=='')
{
$('#datetimepicker1').datetimepicker({
useCurrent: false,
format: 'DD/MM/YYYY'
}).on('dp.change', function(e){
console.log('here1');
console.log(e);
$(".day").click(function(){
$("a[data-action='togglePicker']").trigger('click');
});
$('#datetimepicker2').data("DateTimePicker").minDate(e.date);
});
$('#datetimepicker2').datetimepicker({
useCurrent: false,
format: 'DD/MM/YYYY'
}).on('dp.change', function(e){
console.log(e);
console.log('here2');
$('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
});
}
});
$("#beacon").change(function(){
alert($(this).val());
});
4. Under Custom CSS paste the following (modify according to your need)
input[type="text"], textarea, input[type="password"] {
font-size: 16px;
border: 1px solid #ececec75;
width: 100%;
padding: 12px 20px;
margin: 0 0 8px 0;
resize: none;
background: #f5f5f5;
-webkit-appearance: none;
border-radius: 2px;
font-weight: 200;
}
.flex-row {
display: flex;
flex: 1;
}
.flex-col-sm-5 {
flex: 1;
padding: 0 10px;
}
.form-field-wrapper {
margin: 0 0 20px 0;
}
span.input-group-addon {
background: transparent;
position: absolute;
border: 0;
top: 41%;
right: 0;
display: block;
width: 100%;
height: 100%;
text-align: right;
transform: translateY(-50%);
display: flex;
justify-content: flex-end;
align-items: center;
}
Kudos to Codepen for this !!
Now back to portal studio > press sync configuration and browse website
And the output you will get it

Hope it helps.
------------
If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.