Jquery datepicker selects first year from list after certain year range

Question

0.00/5 (No votes)

See more:

, +

$('.DateOfBirth').datepicker({
           changeMonth: true,
           changeYear: true,
           dateFormat: 'dd/mm/yy',
           defaultDate: new Date(),
         yearRange: "-100:+0"

       });

The above code brings a list of years ranging : 2017 to 1917 in the year dropdown of datepicker.

Now when i select a year say 2000 the dropdown sets the year value to 2000 which is correct and it works fine till 2000 but if i select a year before 2000 say 1999 etc the dropdown displays the first year i.e 1917 in dropdown selection, but if i select the date it populates the selected year 1999 date eg 23/08/1999 which is correct but the dropdown still has 1917 displayed on it.

Note : the textbox having the above class and the above code is in a partial view which is displayed on a View.

The month dropdown works perfectly, its just the year dropdown creating problem. Also i removed yearRannge attribute and tried still it doesnt work.
if yearRange = -100:+0 so 1917 is selected if i choose any year before 2000
if yearRange = -100:+100 so if i select 1950 it selects 2050 , if 1970 it selects 2070 and so on.

What I have tried:

I tried calling onselect functions but didnt work for me.

Posted 5-Apr-17 0:40am

Abrar Kazi

Updated 17-Apr-17 22:12pm

v4

Add a Solution

Comments

Karthik_Mahalingam 5-Apr-17 7:19am

have tested your code, it works fine.
which version of jquery are you using?

Abrar Kazi 5-Apr-17 7:23am

1.11

Karthik_Mahalingam 5-Apr-17 7:28am

i have tried with 1.12.1 the one in jquery ui demo page

Abrar Kazi 5-Apr-17 7:31am

what possibly could go wrong here i cannot upgrade to 1.12

Abrar Kazi 5-Apr-17 7:23am

can we skype i can share images ?

Karthik_Mahalingam 5-Apr-17 7:25am

No sir
you can host the image in any free image hosting sites ( imgur.com ) and share the url

Abrar Kazi 5-Apr-17 7:28am

ok. http://imgur.com/a/sJnOA

Karthik_Mahalingam 5-Apr-17 7:31am

no image

Abrar Kazi 5-Apr-17 7:32am

http://imgur.com/47H3oUs

Abrar Kazi 5-Apr-17 7:30am

http://imgur.com/47H3oUs

Karthik_Mahalingam 5-Apr-17 7:32am

check whether you are getting any error in chrome console window

Abrar Kazi 5-Apr-17 7:33am

nope i checked that . the date after selection goes red if u see the pic and i couldnt change the date then

Karthik_Mahalingam 5-Apr-17 7:34am

have you set any validations to the textbox ?

Abrar Kazi 5-Apr-17 7:37am

yes this one :

function PopulateFormateddate(dateValue1, date2) {

if (dateValue1 != "") {
var date = dateValue1.split("/");
if (date[2].length != 4) {
var intyear = parseInt(date[2]);
if (intyear >= 30)
{

date[2] = parseInt(date[2]) + 1900;

}
else {
date[2] = parseInt(date[2]) + 2000;
}

}

var myDate = null;
try {

var myDate = new Date(parseInt(date[2])+ 0 , date[1] -1, parseInt(date[0]));

}
catch (err) {
myDate = null;
}
if (myDate != 'Invalid Date') {

$(date2).datepicker('setDate', myDate);
}

}

}

Abrar Kazi 5-Apr-17 7:37am

it is called as :

$("#txtdobclient").blur(function () {
PopulateFormateddate($("#txtdobclient").val(), $("#txtdobclient"));

});

Karthik_Mahalingam 5-Apr-17 7:42am

what is this logic ?
if (date[2].length != 4) {
var intyear = parseInt(date[2]);
if (intyear >= 30) {
date[2] = parseInt(date[2]) + 1900;
}
else {
date[2] = parseInt(date[2]) + 2000;
}
}

what is the date format ?

Karthik_Mahalingam 5-Apr-17 7:39am

what is dateValue1, date2 ?

Abrar Kazi 5-Apr-17 7:42am

dateValue1 : value of textbox in which date is selected
date2 : id of txtbox

Karthik_Mahalingam 5-Apr-17 7:42am

ok, what is the date format used in textbox?

Abrar Kazi 5-Apr-17 7:44am

@Html.TextBoxFor(m => m.dobclient, "{0:dd/MM/yyyy}", new { @id = "txtdobclient", @class = "DOB DefaultToolTip", @tabindex = 15, @data_toggle = "tooltip", @data_placement = "right" )

Karthik_Mahalingam 5-Apr-17 7:46am

what you are doing here

if (dateValue1 != "") {
var date = dateValue1.split("/");
if (date[2].length != 4) {
var intyear = parseInt(date[2]);
if (intyear >= 30)
{

date[2] = parseInt(date[2]) + 1900;

}
else {
date[2] = parseInt(date[2]) + 2000;
}

Abrar Kazi 5-Apr-17 7:51am

im checking if the value in textbox is not empty.
If it is not empty it will check if date[2] which is year of that date length is 4 eg 2001 if not it will go inside

Karthik_Mahalingam 5-Apr-17 7:53am

but why, in the textbox the year is displayed as 4 digit rite?
then it will never go inside only.

Abrar Kazi 5-Apr-17 7:56am

yes it wont. lets forget about the validation i commented it. still the year displayed is wrong. but the calendar displayed is right and on date selection it will display proper date i.e. 21/02/1995 but on year dropdown it will show 1917

Abrar Kazi 5-Apr-17 7:52am

even if i dont put validation above it will not work the same. assume there is no validation if i comment that function still id doesnt work so i doubt if validation msg has anything with it .

Karthik_Mahalingam 5-Apr-17 7:55am

this is what i have tried

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Datepicker - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            
            $('.DateOfBirth').datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'dd/mm/yy',
                defaultDate: new Date(),
                yearRange: "-100:+0"

            }); 
        }); 
    </script>
</head>
<body>

    <p>Date: <input class="DateOfBirth" type="text" id="datepicker"></p>


</body>
</html>

Abrar Kazi 5-Apr-17 7:57am

yes its exactly the same as my code dont know where i am going wrong

Karthik_Mahalingam 5-Apr-17 8:02am

try in a separate page

Abrar Kazi 5-Apr-17 8:09am

ok thanks a lot for the time will see what im missing. meanwhile if you think i m missing something and that reminds you do post a comment

Karthik_Mahalingam 5-Apr-17 12:41pm

sure, but i need to see the full code, then can i see from where the error occur.

Abrar Kazi 6-Apr-17 2:47am

i forgot to mention the textbox datepicker is in partial view does this have a problem ?

Karthik_Mahalingam 6-Apr-17 3:03am

does the partial view has js references?

Abrar Kazi 6-Apr-17 3:06am

no i guess. it just has this reference :

<script src="@Url.Content("~/Scripts/InputFieldFormat.js")">

Which reference am i missing ? and where should it be referenced in partial view or view

Karthik_Mahalingam 6-Apr-17 3:10am

remove this and check
<script src="@Url.Content("~/Scripts/InputFieldFormat.js")">

all reference should be in in main view

Abrar Kazi 6-Apr-17 3:13am

Did that, no it doesnt work.
also note the class above is used by multiple textboxes. could that be a reason ?

Karthik_Mahalingam 6-Apr-17 3:28am

i need to see to analyse

Abrar Kazi 6-Apr-17 3:17am

The month dropdown works perfectly, its just the year dropdown creating problem. Also i removed yearRannge attribute and tried still it doesnt work.
if yearRange = -100:+0 so 1917 is selected if i choose any year before 2000
if yearRange = -100:+100 so if i select 1950 it selects 2050 , if 1970 it selects 2070 and so on.

Karthik_Mahalingam 6-Apr-17 3:28am

if you help me reproducing the same issue from my side then i can give a solution to it..

Abrar Kazi 6-Apr-17 3:33am

ok i will give u my code here try it at your end :

Partial View :

@Html.TextBoxFor(m => m.dobclient, "{0:dd/MM/yyyy}", new { @id = "txtdobclient", @class = "DateOfBirth DefaultToolTip", @tabindex = 15, @data_toggle = "tooltip", @data_placement = "right" })

Script in Partial View :

$('.DateOfBirth').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
defaultDate: new Date(),
yearRange: "-100:+0"
});

View :

@Html.Partial("_PartialViewName", Model)

Karthik_Mahalingam 6-Apr-17 3:39am

ok i will chk

Karthik_Mahalingam 6-Apr-17 3:46am

tried your code, it works fine..
remove @class = "DateOfBirth DefaultToolTip", @tabindex = 15, @data_toggle = "tooltip", @data_placement = "right"
these attributes and check

Abrar Kazi 6-Apr-17 4:25am

i removed the above :

@Html.TextBoxFor(m => m.dobclient, "{0:dd/MM/yyyy}", new { @id = "txtdobclient" })

$('#txtdobclient').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
defaultDate: new Date(),
yearRange: "-100:+0"

});

didnt work

Karthik_Mahalingam 6-Apr-17 4:30am

Try with 1.12.1 and check

Abrar Kazi 6-Apr-17 6:25am

i tried it seperately in other project and it works fine there

Karthik_Mahalingam 6-Apr-17 6:46am

haan, then check why it is not happening in your current page.
you might be missing something

SrikantSahu 6-Apr-17 9:35am

Never seen such a long conversation to solve an issue. @Karthik, all the best

Karthik_Mahalingam 6-Apr-17 9:54am

Thank you Srikant :)
sometimes it happens
if you have any idea on this issue, pls do post your ideas on this.

Abrar Kazi 10-Apr-17 3:20am

Hi Karthik , theres a new discovery of possible problem found in this case i guess.

in my Layout Page these are the scripts :
<script src="@Url.Content("~/Scripts/jquery.1.11.3-min.js")">



jquery and jquery ui versions mismatch . could this be the reason ?

Karthik_Mahalingam 10-Apr-17 3:39am

Yes may be

Abrar Kazi 10-Apr-17 7:29am

I now updated jquery ui 1.11.3 to jquery 1.12.1 and it worked fine.
The only thing now i need to check is if the update on jquery doesnt affect any other operation wrt jquery as this website will go live with the change.

Thank u so much for your help. Cheers :)

Karthik_Mahalingam 10-Apr-17 8:03am

wow awesome, good. :)

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Abrar Kazi · Answer 1 · 2017-04-17T22:12:00

Solution 1

Update jquery. This is the only solution i found for this issue. Thanks to Karthik.

Posted 17-Apr-17 22:12pm

Abrar Kazi