0

I am trying to use jquery datepicker in the page.I have zipped the necessary file jquery-1.8.0.min.js,jquery-ui-1.8.23.custom.min.js and jquery-ui-1.8.7.custom.css and uploaded it as static resource. But the datepicker is not working.

I have named the file as JqueryTest in static resource.The main zipped folder name is JqueryFile-->The JqueryFile has 2 foldes-->js and css.

Visual force page

  <apex:page controller="check_Format" sidebar="true" showChat="true" >
 <head>
 <apex:includeScript value="   {!URLFOR($Resource.JQueryTest,'JqueryFile/js/jquery-1.8.0.min.js')}" />
 <apex:includeScript value="{!URLFOR($Resource.JQueryTest,'JqueryFile/js/jquery-ui-1.8.23.custom.min.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.JQueryTest,'JqueryFile/css/jquery-ui-1.8.7.custom.css')}" />
 </head>
 <script>

  var j$ = jQuery.noConflict();


 <script>
  $(function() {
    $( "#datepicker" ).datepicker();
});
</script>
<apex:form id="theForm">

 <body>
 <div class="demo">
  <p>Date: <input id="datepicker" type="text" /></p>
  </div>
 </body>


 </apex:form>
 </apex:page>

Where i am doing wrong?Please suggest.

In console i am getting the following error

enter image description here

Thanks.

error:-$ is not a function

enter image description here

  • are you receiving any jquery error in console or firebug? – Nitin Jan 15 '16 at 11:03
  • Hi nitin, Thanks for your quick reply,i have included the error snapshot above. – Learner_sfdc Jan 15 '16 at 11:10
  • You are defining jQuery as j$ yet you are using $ in your function. Simply change $ to j$ – Eric Jan 17 '16 at 17:10
0

Use below code to implement jquery picklist and

I have added static resource in my google drive Just download and add into your static resource.. make sure your static resource name JQueryTest

Download link

https://drive.google.com/file/d/0B5PMI0wQcOqlcVcwczZMWGFiLUk/view?usp=sharing

 <apex:page  sidebar="true" showChat="true" >
 <head>
      <apex:stylesheet value="{!URLFOR($Resource.JQueryTest,'/css/jquery-ui.css')}" />
      <apex:includeScript value="   {!URLFOR($Resource.JQueryTest,'/js/jquery-1.10.2.js')}" />
      <apex:includeScript value="{!URLFOR($Resource.JQueryTest,'/js/jquery-ui.js')}" />

 </head>
 <script>
         $(function() {
            $( "#datepicker-13" ).datepicker();
            $( "#datepicker-13" ).datepicker("show");
         });
      </script>
<apex:form id="theForm">

 <body>
 <div class="demo">
  <p>Enter Date: <input type="text" id="datepicker-13"/></p>
  </div>
 </body>


 </apex:form>
 </apex:page>

enter image description here

Use this tutorial http://www.tutorialspoint.com/jqueryui/jqueryui_datepicker.htm


Change the Background Color of jQuery Datepicker

Use this css.. And change color based on your preference

<style type="text/css">
.ui-datepicker {
    background: #333;
    border: 1px solid #555;
    color: #EEE;
}
</style>
| improve this answer | |
  • 1
    Hi Ratan, Thanks for the reply,will implement this and will let you know . – Learner_sfdc Jan 15 '16 at 12:10
  • @Learner_sfdc Does my answer solve your problem ? – Ratan Paul Jan 16 '16 at 12:45
  • Hi Ratan, I am able to get the calendar,but i dont want the orange color for the calendar,if i remove the stylesheet,the calendar is not displaying. – Learner_sfdc Jan 17 '16 at 5:43
  • @Learner_sfdc check my updated ans.. Change the Background Color of jQuery Datepicker – Ratan Paul Jan 17 '16 at 14:30
0

Please remove the extra from your code.

<script>

  var j$ = jQuery.noConflict();

<!--remove this script tag-->
 <script>
  $(function() {
    $( "#datepicker" ).datepicker();
});
</script>
| improve this answer | |
0

Use 'jQuery' object reference instead of '$' to avoid conflicts between SFDC and JQuery JS scripts.

Hope this helps you.

| improve this answer | |
0

it does not work in my enviroment by now . finally I found there are two mistake in my environment firstly the zip file and my resource name not be consistent.enter image description here secondly the url in the visualforce page must include the resourcename like /resourcename/****.js.

| improve this answer | |

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.