Develop Reference

jQuery Datepicker .val() is blank however a date is displayed?

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

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.

Using ng-model-options updateOn:blur with uib-datepicker popup

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 }}.

Validating text input - bug in implementation

I've encountered a user interface issue with validation I really want to solve. For the website: http://fun-booths.co.uk/dev/
I'm using this simple plugin for validation: http://www.formvalidator.net/
The simple code behind this is as follows:
$.validate({
form : '#fscf_form1, #fscf_form2',
validateOnBlur : true,
scrollToTopOnError : false
});
The validateOnBlur property makes sure validation occurs when inputs loose focus.
There is a form in the right hand sidebar. When selecting a date and time the validation is not functioning correctly.
Fill out the town/city and postcode fields with the correct test data format for example. You will notice a green tick dynamically appear. Now for the date and time fields an end user does not actually type, the input is given to the form field by clicking on the responsive time picker / date picker respectively.
After selecting a date and time and focusing on other input elements this results in the following issue (even though a value has been selected a red cross is presented in the form field which is not desired behaviour.):
I believe this issue is stemming from the fact that the user does not actually enter text into the time or date fields. So the validation does not detect that actual text has been entered into the form.
Note: A strange behaviour is that a green tick does appear on the date/time fields if a value is chosen, then the same input is selected/given focus again.
Is there a JavaScript/jQuery solution that could fire with an event listener to solve this issue and ensure a green tick appears? Or would textual input need to physically be typed in to the date/time fields.

Try this hack, should work :
$('.picker__input').on('change', function(){
$(this).focus();
})
Hope this helps.

You are doing two plugins to work together. Try to give a callback to pickadate asking to reprocess the field:
$('#fscf_field2_12').pickadate({
//... add this parameter
onClose: function() {
$('#fscf_field2_12').blur();
},
//... or this one
onSet: function() {
$('#fscf_field2_12').blur()
}
})
You can also check the validateOnEvent method from jQuery-Form-Validator.

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/