I need to get the value of datepicker on change, But it is returning undefined.
HTML :
<input id="#return" name="start" class="date-pick form-control" value="" data-date-format="dd/mm/yyyy" type="text" />
JS :
$('input.date-pick').datepicker().on('changeDate', function (ev) {
var firstDate = $('#return').val();
alert(firstDate);
});
You could also use regular event change :
$('input.date-pick').datepicker().on('change', function (ev) {
var firstDate = $(this).val();
alert(firstDate);
});
Hope this helps.
Use onSelect event and you can get selected value with in dateText variable
$('.date-pick').datepicker({
onSelect: function(dateText, inst) {
alert(dateText);
}
});
you can easily do with below code:
$(".date-pick").on('change', function(event) {
event.preventDefault();
alert(this.value);
/* Act on the event */
});
Your date field
<input id="thedate" type="text" class="date-pick"/>
And if you using bootstrap datepicker then add this script code
$(function() {
$('.date-pick').datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(dateText, inst) {
alert(dateText);
}
});
});
Here is the fiddle
http://jsfiddle.net/s1L5pjpb/1/
You can also get the value directly from your onchange event:
onChange="variable=$(this).val();"
$("#datepickerID").on('change', function() {
dateVar = $("this").val();
}
You can get value by calling function when onchange event occur. Then, after you can store that value, alert it or print it on console.
Related
I have a function that gets executed to change my datepicker to get new values. After I select my drop down 'changeme' it works. The next time I try nothing happens? I am not unbinding the changme drop down box.
$("#changeme").change(function()
{
var d = newvalues();
$("#sdate, #edate").removeClass("datepicker hasDatepicker");
$("#sdate, #edate").unbind();
$("#sdate, #edate").addClass("datepicker");
$(".datepicker" ).datepicker({changeMonth: true, changeYear: true, dateFormat: "yy-mm-dd", minDate:d.start_date,maxDate:d.stop_date, yearRange:d.start_year[0]+":"+d.stop_year[0]});
submitform();
}
function newvalues()
{
var s_date = $("#changeme > :selected").data('start_date');
var s_year = s_date.split("-");
var st_date = $("#changeme > :selected").data('stop_date');
var st_date = $("#changeme > :selected").data('stop_date');
return {start_date:s_date,
start_year:s_year, stop_year:st_year,stop_date:st_date
};
}
*************** update *********************
Sorry my $("#sdate").change(function(){submitform();}); stops working.
$("#startdate").change(function()
submitform();
});
All it does is submits the form with new values. I will try to post a working copy. But I am getting no errors.
Once the page loads or you select run and you type into the first text box it works. Once you select an option from the drop down menu and try to update the text box. the change function doesn't fire.
Here is a link to a fiddle.
JS fiddle
Figured it out. changed how i was using jquery a bit. I ended up removing the unbind and adding $dateField.datepicker("option", {changeMonth: true, changeYear: true, dateFormat: "yy-mm-dd", minDate:d.start_date,maxDate:d.stop_date, yearRange:d.start_year[0]+":"+d.stop_year[0]});
JSFiddle
I am trying to make function call on bootstrap datepicker when user clicks outside of calendar.
When user selects date datepicker closes automatically, same when user clicks outside of the datepicker div, it closes itself.
So my question is how can I understand when its closed? I know there is an event called onClose but it only works when page loads
fiddle
Use the .on("hide"... event.
From the docs:
$('.datepicker').datepicker()
.on(picker_event, function(e) {
// `e` here contains the extra attributes
});
For your example... picker_event will be hide.
Something like:
var checkin = $('#date-from').datepicker({
format: 'dd/mm/yyyy',
startDate: '+1d',
weekStart: 1,
beforeShowDay: function(date) {
return date.valueOf() >= now.valueOf();
},
autoclose: true
}).on('changeDate', function(ev) {
alert("changed");
}).on('hide', function(ev) { // <-----------
alert("hide");
});
Updated fiddle
bootstrap-datepicker events
bootstrap-datepicker hide event
As per the documentation here: https://bootstrap-datepicker.readthedocs.io/en/latest/events.html#hide
$('.datepicker').datepicker()
.on('hide', function(e) {
// `e` here contains the extra attributes
});
Or
$('.datepicker').datepicker()
.on('hide', myFunction);
And then create myFunction
function myFunction(e) {
// whatever you want :)
}
Here is your example with little modify https://jsfiddle.net/mr3dxj5p/6/ here you can see I just change changeDate to hide to fire alert message
This was the code I was using before...
<div class="date_menu" ng-repeat="singledate in dates">
<p>
{{singledate}}
<input type="radio" name="filterDateChosen2" ng-model="$parent.radioResult" ng-value="singledate">
</p>
</div></div>
This displayed a list of dates in the form of radio buttons. This saved the selected date in $parent.radioResult where I was able to then access it with...
<button ng-click="getVar(radioResult)"...
But now, I want to use jQuery datepicker instead...
myApp.directive('calendar', function () {
return function(scope, element, attrs) {
element.datepicker({
inline: true,
dateFormat: 'dd-mm-yy',
onSelect: function(dateText) {
var modelPath = $(this).attr('ng-model');
var val = $(this).attr('ng-value');
putObject(modelPath, val, scope, dateText);
scope.$apply();
}
});
}
});
This works, if I select a date, the input box will show it...
<input calendar ng-model="$parent.radioResult" />
But the problem is, when I use...
<button ng-click="getVar(radioResult)"...
It does not get the value, and I cannot figure out why? What is the reason for this?
Since you are using a JQuery Datepicker which is not in the Angular context so you need to bring it into the Angular's context first by setting the selected date to the variable on the scope like below
$scope.$apply(function () {
$scope.dateValue = selectedDate;
});
I currently am creating a date picker like so
HTML
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<input id="datepicker" type="datepicker" name="date" placeholder="Date" />
JS
$('#datepicker').datepicker()
.on("change", function (e) {
console.log("Date changed: ", e.target.value);
});
My goal is to be able to listen for when the user clears out the date box. However, the change event only seems to fire once you unfocus the date box. I'm wondering if there's a way to listen for all changes in a jQuery date box, or if there are any better alternatives.
JsFiddle link:
https://jsfiddle.net/szkfm0y7/
Use jquery on input alongside with the on change event
$('#datepicker').datepicker()
.on("input change", function (e) {
console.log("Date changed: ", e.target.value);
});
Fiddle
Here is a possible solution:https://jsfiddle.net/7atsua85/
Instead of e.target.value, use $(this).val() as shown below,
$('#datepicker').datepicker()
.on("change", function (e) {
//console.log("Date changed: ", e.target.value);
alert($(this).val())
});
<script type="text/javascript">
// When the document is ready
$(document).ready(function () {
$('.datepicker').datepicker({
format: "yyyy-mm-dd",
}).on('changeDate', function(ev){
// do what you want here
$(this).datepicker('hide');
}).on('changeDate', function(ev){
if ($('#startdate').val() != '' && $('#enddate').val() != ''){
$('#period').text(diffInDays() + ' d.');
} else {
$('#period').text("-");
}
});
});
</script>
So here's what my datepicker looks like. So basically when I change date by clicking mouse it works good, however when I manually change date with keyboard or manually clear the date change date event doesn't get called. Is this a bug or am I doing something wrong here ?
You have to use the change event on the input itself if you want to respond to manual input, because the changeDate event is only for when the date is changed using the datepicker.
Try something like this:
$(document).ready(function() {
$('.datepicker').datepicker({
format: "yyyy-mm-dd",
})
//Listen for the change even on the input
.change(dateChanged)
.on('changeDate', dateChanged);
});
function dateChanged(ev) {
$(this).datepicker('hide');
if ($('#startdate').val() != '' && $('#enddate').val() != '') {
$('#period').text(diffInDays() + ' d.');
} else {
$('#period').text("-");
}
}
In version 2.1.5
bootstrap-datetimepicker.js
http://www.eyecon.ro/bootstrap-datepicker
Contributions:
Andrew Rowls
Thiago de Arruda
updated for Bootstrap v3 by Jonathan Peterson #Eonasdan
changeDate has been renamed to change.dp so changedate was not working for me
$("#datetimepicker").datetimepicker().on('change.dp', function (e) {
FillDate(new Date());
});
also needed to change css class from datepicker to datepicker-input
<div id='datetimepicker' class='datepicker-input input-group controls'>
<input id='txtStartDate' class='form-control' placeholder='Select datepicker' data-rule-required='true' data-format='MM-DD-YYYY' type='text' />
<span class='input-group-addon'>
<span class='icon-calendar' data-time-icon='icon-time' data-date-icon='icon-calendar'></span>
</span>
</div>
Date formate also works in capitals like this data-format='MM-DD-YYYY'
it might be helpful for someone it gave me really hard time :)
The new version has changed.. for the latest version use the code below:
$('#UpToDate').datetimepicker({
format:'MMMM DD, YYYY',
maxDate:moment(),
defaultDate:moment()
}).on('dp.change',function(e){
console.log(e);
});
Try this:
$(".datepicker").on("dp.change", function(e) {
alert('hey');
});
I found a short solution for it.
No extra code is needed just trigger the changeDate event. E.g.
$('.datepicker').datepicker().trigger('changeDate');
Try with below code sample.it is working for me
var date_input_field = $('input[name="date"]');
date_input_field .datepicker({
dateFormat: '/dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
}).on('change', function(selected){
alert("startDate..."+selected.timeStamp);
});
This should make it work in both cases
function onDateChange() {
// Do something here
}
$('#dpd1').bind('changeDate', onDateChange);
$('#dpd1').bind('input', onDateChange);
Depending which date picker for Bootstrap you're using, this is a known bug currently with this one:
Code: https://github.com/uxsolutions/bootstrap-datepicker
(Docs: https://bootstrap-datepicker.readthedocs.io/en/latest/)
Here's a bug report:
https://github.com/uxsolutions/bootstrap-datepicker/issues/1957
If anyone has a solution/workaround for this one, would be great if you'd include it.
I have this version about datetimepicker https://tempusdominus.github.io/bootstrap-4/ and for any reason doesn`t work the change event with jquery but with JS vanilla it does
I figure out like this
document.getElementById('date').onchange = function(){ ...the jquery code...}
I hope work for you
I was using AngularJS and AngularStrap 2.3.7 and trying to catch the 'change' event by listening to a <form> element (not the input itself) and none of the answers here worked for me. I tried to do:
$(form).on('change change.dp dp.change changeDate' function () {...})
And nothing would fire. I ended up listening to the focus and blur events and setting a custom property before/after on the element itself:
// special hack to make bs-datepickers fire change events
// use timeout to make sure they all exist first
$timeout(function () {
$('input[bs-datepicker]').on('focus', function (e){
e.currentTarget.focusValue = e.currentTarget.value;
});
$('input[bs-datepicker]').on('blur', function (e){
if (e.currentTarget.focusValue !== e.currentTarget.value) {
var event = new Event('change', { bubbles: true });
e.currentTarget.dispatchEvent(event);
}
});
})
This basically manually checks the value before and after the focus and blur and dispatches a new 'change' event. The { bubbles: true } bit is what got the form to detect the change. If you have any datepicker elements inside of an ng-if you'll need to wrap the listeners in a $timeout to make sure the digest happens first so all of your datepicker elements exist.
Hope this helps someone!
if($('.single_datetime').length){
$('.single_datetime').dateRangePicker({ format: 'DD.MM.YYYY HH:mm', language: 'tr', autoClose: true, singleDate : true, showShortcuts: false, time: {enabled: true}
}).bind('datepicker-change',function(event,obj){caclDay();});
}
Ref: https://www.chamonix-property.com/bower_components/jquery-date-range-picker/