Disable all dates in datetime range picker - javascript

I am using a datetime range picker as given here. In some scenarios, I need only start-time and end-time dropdowns. Is it possible to disable all dates shown in the calendar or hide the calendar? I also want to remove the label displayed before the "Cancel" and "Apply" buttons. Does anyone know how to do this?

According to official doc
autoApply: (true/false) Hide the apply and cancel buttons, and automatically apply a new date range as soon as two dates are clicked.
show.daterangepicker: Triggered when the picker is shown
$('#daterangepicker').daterangepicker({
"autoApply": true,
}).on('show.daterangepicker', function (ev, picker) {
picker.container.find(".calendar-table").hide();
});

I am using JQuery to hide the calendar but not sure whether this is the right way to do it.
# Hide Calendar
$(".calendar-table").hide();
# Hide label that is displayed before "Cancel" and "Apply" buttons.
$(".drp-selected").hide();

Related

Keyboard navigation on react data grid custom editor with semantic ui calendar date picker

Goal: Enable keyboard navigation for the Semantic calendar date picker work with react data grid custom editor
Built Demo: Third column for date picker
https://codesandbox.io/embed/8l4jkor19
Current behavior:
double click on date cells pop up the calendar
press keyboard arrow keys and the selected cell were changed,
calendar disapears
Wanted behavior:
double click on date cell pop up the calendar
press Keyboard arrow keys that navigates on calendar dates and press enter to select
Official Examples: first input cell
https://arfedulov.github.io/semantic-ui-calendar-react/
Question:
Does anyone encountered the similar situation? Not exactly know where the problem occurs and how to investigate. Many thanks
It happens because you lose focus from the dom node.
try using the following code inside you custom editor.
getInputNode = () => {
// eslint-disable-next-line react/no-find-dom-node
return ReactDOM.findDOMNode(your calender id selector);
}

I don't want datetimepicker setting default value on click

I have a text input to which I have applied a DateTimePicker plugin
But when I click on the input before opening the DateTimePicker, it sets default value as current date, I want the value to stay empty as long as the user selects it from the DateTimePicker.
$('.datepicker').datetimepicker({
format: 'DD/MM/YYYY',
});
The DateTimePicker Library which i am using is:
eonasdan.github.io/bootstrap-datetimepicker
I have mentioned the answer in the comments above but just posting it as an Answer for someone who might face the same issue in the future
Initialize the DateTimePicker with useCurrent as false as shown below:
$('.datepicker').datetimepicker({format: 'DD/MM/YYYY',useCurrent:false});

unable to reset the values back to the originally selected values

I am working on bootstrap datepicker, i have a Reset and submit buttons on the datepicker.
I want to implement the Reset button functionality to one of the buttons on the datepicker.When user selects the new date range from the calendar and click on Reset button, the previously (originally) selected values should be highlighted and the newly selected values should be cleared.
Please find the code demo here
Initially when clicked in the Select Date filed, a calendar is opened and dates 04/23/2017 as start date and 06/07/2017 date as end date are selected.When user selects other date range , the newly selected dates are highlighted. When user click on Reset button, again it has to show the originally selected dates (04/23/2017 and 06/07/2017) highlighted( basically we are clearing off the newly selected values so that user can select other date range).
I have gone through the API but unable to get the expected output.
I tried something as below
$('#reportrange').daterangepicker({
locale: { cancelLabel: 'Reset' }
});
$('#reportrange').on('cancel.daterangepicker', function(ev, picker) {
//do something, like clearing an input
$('#reportrange').val('');
});
I was having similar trouble and the following worked for me:
$('#datepicker').val('').datepicker('update');
Both method calls were needed, otherwise it didn't clear.

Get the de-selected date from bootstrap datepicker

I'm trying to run two different methods when date select and de-select event changes, with enabled multidate option.
I could get the correct date on select with 'changeDate' event.
$(".calendar").on('changeDate', function(ev) {
console.log(ev.date);
});
But when I de-select the same date, it returns a wrong date for ev.date.
(Returns next or previous selected date)
Is there any way to get the correct date when it get de-selected?
As per the specs, clearDate event is fired only when clearBtn:true is enabled and you click on clear button. You can also call
$('#calendar').val('').datepicker('update');
to manually trigger the clearDate event.
I am able to get the event triggered successfully but unfortunately it is not giving any information about what date was cleared.
UPDATED SOLUTION
I have written code to maintain the date deselected by keeping the records of dates selected in changeDate event. Here is the fiddle:
http://fiddle.jshell.net/128xorks/6/

AngularUI Bootstrap Datepicker date deselection

I'm using the UI-Bootstrap Datepicker inline for date selection, as shown below.
<datepicker ng-model="profile.available_from" show-weeks="true"></datepicker>
I would like to enable the user to deselect the currently selected date by clicking the same date again.
Eg. the user clicks 29 May 2015, the corresponding tile is highlighted and profile.available_from is updated with the value. If the user now clicks that same date again, the selection highlight should be removed and profile.available_from is set to undefined/null.
Any ideas?
I guess this is not possible without modifying the original source code of datepicker.
It would have to check if the field already has the selected value, and if yes, then clear it. Which would complicate the code with no obvious benefit.
I would add clear button instead.
example code (taken from http://angular-ui.github.io/bootstrap/#/datepicker)
$scope.clear = function () {
$scope.profile.available_from = null;
};

Categories

Resources