web
You’re offline. This is a read only version of the page.
close
Skip to main content
Community site session details

Community site session details

Session Id : lr9LAenN4kyVnw6OKvbbVF
Power Pages - Power Apps Portals
Unanswered

How to create 2 Date Pickers, with validation of dates and range, in a Portal Page

Like (0) ShareShare
ReportReport
Posted on 20 Feb 2021 16:53:37 by 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

  • paulsnolan Profile Picture
    179 on 22 Feb 2021 at 07:35:09
    Re: How to create 2 Date Pickers, with validation of dates and range, in a Portal Page

    Thank you all for your replies. I'll let you know how I get on

  • Fubar Profile Picture
    8,032 Super User 2025 Season 2 on 22 Feb 2021 at 04:23:54
    Re: How to create 2 Date Pickers, with validation of dates and range, in a Portal Page

    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).

    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')) 

     

     

  • ragavanrajan Profile Picture
    7,036 Most Valuable Professional on 21 Feb 2021 at 21:44:26
    Re: How to create 2 Date Pickers, with validation of dates and range, in a Portal Page

    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 

     

    ragavanrajan_0-1613943439065.png

     

    Step 3: Creating Web page 

    Now create your web page using Portal studio under the template you can see the "DatePickerPageTemplate

     

    ragavanrajan_1-1613943602881.png

     

     

    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 

     

    ragavanrajan_2-1613943844277.png

     

    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.

     

  • justinburch Profile Picture
    Microsoft Employee on 21 Feb 2021 at 17:53:12
    Re: How to create 2 Date Pickers, with validation of dates and range, in a Portal Page

    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:

    1. If the data to the function is client-side, you'll need to be conscious of how you secure the end-point or be comfortable with it being exposed - recommendation would be to put it behind Azure API management and/or do token validation from the portal's public key
    2. If the data to the function is handled server-side, then you'll want these to be columns on a form and easiest would be to use the OOTB DateTimePicker, but you could also hide this and replace with a custom control/library if you really don't like the control
    3. If you do use something custom here, keep in mind that if consistency is important, you will also need to replace all of the other datetimepicker controls in your portal - another reason it might be simpler to override the OOTB with a global CSS file for the colors and onload metadata changes to update the range restriction
  • paulsnolan Profile Picture
    179 on 21 Feb 2021 at 12:32:41
    Re: How to create 2 Date Pickers, with validation of dates and range, in a Portal Page

    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.

     

  • justinburch Profile Picture
    Microsoft Employee on 20 Feb 2021 at 21:29:42
    Re: How to create 2 Date Pickers, with validation of dates and range, in a Portal Page

    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)

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Announcing our 2025 Season 2 Super Users!

A new season of Super Users has arrived, and we are so grateful for…

Paul Stork – Community Spotlight

We are honored to recognize Paul Stork as our July 2025 Community…

Congratulations to the June Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Pages

#1
Lucas001 Profile Picture

Lucas001 60 Super User 2025 Season 2

#2
Fubar Profile Picture

Fubar 55 Super User 2025 Season 2

#3
surya narayanan Profile Picture

surya narayanan 35

Loading complete