How to customize boostrap date picker in service portal?

michelmeulen
Tera Expert

Hi, community.

I'm currently working on a project in the service portal part of servicenow, but I ran into an issue trying to customize the date picker (the one you see on the "forms" page.). I want to change the start day, (in the bootstrap date picker, the first day of the week is set to sunday, and the client would like it to be set to monday in order to make it consistent with the datepicker they use in the other parts of their servicenow instance) and assuming that I'm correct in my estimation that service portal uses the standard bootstrap date picker, I should be able to make that change fairly easily if I can get to the datepicker's code. Herein lies my problem.   As much as I stared at the 'forms' widget, I could not determine where it was getting the datepicker from. The datepicker also does not appear to be a widget or a script include, or if it is I can't find it. Am I looking in the wrong place? Or is it flat out impossible to reach the datepicker? If it is, is there a different way to customize it? A little sneaky hack I can make use of to reach it until service portal enables us to reach it properly? Perhaps in the forms widget? I've already tried to add

$scope.dateOptions = {

  formatYear: 'yy',

  showWeeks: true,        

  startingDay: 1

};

to the client script of the forms widget, in the foolish optimism that maybe the datepicker would somehow be defined in the widget's scope, but this had no effect, so I assume I'd have to reach it from elsewhere, or somehow inject it into the widget's script.

So what do I do? Has anyone had a similar issue? How did you solve it? Or am I just blind and constantly looking over the widget or script include I'm meant to change?

1 ACCEPTED SOLUTION

jameswang
Kilo Expert

Hi, in my first reply of the Bootstrap, there is a component called 'datepicker popup', the calendar starts with Monday-Tuesday...


Again, the link is below.


Angular directives for Bootstrap



-James


View solution in original post

7 REPLIES 7

larstange
Mega Sage

Hi


You won't be able to modify this.



The fields in the form are rendered using a custom directive, that we do not have access to modify - its the same story with variables in catalog items.



          <div>


              <sp-model form_model="data.f" mandatory="mandatory"></sp-model>


          </div>



With that said, you should log a defect on HI, that the Service Portal does not honor the setting in the platform - Change the day that calendar weeks start on


jameswang
Kilo Expert

Hi, Michel


Im currently using datepicker for service portal as well.   You can set the date by using client script, like


$scope.mydt = gdt;



mydt is the input ng-model of your datepicker, like


ng-model="mydt"



I am using Angular directives for Bootstrap .



Please let me know if this helps.



-James


Hi



Thanks for the reply, but I'm not so much looking to set the date as the starting day. Just the appearance. So that instead of going like sunday - monday -   - tuesday - wednesday etc. I'd want it to go monday - tuesday -wednesday etc.


jameswang
Kilo Expert

or you can set up the mindate like



min-Date = "minDate"