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/
Related
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.
I have an input that allows a user to either type or select a date via the uib-datepicker calendar (https://angular-ui.github.io/bootstrap/). When the user clicks on the input the datepicker pops-up allowing a user to make a selection Here is the input:
<input
datepicker-append-to-body="calendarCtrl.appendToBody"
uib-datepicker-popup="calendarCtrl.dateFormat"
ng-model="calendarCtrl.ngModel"
ng-click="calendarCtrl.open"/>
I need to allow the option for the user to not update the ng-model until the user has blurred the input. To do that I am trying to use ng-model-options.
ng-model-options={updateOn: 'blur'}
This works great for when a user types a date into the input - the ngModel is not updated until a blur occurs and any validation isn't ran until blur. The problem is it breaks the functionality of the calendar popup in that nothing happens when a user then clicks on the open calendar to select a date. I'm assuming because when the user clicks on the calendar essentially a blur event is occurring on the input??
Has anyone came across this problem? Is there an ng-model-options option or something within the datepicker that would allow the user to still make a selection from the datepicker but not update the ng-model until a blur occurred on the input?
Thanks
Sounds like you could use a temporary property ng-model="calendarCtrl.tempSelectedDate" for ngModel in the Date Picker.
Then use the ngBlur event (https://docs.angularjs.org/api/ng/directive/ngBlur) to update the real property ie. set calendarCtrl.ngModel = calendarCtrl.tempSelectedDate.
Also, while nothing stops you using the scope property calendarCtrl.ngModel in ngModel, the code will be easier to read if you use more meaningful names like ng-model="calendarCtrl.dateSelected".
Here's a working demo http://plnkr.co/edit/90mDPqzadjPt09Tp4SlI?p=preview.
I forked and expanded someone else's datepicker plnkr with two changes: adding ng-blur="blurDate = startDate" to the <input> & displaying the value with Blur Date: {{ blurDate }}.
I came across a datatimepicker plugin
I am trying to use it in a small app that I am working on. I need to be able to enable a button after a user selects data from the picker.
What method would use to trigger some logic after the datetime was selected
You could bind an event to your form input element to fire when it changes.
('#date').datetimepicker({
...
onChangeDateTime: function(dp,$input){
alert($input.val())
}
...
});
Within the handler function you will probably want to implement some kind check to ensure that the value is what you want it to be before enabling the button.
I am working with the wordpress plugin Calculated Fields Form, which uses an ajax calendar with date fields and updates the date when the user click on a given day.
I want, however, to change the date even when the user changes the month or the year.
I am trying to detect when the field for choosing the month/year (a select field) is being changed. However, I get no response to the .change() handler.
$(document).on("change", "#ui-datepicker-div select", function (event) {
console.log("change handler: new month is ", $(this).val());
});
This is never being called, even after I change the value.
Notice that: the selector is correct, as the code above works if I substitute "change" with "click". This should also cover the possibilities that the element is not yet ready, jquery not loaded properly, etc.
I am able to do anything with that element, but to change() it does not respond.
Any idea on why that may be the case? Or a turn-around way to insert some code in the moment the select field has changed?
The only possible reason could be because, there is no change event happening on the element.
Maybe your calender is not using the html select element, instead something like Jquery select2.
If so the change handler will be different based on the ui library you are using !!
please post the html code !!
After looking at the source code, I am assuming that WordPress's Calculated Fields Form is using jQuery's datepicker. In that case, to trigger the datepicker's select field, you need to use the "onSelect" option. Try and see if it helps.
$("datepicker_input_field").datepicker({
onSelect: function(dateText) {
var date = $(this).val();
var text = dateText;
console.log(date, text);
alert('Event is triggered on change');
}
});
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;
};