4

I have a page that contain inputField with type (date), And I used bootstrap framework css and turned off the standard style sheet.. but the date field appeared without datepicker and i put type="date" to the inputField to display the datepicker, but i got errors in Java script when i click on the field to choose a date.

> Uncaught TypeError: Cannot read property 'addEventListener' of null 
> Uncaught TypeError: Cannot read property 'currentStyle' of null

VF page code

<apex:outputPanel layout="block" styleClass="form-group">
                  <apex:outputLabel styleClass="col-sm-4 control-label">Date</apex:outputLabel>
                  <apex:outputPanel layout="block" styleClass="col-sm-8">
                        <apex:inputField id="date" 
                                         value="{!holiday.Date__c}" 
                                         styleClass="form-control"
                                         type="date" />
                  </apex:outputPanel>
</apex:outputPanel>
1

I've found that mixing bootstrap and Salesforce components doesn't work that well, especially when using a Salesforce input widget that introduces additional markup.

If you are using bootstrap, then I'd look to use a bootstrap specific date picker. Unfortunately the library doesn't provide one of these by default, so you have to use a third party add-on. I've used bootstrap-datepicker in the past and it works well on desktop and mobile devices:

http://www.eyecon.ro/bootstrap-datepicker/

I usually tie this to a regular HTML input:

<input type="text" id="date" style="width:8em;" class="form-control" placeholder="date" />

and then use JavaScript to access the underlying value when the user clicks save:

var dt=$('#date').val();

and finally a little bit of setup to initialise the datepicker, default to today and hide it when the user selects a date :

$('#date').datepicker({
  format: 'dd-mm-yyyy'
});

$('#date').datepicker('setValue', new Date());

$('#date').on('changeDate', function() {
                                        $('#date').datepicker('hide'); 
                                        }
                       );

(as bootstrap relies on JQuery I can be sure that it will be present in my page).

You can then set this value into a hidden input field tied to the date field. You may be able to tie this directly to an apex:inputText (or possibly an inputfield if you tell Salesforce not to display the default date picker), but I haven't tried that - when I use bootstrap I typically implement my business logic in JavaScript and use remoting to save records etc.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.