Tuesday, 11 August 2015

Bootstrap Datepicker for Salesforce1, Google Chrome and Firefox mozilla

Was working on something and got a change for implemtation which should work with Google chrome, Salesforce1 and firefox mozilla as well, with chrome it starts working normally without any modifications, but not in firefox mozilla, I have added comments in the code where I am referring libraries to make datepicker to work in Mozilla.

this is how bootstrap datepicker looks in chrome


This is how it looks in Firefox mozilla


And now in datepicker Salesforce1


Here is the code of the above datepicker

1:  <apex:page showHeader="false" sidebar="false" docType="html-5.0" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false">  
2:      <html lang="en">  
3:        <head>  
4:          <meta charset="utf-8"></meta>  
5:          <meta name="viewport" content="width=device-width, initial-scale=1"></meta>  
6:          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>  
7:          <!-- script for mozilla without these datepicker will work in chrome but not in mozilla-->  
8:          <script src="https://cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>  
9:          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>  
10:          <script type="text/javascript">  
11:            webshims.setOptions('forms-ext', {types: 'date'});  
12:            webshims.polyfill('forms forms-ext');  
13:          </script>  
14:        </head>  
15:        <body>  
16:          <div class="panel-body">  
17:            <div class="form-group" ng-hide="hideformobile">  
18:              <div class="col-xs-12 form-group input-append datepicker">  
19:                <label>Datepicker</label>  
20:                <input type="date" id="mydate" size="16" class="form-control"></input>  
21:              </div>  
22:            </div>  
23:          </div>  
24:        </body>  
25:      </html>   
26:    </apex:page>  

Felt like posting it, as datepicker can take time to implement as it took mine, it works awesome on Salesforce1.

Thanks Happy coding!!

2 comments:

  1. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress development company in Chennai

    ReplyDelete
  2. Great Article Cloud Computing Projects

    Networking Projects

    Final Year Projects for CSE

    JavaScript Training in Chennai

    JavaScript Training in Chennai

    The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

    ReplyDelete