Tempus-dominus: How to disable the display of decades

[ybandura]

[abellina]

+1 I'd like to know this too

[bertoost]

+1 yeah! I want to remove this too.. how??

[RomeroMsk]

+1
And why they called decades, if they consist of 12 years? Decade is 10 years, isn't it?

[Eonasdan]

yes a decade is 10 years, but the year picker displays 12 years

[RomeroMsk]

@Eonasdan, so why do you call it decade then? I don't know how to translate it to Russian (in tooltips) :)

[AndreyKol]

+1

[Eonasdan]

I don't see a reason to remove this or hide it.

@RomeroMsk as I mentioned before the years picker shows 12 years. If I didn't show 12 years on the decade view you all you be complaining about that too.

This feature closely emulates Telerik's datepicker: http://demos.telerik.com/kendo-ui/datepicker/index

[ybandura]

Nobody asks from fully removed, you can simply render settings. I think this option will suit all.

[RomeroMsk]

Telerik's datepicker uses 10-years decades.
You can show any number of years, not a problem. But this is not decades, this is 12-year periods :)

We are asking for an option to hide this view, not removing.

[crypticshell]

@abellina @bertoost ...if it's for the widget display, change the currentViewMode Math.min value for 3 to 2 under ShowMode in the datetimepicker.js

showMode = function (dir) {
if (!widget) {
return;
}
if (dir) {
// Limit datepicker maximum navigation level to year selection (for decade, change value to 3)
currentViewMode = Math.max(minViewModeNumber, Math.min(2, currentViewMode + dir));
}
widget.find('.datepicker > div').hide().filter('.datepicker-' + datePickerModes[currentViewMode].clsName).show();
},

[RomeroMsk]

@crypticshell, I know, how to do this in plugin code. But I don't want to modify it.
Still can't understand, why @Eonasdan don't want to add an option for this.

[crypticshell]

@RomeroMsk...ah well, as long as it helps someone else that's fine. Best reasons know to @Eonasdan .

[cosmohdx]

+1
it would be enough to give an option to disable.. So if anybody want this it would be possible.

[RomeroMsk]

Created new issue.

[mkraft]

This should be added as an option.

[leondobnik]

This would come very handy to us too!

[RomeroMsk]

@Eonasdan, what are the reasons to ignore this feature request? So lot of us are voting for this.

[RomeroMsk]

Ok, guys, here is the workaround. You can change styles for switcher either in your css (like in fiddle) or in JS (commented lines).
Maybe someone has a better solution?

[rhyudek1]

@Eonasdan I have a reason why I need to hide the selection of decades, if you have configured in the options

minDate: '01/01/2013'
maxDate: moment()

if the user presses the selection decades. the calendar will not let him select nothing and will have to refresh the page to fix it.

regards

[yorgo79]

hey @rhyudek1, i had the same issue as you did. my allowed date range made it so when i clicked back to the "decade" selector, everything was disabled... forcing me to refresh the browser to reset.

my fix... i simply just hid it using the following CSS:

.bootstrap-datetimepicker-widget .datepicker-years thead,
.bootstrap-datetimepicker-widget .datepicker-years .disabled {
  display: none;
}

in the image above, the left screen is the month selector. when clicking 2015 at the top, you get taken to the year selector (right screen). from that screen, the CSS i added hides all the disabled years and the header which allowed you to get to the decade selections.

i guess you don't necessarily need to hide the disabled years, the thead is what you really want to hide.

[votiv]

@RomeroMsk Ty for the workaround, works fine for me.
Still waiting for this to be an option...

[ankurgupta1401]

You can disable the decade view by making changes to bootstrap-datetimepicker.js. All you have to do is open bootstrap-datetimepicker.js in editor -

1. Find and comment the line "yearsViewHeader.eq(1).attr('title', options.tooltips.selectDecade);" (without quotes).
2. Just below the line "yearsView.find('.disabled').removeClass('disabled'); " add the line "yearsViewHeader.eq(1).addClass('disabled');" (without quotes).

You can find more elaborated steps at this link

[lesilent]

Since I was trying to avoid a js workaround, I took the css from @yorgo79 and tweaked it slightly. I didn't need to hide decade selector, just disable the click for it.

.bootstrap-datetimepicker-widget .datepicker-years thead .picker-switch {
     cursor: default;
     pointer-events: none;
}

This seems to work in the major browsers.

[frontenddeveloping]

+1 for this issue

[prsevero]

+1

[tomheathershub]

+1

[felipeandres254]

My solution with jQuery:
$(".bootstrap-datetimepicker-widget [title='Select Decade']").removeAttr("data-action");

[slawa-dev]

I switched to @uxsolutions https://github.com/uxsolutions/bootstrap-datepicker which supports configuring 'view mode'.
Another reason was this project here does not have localization files for the tooltips.

[MitchTalmadge]

"I don't see a reason to remove this or hide it."

That's cool, a whole bunch of other people see a reason though. Maybe you should listen to them instead of just deciding that nobody will ever need this.

Anyway I just ended up doing this:

th.picker-switch[title="Select Decade"] {
    pointer-events: none;
}

[tschallacka]

Really... 12 year decades for a stupid reason?
decades go by tens. i found where it calculate the decades and changed it to tens, that was easy, still trying to find the years display in which decade it shows.

It's a stupid UX decision that goes against all logic of users. People expect 1910 - 1919, 1920 - 1929, or 1911 - 1920, 1921 - 1930. They don't expect 1937 - 1948, it's illogical and the brain isn't used to that pattern.

Change it please.