JQuery Calender control

Question

0.00/5 (No votes)

See more:

Hi,
I used jquery for calender control with month and year drop downs. Following is my code in UI form:

C#

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
    type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
    rel="Stylesheet" type="text/css" />

<style type="text/css">
    .ui-datepicker
    {
        font-size: 9pt !important;
    }
</style>

<script type="text/javascript">
    $(function () {
        $("[id$=txtDateSSMA]").datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: '1900:2020',
            Selected: true
        });

      });
</script>

But it did not show any popup calender in UI. This one is working fine in safari. But not in IE, FF and Chrome. Please give solution to resolve this problem

Thank you
Prasaanth K

Posted 20-Aug-13 23:53pm

Kuppili Prasaanth

Updated 21-Aug-13 0:01am

Thanks7872

v2

Add a Solution

Comments

kishore sharma 21-Aug-13 7:21am

by looking at your script ,i am wonder how you got datapicker in safari,becouse i couldnot see any datepicker plugin in this script.

3 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Answer 1 · 2013-08-21T00:31:00

Solution 1

Refer - [Demo] jQuery Calender control Example[^].

I have created this demo using your code. It is working fine in all browsers.

I have added the TextBox as below...

HTML

<input type="text" id="txtDateSSMA" />

Posted 21-Aug-13 0:31am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Zafar A khan · Answer 2 · 2013-08-21T00:39:00

try this

C#

<script type="text/javascript">
    $(function () {
        $(".date").datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: '1900:2020',
            Selected: true
        });
 
      });
</script>

<input type="text" class="date" id="txtDateSSMA" />

Jitendra Sabat · Answer 3 · 2013-08-21T00:56:00

Solution 3

Suppose your textbox markup goes like below

XML

<input type="text" id="txtDateSSMA" />

Script for adding date picker functionality is given as below-

$(function () {
        $("#txtDateSSMA").datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: &amp;#39;1900:2020&amp;#39;,
            Selected: true
    });
});

Posted 21-Aug-13 0:56am

Jitendra Sabat

Updated 21-Aug-13 0:57am

v2

Comments

Kuppili Prasaanth 21-Aug-13 7:46am

Hi,

Thanks for your reply. I already have textbox control in my page. But still it wont come

Jitendra Sabat 21-Aug-13 7:48am

can you please post your textbox markup along with datepicker script?

JQuery Calender control

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

JQuery Calender control

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us