inputfield with type date using twitter bootstrap

Question

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>

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