# Allowing User to select year and month in datepicker

**URL:** <https://forums.knack.com/t/allowing-user-to-select-year-and-month-in-datepicker/8003>\
**Category:** API & Custom Code\
**Created:** [December 30, 2014, 9:26am UTC](https://forums.knack.com/t/allowing-user-to-select-year-and-month-in-datepicker/8003 "2014-12-30T09:26:36Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![RajuKhadgi46121](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@RajuKhadgi46121](https://forums.knack.com/u/RajuKhadgi46121)\
**Post date:** [December 30, 2014, 9:26am UTC](https://forums.knack.com/t/allowing-user-to-select-year-and-month-in-datepicker/8003/1 "2014-12-30T09:26:36Z")

</div>

Hi,

In JQuery there is option to allow user to pick year and month.

Is it possible to allow this?

In Jquery we have somthing like this.

$(".a.date").datepicker({

changeMonth: true,

changeYear: true,

yearRange: 'c-20:c+30'

});

Looking ahead to hearing back.

thanks,

Raju

---

<div class="post-metadata">

**Author:** ![JonEvans85068](https://avatars.discourse-cdn.com/v4/letter/j/ecccb3/32.png) [@JonEvans85068](https://forums.knack.com/u/JonEvans85068)\
**Post date:** [August 14, 2015, 2:57am UTC](https://forums.knack.com/t/allowing-user-to-select-year-and-month-in-datepicker/8003/2 "2015-08-14T02:57:16Z")

</div>

Awesome!!! Thanks! Works perfectly for birth date especially!

---

<div class="post-metadata">

**Author:** ![RajuKhadgi46121](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@RajuKhadgi46121](https://forums.knack.com/u/RajuKhadgi46121)\
**Post date:** [July 17, 2015, 7:28am UTC](https://forums.knack.com/t/allowing-user-to-select-year-and-month-in-datepicker/8003/3 "2015-07-17T07:28:25Z")

</div>

glad it works for you

---

<div class="post-metadata">

**Author:** ![EnricoBise96679](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/enricobise96679/32/172_2.png) [@EnricoBise96679](https://forums.knack.com/u/EnricoBise96679)\
**Post date:** [July 15, 2015, 3:15pm UTC](https://forums.knack.com/t/allowing-user-to-select-year-and-month-in-datepicker/8003/4 "2015-07-15T15:15:42Z")

</div>

I do see it now and I am Happy can't thank you enough winner !!!

---

<div class="post-metadata">

**Author:** ![RajuKhadgi46121](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@RajuKhadgi46121](https://forums.knack.com/u/RajuKhadgi46121)\
**Post date:** [July 14, 2015, 4:53pm UTC](https://forums.knack.com/t/allowing-user-to-select-year-and-month-in-datepicker/8003/5 "2015-07-14T16:53:16Z")

</div>

You will see something like below once you change the javascript.

![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/5027883665/original/blob1436892745713.png?1436892751)

---

<div class="post-metadata">

**Author:** ![RajuKhadgi46121](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@RajuKhadgi46121](https://forums.knack.com/u/RajuKhadgi46121)\
**Post date:** [July 14, 2015, 4:51pm UTC](https://forums.knack.com/t/allowing-user-to-select-year-and-month-in-datepicker/8003/6 "2015-07-14T16:51:36Z")

</div>

Enrico,

Javascript that I have posted earlier was for a specific control only which has class "a". Do not worry, if you are not familiar with JQuery syntax.

I just looked into your test page, if you are looking for setting default for all datepicker, you can do as follow.

Here's the full javascript code

------------------------

$(document).on('knack-page-render.any'

, function(event, scene) {

$.datepicker.setDefaults({changeMonth: true,changeYear: true, yearRange: 'c-10:c+40'});

});

------------------------

---

<div class="post-metadata">

**Author:** ![EnricoBise96679](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/enricobise96679/32/172_2.png) [@EnricoBise96679](https://forums.knack.com/u/EnricoBise96679)\
**Post date:** [July 14, 2015, 1:16pm UTC](https://forums.knack.com/t/allowing-user-to-select-year-and-month-in-datepicker/8003/7 "2015-07-14T13:16:53Z")

</div>

Must be me I guess, or that i can't see it, am using Chrome latest also Tried FF

![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/5027840954/original/blob1436879408248.png?1436879411)

  

![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/5027841059/original/blob1436879451356.png?1436879453)

Saved after inserting 

[https://beikebiotech.knackhq.com/agetst#home/](https://beikebiotech.knackhq.com/agetst#home/)

![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/5027842381/original/blob1436879788094.png?1436879790)

---

<div class="post-metadata">

**Author:** ![RajuKhadgi46121](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@RajuKhadgi46121](https://forums.knack.com/u/RajuKhadgi46121)\
**Post date:** [July 12, 2015, 6:05pm UTC](https://forums.knack.com/t/allowing-user-to-select-year-and-month-in-datepicker/8003/8 "2015-07-12T18:05:47Z")

</div>

Enrico,

It works, please make sure you added this code under API&Code \> Javascript. You have to call it when page renders.

Here's the full javascript code

------------------------

$(document).on('knack-page-render.any'

, function(event, scene) {

$(".a.date").datepicker('option',{

changeMonth: true,

changeYear: true,

yearRange: 'c-20:c+30'

});

});

------------------------

---

<div class="post-metadata">

**Author:** ![EnricoBise96679](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/enricobise96679/32/172_2.png) [@EnricoBise96679](https://forums.knack.com/u/EnricoBise96679)\
**Post date:** [July 12, 2015, 5:54pm UTC](https://forums.knack.com/t/allowing-user-to-select-year-and-month-in-datepicker/8003/9 "2015-07-12T17:54:41Z")

</div>

no longer seems to work, only can select months

---

<div class="post-metadata">

**Author:** ![RajuKhadgi46121](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@RajuKhadgi46121](https://forums.knack.com/u/RajuKhadgi46121)\
**Post date:** [December 30, 2014, 9:44am UTC](https://forums.knack.com/t/allowing-user-to-select-year-and-month-in-datepicker/8003/10 "2014-12-30T09:44:28Z")

</div>

I am able to fix this

corrected javascript is

$(".a.date").datepicker('option',{

changeMonth: true,

changeYear: true,

yearRange: 'c-20:c+30'

});