Skip to main content
BOOK A DEMO

Search

Formatting time chooser

Answered
ArdeviaForum
  • Discussion Created

Original Post by Mikey (Imported from Ardevia Forum)

I would like to format date and time field so that for hours user can choose only 08-16 and for minutes 00, 15, 30 or 45. Is that possible?

0

Comments

7 comments

Date Votes
  • ArdeviaForum

    Original Post by Andrii Berezovskyi (Imported from Ardevia Forum)

    Hello Mikey

     

    This behaviour is possible.
    I create script for this and prepare small demo how to use it.

     

    Demo:

     

     

     

    Script:

    /*

YOU CAN MODIFY  INPUT VALUES FOR YOUR NEEDS
 ---------------------------------------------------------
[DateTimeFieldName]- IS NAME OF YOUR DATE TIME FIELD, 
 DO NOT RENAME YOUR DATETIME FIELD NAME ON FORM AFTER CREATING.
 IF YOU WANT RENAME DATETIME FIELD PLEASE FOLOW NEXT STEPS:
 1.DELETE DATETIME FIELD WITH OLD NAME AND CREATE NEW WITH NEW NAME INSTEAD.
 2.CREATE ACTION IN RibbonMenu: Behaviour[tab] -> FormLoadActions [section] -> Edit -> [ActionBuilerDialog opened] Add Action -> select Type Execute Script from dropdown menu -> Insert this script -> Modify Inputs -> Change Title for this Action -> Save

 [fromHour] - HOUR VALUE WICH WILL BE FIRST IN DROPDOWN MENU
 [toHour]  - HOUR VALUE WICH WILL BE LAST IN DROPDOWN MENU
 [minutesList] - MINUTES OPTIONS WICH WILL BE IN DROPDOWN MENU

*/

//  INPUT VALUES [ YOU CAN MODIFY THIS VALUES ]
var DateTimeFieldName = 'DateTime_fld1'; 
var fromHour = 8; 
var toHour = 16;  
var minutesList = '00,15,30,45'

// -----------------------------------------------------------------------------------------------------
// DO NOT MODIFY CODE BELOW
var DateTimeElement = jQuery(".ms-formbody[fieldname="+DateTimeFieldName+"]");
if(DateTimeElement.length === 0){
  alert('Field with this ['+DateTimeFieldName+'] name dose not exsist. Please modify your DateTimeLimit script.' );
}else{
  
  // Hours filter
  var _fromHour = parseInt(fromHour);
  var _toHour = parseInt(toHour); 
  if(_fromHour === NaN || _toHour === NaN || _fromHour < 0 || _toHour > 24){
  alert('Please specify fromHour and toHour correctly.fromHour,toHour must be numbers from 0 to 24. Please modify your DateTimeLimit script.');
  }else{ 
    DateTimeElement.find("select[id$='DateTimeFieldDateHours'] option").each(function() {
      var $this = $(this);
      var optionValue = parseInt($this.val());  
      if ( optionValue < _fromHour || optionValue > _toHour ) {
          $this.remove();    
      }
    });
  }
  
  
  // Minutes filter 
  var _minuteList = minutesList.split(',');
  if(_minuteList.length === 0){
    alert('Please specify minutesList  correctly.Minutes list must has next format \x22 00,15,30,45 \x22 or \x22 00,05, ... ,55\x22. Please modify your DateTimeLimit script.');
  }else{
  DateTimeElement.find("select[id$='DateTimeFieldDateMinutes'] option").each(function() {
  var $this = $(this);
 var IsMinuteOptionNeedRemove = jQuery.inArray($this.val(), _minuteList) == -1;
      if(IsMinuteOptionNeedRemove){
      $this.remove();
      }
  });
  }

}

     

    Thanks for your time
    Ardevia support

    0
  • CajnerT

    Very nice solution,

    but is it possible to set minute from 1 to 59 with step 1 (and not 5 as default)?

    0
  • Matthias_Walter

    Hi Tadej Cajner,

    you could add the missing minute options with the following script:

    //  INPUT VALUES [ YOU CAN MODIFY THIS VALUES ]  
    var DateTimeFieldName = 'DateWithTime';
      
    // -----------------------------------------------------------------------------------------------------  
    // DO NOT MODIFY CODE BELOW  
    var DateTimeElement = jQuery(".ms-formbody[fieldname="+DateTimeFieldName+"]");  
    if(DateTimeElement.length === 0){  
      alert('Field with this ['+DateTimeFieldName+'] name dose not exsist. Please modify your DateTimeLimit script.' );  
    }else{    
        
      // extend Minutes   
     
      var minutesControl = DateTimeElement.find("select[id$='DateTimeFieldDateMinutes']");
      minutesControl.find("option").each(function() {  
          $(this).remove();
      });
      for (var i = 0; i < 60; i++) {
      var option = document.createElement("option");
      
      option.value = i;
      option.text = pad(i,2);

      minutesControl[0].add(option, null);
      }
    }

    function pad(num, size) {
        var s = num+"";
        while (s.length < size) s = "0" + s;
        return s;
    }

     

    Cheers

    Matthias

    0
  • CajnerT

    Thank you Matthias, it works.

     

    Best Regards,

     

    Tadej

    0
  • Samuel Paska

    Hi Matthias_Walter, is this still relevant, please? I'm trying to modify this script to show only time values with 00, but my result is "[DateToDraw] name dose not exsist. Please modify your DateTimeLimit script."

    Thank you for the advice

    0
  • Matthias_Walter

    Hi Samuel Paska,

    using skybow Modern Forms you can add a pre-form load action to register CSS that hides the 30min time values:

    jQuery('head').append(`<style type='text/css'>
           #ComboBox38-list button:nth-child(2n){
               display:none;
           }
       </style>`);

    To figure out the correct combobox id, you can open the form in the browser, click on the time dropdown and then right-click -> inspect on one of the time values

    Kind regards
    Matthias

    0
  • Samuel Paska

    Hi Matthias, Thank you for the advice. But I modified your solution a little bit, because i think that this is harder to implement when you publishing this solution to a client site. I execute this script in Pre-Form Load action and after closing the form i change "display: none" to "display: block" via another script.

    jQuery('head').append(`<style type='text/css'>
        .ms-ComboBox-optionsContainer button:nth-child(2n){
            display:none;
        }
    </style>`);
    0

Please sign in to leave a comment.