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.
Related
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();
I have one text box and the user clicks on it then it's showing a dropdown list for old values.
Is there any workaround to change the date format from dd/mm/yyyy to dd-MMM-yyyy for cache values after the text box click event fired?
This is my first question.
I have looked for an answer but my searches seem to bring back a lot of ways to enforce the datepicker value is empty, or being able to access the selected value which is not an option here.
Background to the problem
I have a table with a dynamic amount of rows, each row contains a few datepickers (we'll call them A datepicker, B datepicker, C datepicker). It also contains a child row that is hidden until the 'Expand for more details' button is clicked, at which point there are a few more fields appearing. One of those fields is a 'Comments' field.
The requirement I have is that when the A datepicker is changed that a 'Comment' MUST be required to go along with that. I am able to tell when the datepicker is changed and therefore to send a message via the validator of the 'Comments' telling the user that it is now required.
The requirement
When entering details into the comments section, I need to be able to check if there is a date selected in the A datepicker so that we can dynamically warn the user that the comments section needs to be X many characters IF there is a date in the A datepicker.
The problem
It appears that when the jQuery datepicker is changed that the .value is not updated. When the row is populated it is possible that the A datepicker can be empty, not all fields require that particular date to be set and therefore not all 'Comment' fields need to be set either.
So I can tell when the datepicker is changed and get the 'Comments' field to be required. However a user can then fill out the 'Comments' field with a blank entry or enter a value that doesn't meet the X amount of characters limit. This behaviour is OK for when there is not a date selected. So when a date is selected I need to enforce the rule.
My problem is that I can't tell if a date is selected or not!
In the example below I had a blank datepicker, I then chose a date and opened developer tools. In the overview of the web page we can see that the date is set to 20th Jan 2018.
Overview of the web page
however through the developer tools we can see that the value is actually empty.
Datepicker value is set to ""
This behaviour is also true when the datepicker was not initially blank, rather than the value being the new date it still retains the old date. In the example below I changed the date from the 23rd of December 2017 to the 31st of December 2017.
Pre-Populated datepicker
And in developer tools the value is still set to the previous value.
Changed to new date
Technicalities
I am using MVC and jQuery, I am not looking for a solution that involves having to go back to the controller as that usually requires the user having to press a submit button and my requirement is that it needs to be able to respond upon selecting the date and entering comments. I'd just like a way to be able to get the displayed date from the datepicker and not it's previous value.
This matters because if it's going from previously having a date into now a blank date, it affects the requirement so that comments are no longer required as there isn't a date. Vice versa if going from a blank date to a selected date.
Things I have tried
I am trying to write this into the OnChange method of 'Comments', so that I can check if there is a date selected or not.
I have tried directly calling it in my .js file with the below. For option 4 and 5 it's contained in a .each loop that goes through ALL the rows in my table and finds the row relating to the 'Comments' field that was changed.
(Please note that parentRow refers to the selected table row which contains the dates (the row that contains the comments field is the child row)).
1) var dateValue = $(parentRow).find("input[name$='datepicker_A']").datepicker("getDate");
2) var dateValue = $(parentRow).find("input[name$='datepicker_A']").val();
3) var datepicker_A = document.getElementById('datepicker_A');
var dateValue = datepicker_A.val();
4) var dateValue = $.datepicker.parseDate("d/M/y", $(this).find("input[name$='datepicker_A']").val());
5) var dateValue = $(this).find("input[name$='datepicker_A']").val();
All of the above return the previous value of the datepicker and not the newly selected one. So my question is.. how do I get it to recognise the new value?
TL:DR
jQuery datepicker doesn't seem to change the .val() property of the input field when selecting a new date, instead the .val() is always the previous value. How can I access the new value via javascript/jQuery?
Your code should look something like this:
<div>
Select date: <input id="thedate" type="text" class="date-pick" />
</div>
And your JavaScript (I am using jQuery 1.9.1 with jQuery UI 1.9.2 here too)
$(function() {
$('.date-pick').datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(dateText, inst) {
alert(dateText); // Put your code in here
}
});
});
Here's a JsFiddle
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/
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;
};