Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom year range in date picker (Date field) #12

Open
kubajal opened this issue Jan 4, 2021 · 0 comments
Open

Custom year range in date picker (Date field) #12

kubajal opened this issue Jan 4, 2021 · 0 comments

Comments

@kubajal
Copy link

kubajal commented Jan 4, 2021

Hi,
something which really frustrates me in FormTools 3.0.20 is the fact that by default date pickers (Date field types) have some absurd date span. So I want to share with my own solution on how to set year range in your date picker and also ask if anyone knows a better solution. My solution is not the most elegant (because it uses window.onload but works nonetheless and let's the admin set the year range of date pickers to the desired value.

My solution goes like this:

  1. install Custom Fields module (I tested it with version 2.1.0)
  2. create a copy of the Date type
    image
  3. select the new field type, go to Settings and create a new setting for year range:
    image
  4. now go to Displaying > Edit field and modify it in the following way (first few lines set correct CSS classes so code from the original date type won't overwrite what we set up here and the last few lines actually update the date range of the date picker to the one we will set in the settings):
{assign var=class value="fixeddate"}
{if $display_format|strpos:"datetime" === 0}
  {assign var=class value="fixeddatepicker"}
{/if}

[...]

{if $comments}
    <div class="cf_field_comments">{$comments}</div>
  {/if}
</div>
<script>
window.onload = function(){
$( ".fixeddate" ).datepicker( "option", "yearRange", "{$yearRange}" );
$( ".fixeddatepicker" ).datepicker( "option", "yearRange", "{$yearRange}" );
};
</script>
  1. go to Displaying > Javascript and modify the following lines:
  • replace $(".cf_datepicker").each(function() { with $(".fixeddate").each(function() {
  • replace $(".cf_datetimepicker").each(function() { with $(".fixeddatepicker").each(function() {
  1. now you can set you own year range when creating a new field
    image
  2. this is how that field looks on the form
    image
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant