how to hide calendar icon in date/time type variable

fisfreak
Kilo Contributor

Hi All,

i have a requirement of allowing the user to enter the time in a UI form in HH:MM format. In order to achieve that, we do not have a time variable in service now. so i decided to use the Date / time variable type. But now the issue is , it comes up with the calendar as well, i need to get rid of this calendar icon and keep only the time part.

Is their a way to achieve this in service now ??

find_real_file.png

I just need time part and get rid of the calendar portion. It will be just as show below.

find_real_file.png

Thanks,

Krishna P

1 ACCEPTED SOLUTION

Hi Krishna,



Navigate to System UI --> UI Pages (Click New) then create a new UI Page of Category Service catalogue with HTML code and Script provided


find below snapshot to help you - you can try it to have a preview


find_real_file.png


Please do not forget to mark helpful/answered as appropriate



Thanks,


Abhishek


View solution in original post

9 REPLIES 9

Karthik Reddy T
Kilo Sage

Hello Krishna,



I not sure your requirement feasible or not but refer the below threads may helpful to you.



how to hide calendar icon on service catalog form



Hiding the Calendar icon


Karthik Reddy T.
ServiceNow Commnunity MVP -2018 class.

amis
Kilo Expert

Hi Krishna,



If you want to display your variable in time duration format HH:MM


You can create a variable of type ui page and add below code. It will show time duration field.



HTML


<?xml version="1.0" encoding="utf-8" ?>


<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">



<html>


<table>


<th>Hours</th>


<th>Minutes</th>


<!-- <th>Seconds</th> -->


<tr>


<td><input type="number" min="0" max="23" id="hours" onChange="validateHours(this.value)"/></td>


<td><input type="number" min="0" max="59" id="minutes" onChange="validateMinutes(this.value)"/></td>


<!-- <td><input type="number" min="0" max="59" id="seconds" onChange="validateSeconds(this.value)"/></td> -->


</tr>


</table>


</html>


</j:jelly>



Client Script: To validate hours are from 0-23 and minutes are from 0-60



function validateHours(value){


  if(value<0 || value>23){


  alert("Value should be in range 0-23");


  document.getElementById("hours").value = 0;


  }


}



function validateMinutes(value){


  if(value<0 || value>59){


  alert("Value should be in range 0-60");


  document.getElementById("minutes").value = 0;


  }


}



function validateSeconds(value){


  if(value<0 || value>59){


  alert("Value should be in range 0-60");


  document.getElementById("seconds").value = 0;


  }


}



R's


Abhi



PS: Mark as answered or hit Like / Helpful if you find my response helpful


fisfreak
Kilo Contributor

@Abhishek Mishra



One small question.



where do you put the HTML code, do i need to construct it in the onload client script using javascript ?



Thanks


you have to create an UI page and need to place that code in UI page and call that in catalog item.


http://wiki.servicenow.com/index.php?title=UI_Pages#gsc.tab=0