Skip to main content

Search

Formatting time chooser

Answered

Comments

7 comments

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