Announcements
179
Hi All
I need to create a Portal page with 2 date pickers. I'm planning on creating a new web/page template that the page will use. I need to validate the date range (i.e end must be after start) and set a colour for the picker. What is the best approach, JQuery, Liquid, other?
Thanks
Thank you all for your replies. I'll let you know how I get on
Date picker on the Portal can be a pain as it is not well documented, and you have to watch out for old examples as at some point the picker changed and the old stuff doesn't work.
One of the key things that is hard to find doco on is the on change event "dp.change" as show in @ragavanrajan example code above as it is not the expected "change".
Some additional useful jQuery for the date picker on the Portal for date fields on the form from CDS/Dataverse (rather than just adding a custom date picker to a template).
Share
Report
All responses (
Answers (
Just a few code snippets for the date picker
// disable the date field and picker
$("#your_fieldname") // input control
.next() // the date picker container
.data("DateTimePicker") // the date picker object
.disable();
// enable the control after disabling
$("#your_fieldname").next().data("DateTimePicker").enable();
// show the date picker (like someone clicked the icon)
$("#your_fieldname").next().data("DateTimePicker").show();
// disable dates in the past
$("#your_fieldname").next().data("DateTimePicker").minDate(moment())
// disable dates in the future (5 days in this example)
$("#your_fieldname").next().data("DateTimePicker").maxDate(moment().add(5,'days'))
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.
Hi @paulsnolan,
So far it sounds like you might be okay to just use whatever library you want to. Here are some additional general considerations:
Hi justinburch
Thanks for the reply. The dates are used along with some other values which are passed to an Azure function. The function will then retrieve data based on the range of the two dates.
Liquid is only helpful for retrieving data here, not for creating an HTML element itself or for storing any data. What is the purpose of the dates?
Are they being stored on a table? If so, you can just add the changes onload to the standard date picker elements created by adding those column types to a form.
Are they just to apply some kind of custom filtering? If so, you can really use any library you want, but using the basic date time picker included already would be pretty simple.
Quick tip on getting started with finding the OOTB element's DateTimePicker object in portals: Tip #827: Restricting date picker on portal forms | Power Platform & Dynamics CRM Tip Of The Day
Documentation for the library used here (Bootstrap DateTimePicker extension): DateTime Picker · Bootstrap (malot.fr)
#1
Lucas001
60
Super User 2025 Season 1
#2
Fubar
55
Super User 2025 Season 1
#3
surya narayanan
35
