How do I disable the 'click' event on each day from “Date Range Picker”?
I'm trying to prevent the 'click' event on each day of the DateRangePicker, I'm just trying to prevent users from changing the date range.
I created a 'pen' on Codepen, this is the link: https://codepen.io/jnts/pen/yQPwmB
HTML
<input data-start="16/11/2018" data-end="16/12/2018" type="text" name="dates">
Javascript
const self = $('input[name="dates"]')
self.daterangepicker({
applyButtonClasses: 'd-none',
showDropdowns: false,
opens: "center",
drops: "down",
autoApply: false,
startDate: self.data('start'),
endDate: self.data('end'),
minDate: self.data('start'),
maxDate: self.data('end'),
locale: {
format: "DD/MM/YYYY",
separator: " - ",
firstDay: 1
}
});
I've already tried to add the "disabled" attribute on the input, but this only prevent the 'click' event on the input, so the DateRangePicker does not appear.
I just wanna show the date range on a 'Read Only' kind of way.
javascript jquery date click daterangepicker
asked Nov 21 '18 at 13:38
Jônatas Filipe VieiraJônatas Filipe Vieira
61
add a comment |
I'm trying to prevent the 'click' event on each day of the DateRangePicker, I'm just trying to prevent users from changing the date range.
I created a 'pen' on Codepen, this is the link: https://codepen.io/jnts/pen/yQPwmB
HTML
<input data-start="16/11/2018" data-end="16/12/2018" type="text" name="dates">
Javascript
const self = $('input[name="dates"]')
self.daterangepicker({
applyButtonClasses: 'd-none',
showDropdowns: false,
opens: "center",
drops: "down",
autoApply: false,
startDate: self.data('start'),
endDate: self.data('end'),
minDate: self.data('start'),
maxDate: self.data('end'),
locale: {
format: "DD/MM/YYYY",
separator: " - ",
firstDay: 1
}
});
I've already tried to add the "disabled" attribute on the input, but this only prevent the 'click' event on the input, so the DateRangePicker does not appear.
I just wanna show the date range on a 'Read Only' kind of way.
javascript jquery date click daterangepicker
asked Nov 21 '18 at 13:38
Jônatas Filipe VieiraJônatas Filipe Vieira
61
add a comment |
I'm trying to prevent the 'click' event on each day of the DateRangePicker, I'm just trying to prevent users from changing the date range.
I created a 'pen' on Codepen, this is the link: https://codepen.io/jnts/pen/yQPwmB
HTML
<input data-start="16/11/2018" data-end="16/12/2018" type="text" name="dates">
Javascript
const self = $('input[name="dates"]')
self.daterangepicker({
applyButtonClasses: 'd-none',
showDropdowns: false,
opens: "center",
drops: "down",
autoApply: false,
startDate: self.data('start'),
endDate: self.data('end'),
minDate: self.data('start'),
maxDate: self.data('end'),
locale: {
format: "DD/MM/YYYY",
separator: " - ",
firstDay: 1
}
});
I've already tried to add the "disabled" attribute on the input, but this only prevent the 'click' event on the input, so the DateRangePicker does not appear.
I just wanna show the date range on a 'Read Only' kind of way.
javascript jquery date click daterangepicker
asked Nov 21 '18 at 13:38
Jônatas Filipe VieiraJônatas Filipe Vieira
61
I'm trying to prevent the 'click' event on each day of the DateRangePicker, I'm just trying to prevent users from changing the date range.
I created a 'pen' on Codepen, this is the link: https://codepen.io/jnts/pen/yQPwmB
HTML
<input data-start="16/11/2018" data-end="16/12/2018" type="text" name="dates">
Javascript
const self = $('input[name="dates"]')
self.daterangepicker({
applyButtonClasses: 'd-none',
showDropdowns: false,
opens: "center",
drops: "down",
autoApply: false,
startDate: self.data('start'),
endDate: self.data('end'),
minDate: self.data('start'),
maxDate: self.data('end'),
locale: {
format: "DD/MM/YYYY",
separator: " - ",
firstDay: 1
}
});
I've already tried to add the "disabled" attribute on the input, but this only prevent the 'click' event on the input, so the DateRangePicker does not appear.
I just wanna show the date range on a 'Read Only' kind of way.
javascript jquery date click daterangepicker
javascript jquery date click daterangepicker
asked Nov 21 '18 at 13:38
Jônatas Filipe VieiraJônatas Filipe Vieira
61
asked Nov 21 '18 at 13:38
Jônatas Filipe VieiraJônatas Filipe Vieira
61
asked Nov 21 '18 at 13:38
Jônatas Filipe VieiraJônatas Filipe Vieira
61
asked Nov 21 '18 at 13:38
Jônatas Filipe VieiraJônatas Filipe Vieira
61
asked Nov 21 '18 at 13:38
Jônatas Filipe VieiraJônatas Filipe Vieira
61
61
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Adding pointer-events: none to an element with CSS will prevent any click events firing from that element. To disable click events on the open calendar, add the following to your stylesheet:
.drp-calendar {
pointer-events: none;
}
See forked code here: https://codepen.io/sungaila/pen/rQJOMQ
answered Nov 21 '18 at 14:01
SungailaSungaila
537
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53413316%2fhow-do-i-disable-the-click-event-on-each-day-from-date-range-picker%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Adding pointer-events: none to an element with CSS will prevent any click events firing from that element. To disable click events on the open calendar, add the following to your stylesheet:
.drp-calendar {
pointer-events: none;
}
See forked code here: https://codepen.io/sungaila/pen/rQJOMQ
answered Nov 21 '18 at 14:01
SungailaSungaila
537
add a comment |
Adding pointer-events: none to an element with CSS will prevent any click events firing from that element. To disable click events on the open calendar, add the following to your stylesheet:
.drp-calendar {
pointer-events: none;
}
See forked code here: https://codepen.io/sungaila/pen/rQJOMQ
answered Nov 21 '18 at 14:01
SungailaSungaila
537
add a comment |
Adding pointer-events: none to an element with CSS will prevent any click events firing from that element. To disable click events on the open calendar, add the following to your stylesheet:
.drp-calendar {
pointer-events: none;
}
See forked code here: https://codepen.io/sungaila/pen/rQJOMQ
answered Nov 21 '18 at 14:01
SungailaSungaila
537
Adding pointer-events: none to an element with CSS will prevent any click events firing from that element. To disable click events on the open calendar, add the following to your stylesheet:
.drp-calendar {
pointer-events: none;
}
See forked code here: https://codepen.io/sungaila/pen/rQJOMQ
answered Nov 21 '18 at 14:01
SungailaSungaila
537
answered Nov 21 '18 at 14:01
SungailaSungaila
537
answered Nov 21 '18 at 14:01
SungailaSungaila
537
answered Nov 21 '18 at 14:01
SungailaSungaila
537
537
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53413316%2fhow-do-i-disable-the-click-event-on-each-day-from-date-range-picker%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
