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?
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
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
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?
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,
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.
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.
Doesn't work on Mac Chrome
https://xamarinforms.files.wordpress.com/2017/02/screen-shot-2017-02-27-at-23-33-32.png
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
Btw, the select options spanning the whole page appears to be an issue with Chrome on Mac. Please test on mac.
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.
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
Something more like this which does the job beautifully.
http://t00rk.github.io/bootstrap-material-datetimepicker/
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.
Hi,
The stackoverflow link you send me has nothing to do with this issue.
Please can you reply with a correct answer?
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
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.
Jonathan,
I'm sorry, but I can not recreate your problem. Could you please share your code?
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.
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
