Set Max number of options displayed in DatePicker

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Set Max number of options displayed in DatePicker

Jonathan Yates pro asked 8 years ago

Hi, I need the DatePicker to display a wide range of dates to select date of birth, therefore I have specified selectYears = 100 as this will give me 50 years in the past. However this produces a list of options that spans the whole height of the page and doesn't look good. How do I specify the max number of options that can be displayed at any one time? Normally I would use the 'size' attribute of the select. Also is it possible to get the datapicker to show only years in the past as it does not make sense to display years in the future for things like date of birth?

Kamil Paciepnik answered 8 years ago

Hi Jonathan Yates, If You want to narrow the date range, try to use this code: 
$('.datepicker').pickadate({
  min: new Date(2015,3,20),
  max: new Date(2015,7,14)
})
Can You show me Your code? Then I can help You solve the problem of stretching. Regards

Jonathan Yates pro answered 8 years ago

Hi, It's not the date range I want to narrow. It's the number of years shown in the year picker. As described above if I set the selectedYears = 100 it produces a list that spans the full height of the screen which doesn't look good. How do I specify the max number of years displayed at any one time? Normally I would use the ‘size’ attribute of the select.

Kamil Paciepnik answered 8 years ago

Jonathan, I'm sorry, but I can not recreate your problem. Could you please share your code?

Jonathan Yates pro answered 8 years ago

Hi, Just coming back to this now as I really need to sort this out. Just to recap. Date of Birth is a very common scenario for Date Picker where the Year range needs to be very large. i.e. People born 90 years ago will need to be able to select a year 90 years previous. But if I set the selectYears option to say 100, so that I get 50 years before and 50 year after the current year (which actually is not ideal for a date of birth) then the Year select input options span the whole height of the browser because there are so many of them. Normally you can limit the number visible options using 'size' on the input. But the Year select input just shows a maximum options to fill the browser height. (See Screenshot). https://xamarinforms.files.wordpress.com/2017/02/screen-shot-2017-02-27-at-23-33-32.png What is really needed for Date of Birth (again I say this is a very common usage of a DatePicker so should be possible), is to be able to set how many previous years to show (not future years) and to limit the number of visible options to a sensible number (configurable). Without this the DatePicker you provide is of little use for Date of birth.

Kamil Paciepnik answered 8 years ago

Hi Jonathan Yates, I think that answers your questions about the scope of dates can be found here. If you still have any problems, please write me. I am happy to answer your questions. Regards

Jonathan Yates pro answered 8 years ago

Hi, The stackoverflow link you send me has nothing to do with this issue. Please can you reply with a correct answer?

Jonathan Yates pro answered 8 years ago

In fact the link does not even relate to your DatePicker. All I want to be able to do is to select a year going back to say 1920 or something. But for the visible number of year options to be limited to say 15, and be able to scroll through them. It's a very basic requirement of a DatePicker.

Jonathan Yates pro answered 8 years ago

Something more like this which does the job beautifully. http://t00rk.github.io/bootstrap-material-datetimepicker/

Kamil Paciepnik answered 8 years ago

I'm sorry, I did not understand until the end of the problem. If you have any further questions, please write to me. Code: 
$('.datepicker').pickadate({
    min: -50, //the number of days from the current date
    max: +7 //the number of days from the current date
})
Regards

Jonathan Yates pro answered 8 years ago

The code in your reply does not solve this issue at all. setting min: -50, as your comment sates, merely sets the number of days from the current date to 50 days ago. How is this solving the issue of showing dates going back to 1920 ??? Are you reading my posts correctly? I don't know how I can explain it more clearly, but you are not understanding the issue at all. Perhaps I can set you a task and see if you can carry it out. For a person born in 19 July 1950 please can you try to select this date using your DatePicker? I bet you can't without setting 'selectYears' to at least 134 !!! And then you will see that the Year select options overflow to the whole page height as in the following screenshot: https://xamarinforms.files.wordpress.com/2017/02/screen-shot-2017-02-27-at-23-33-32.png Simply not usable for realistically selecting dates in the real world. Please please please can you reply with a correct reply. Even admit that it is a bug. But please don't sent ridiculous solutions. Sorry for the rant, but I'm getting a bit fed up with a lack of positive replies.

Jonathan Yates pro answered 8 years ago

Btw, the select options spanning the whole page appears to be an issue with Chrome on Mac. Please test on mac.

Kamil Paciepnik answered 8 years ago

If you want to reduce the height of active field, please show me your code. By default, select have a scroll. http://screenshot.sh/n9FiCK4MfXIOI Regards

Jonathan Yates pro answered 8 years ago

Doesn't work on Mac Chrome https://xamarinforms.files.wordpress.com/2017/02/screen-shot-2017-02-27-at-23-33-32.png

Jonathan Yates pro answered 8 years ago

Also why are the Year and Month Selects not using Material Select to be consistent with Material Design. They look really odd with your design.

sysadmin pro answered 8 years ago

Jonathan, Seems like its a MacOS UX decision with how it doesn't natively restrict the dropdown height. So it's not just limited to Mac Chrome. JS fiddle to reproduce your Mac problem: https://jsfiddle.net/ah0zrdxf/ You can report the issue with pickadate https://github.com/amsul/pickadate.js and see if anyone has solved this problem with overcoming this Mac issue. MDB is just simply a CSS reskin of that plugin. You'll also find all the documentation and API you need there to get familiar with the plugin. Anyways small snippet to help you get you closer. `var minYear = new Date(); minYear.setFullYear(new Date().getFullYear()-120); var maxYear = new Date(); maxYear.setFullYear(new Date().getFullYear()-18); $(document).ready(function(){ $('.datepicker').pickadate({ min: minYear, max: maxYear, selectYears: 120 // default is 10 }); }); And although the styling isn't using MD selects, you may want to avoid it if you want it to be web accessible/Section 508 compliant. Ps. I'm not affiliated with MDB.

Kamil Paciepnik answered 8 years ago

Jonathan Yates, At the moment MDB not style native select - each system has a different. As for the material select, I think you can try to initialize it to the date picker if you want. I can help you. Regards

Jonathan Yates pro answered 8 years ago

I can restrict the height of the Material Select using and maxHeight and this works on Mac. But as confirmed above restricting the height of a standard select used in your DatePicker does not work on Mac. It would be much better if your Date Picker used the Material Select styling as this would fix this issue and also make the styling more consistent with Material Design. Please could you provide an example on how to initialize the date picker to use material select for both the year and month selects?

Kamil Paciepnik answered 8 years ago

Jonathan Yates, Currently we do not have solutions for initialization material select a date picker. In the future, we probably this change. At this moment you have to try to do it on your own. Regards

WiseGuy pro premium priority answered 4 years ago

Here is a solution. Maybe is not perfect, but at least works while MDB get the solution

$('.datepicker').pickadate();
    var minyear = 1920; //Your minimum year
    var maxyear = 2050; //Your maximum year
    $('.picker__select--year').children('option').remove(); // remove default values

    for (var i = minyear; i <= 2050; i++) { 
        var o = new Option(i, i);
        $(o).html(i);
        $('.picker__select--year').append(o);
    } // this rebuild the dropdown year

Krzysztof Wilk staff commented 4 years ago

Hi!

Thanks for the solution! There's been a lot of changes since this thread was made, so now you can try this - https://mdbootstrap.com/docs/jquery/forms/date-picker/#date-limits

If you have any other questions about the datepicker, please create a new thread :)

Best regards
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Jonathan Yates
Pro User
12Support score
9Questions 22Answers
0Snippets likes 0Snippets