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

[paulsnolan]

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

[justinburch]

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)

[paulsnolan]

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]

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

[ragavanrajan]

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.

[Fubar]

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

[paulsnolan]

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