function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SK R.ax1448SK R.ax1448 

Urgent:Date Picker in VisualForce


Hi All,

The following Jscript is working as expected. But when i use the script in VF page, its not poping up the  calender date picker. Can anyone help how to use the script in VF page, any help is highly appreciated.

Java Script:

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    
    <script type="text/javascript">
        $(function () {
            $("#datepicker").datepicker({ beforeShowDay: allowedDates });
        });

    var currentYear = new Date().getFullYear();

        var _allowedDates = [
    new Date(currentYear, 2, 31).getTime(),
    new Date(currentYear, 5, 30).getTime(),
    new Date(currentYear, 8, 30).getTime(),
    new Date(currentYear, 11, 31).getTime(),
];

function allowedDates(date) {
    date = date.getTime();

    for (i in _allowedDates)
        if (date == _allowedDates[i])
            return [true, ""];

    return [false, ""];
}


    </script>

</head>
<body>
 
<p>Date: <input type="text" id="datepicker" /></p>
 
 
</body>
</html>


VF Page:

<apex:page controller="DatePickerDEmo2">
<head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    
    <script type="text/javascript">
        $(function () {
            $("#datepicker").datepicker({ beforeShowDay: allowedDates });
        });

    var currentYear = new Date().getFullYear();

        var _allowedDates = [
    new Date(currentYear, 2, 31).getTime(),
    new Date(currentYear, 5, 30).getTime(),
    new Date(currentYear, 8, 30).getTime(),
    new Date(currentYear, 11, 31).getTime(),
];

function allowedDates(date) {
    date = date.getTime();

    for (i in _allowedDates)
        if (date == _allowedDates[i])
            return [true, ""];

    return [false, ""];
}


    </script>

</head>

<apex:form >
  <apex:pageBlock >

  <apex:pageblockSection >
         <apex:inputText value="{!d_date_str}" id="datepicker" styleClass="JQueryDate"/>

  </apex:pageblockSection>
  </apex:pageBlock>

 
  </apex:form>

</apex:page>

Controller:

public class DatePickerDEmo2 {

 

    public String d_date_str{get;set;}

    public Contact c{get;set;}

    public DatePickerDEmo2()

    {

        c=new Contact();

    }

}

 

Thanks in advance !

 


Regards,

SK

SK R.ax1448SK R.ax1448

Hi All,

 

InputText is not working properly, but  if used <input> element instead of <apex:inputText>  it is working as expected. Can any one give some idea why inputText is not working and how to send values to the controller  from <input> element. 

Any help is highly appreciated.

 

Thanks,

SK