I'm using the following jQuery Datepicker and when I try to use JS to get the values I'm either getting "undefined" or "[object Object]".
I'm automatically setting a value to the datepicker and when viewing the page I can see a value.
Here is the code I have. I've tried it with the id being on the wrapping around the as well as the id on the actual but got the same results.
<div class="col-md-2 text-left">
<div class="input-group date">
<input id="startDatepicker" class="datepicker form-control" type="text" />
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
Here is the JavaScript I've tried base on the suggestions I've seen in my research.
var start = $('#startdate').datepicker("getDate");
//var start = $('#startdate').data('datepicker').date;
//var start = $('#startdate').val();
//var start = $('#startdate').data('datepicker').date;
alert(start);
I'ts probably because your input is empty.
check this out(JSFiddle) :
<input id="startDatepicker" class="datepicker form-control" type="text" value="05/09/2016" />
and
$('#startDatepicker').datepicker();
$('#getdate').on('click', function() {
var st = $('#startDatepicker').datepicker('getDate');
alert(st)
console.log(st);
});
Related
I have some code that successfully inputs a variety of values into a form on a webpage and I can see that the data is put into the correct fields in the correct format. When I submit the form using the 'OK' button, or code, the process completes but the Date data carried through is the current date, despite the fact that I can see a different date displayed in the field. I can cut and paste data into the field from e.g., Notepad and it works fine.
Here is the html for the beginning of the form:
<form action="#" method="get">
<div class="columns group">
<div class="formColumn flex">
<div id="editConference_ownerField" style="display: none">
<div class="formRow">
<div class="labelBlock" id="editConference_ownerLbl">Owner</div>
<div class="fieldBlock fillspace">
<select id="editConference_owner"></select>
</div>
</div>
</div>
// The first input in this class loads find and is pulled through when the form is submitted using the OK button
<div class="formRow">
<label class="labelBlock" id="editConference_labelLbl" for="editConference_label">Title</label>
<div class="fieldBlock fillspace">
<input type="text" class="input" id="editConference_label" maxlength="256" value="">
</div>
</div>
<div id="editConference_timeFields" style="">
<div class="formRow">
<div class="labelBlock" id="editConference_startLbl">Start</div>
<div class="fieldBlock calendarBlock">
<input type="date" id="editConference_startNative" class="native_date has_native">
// The element id="editConference_start" is a date and does NOT pull through
<input type="text" id="editConference_start" class="sl_date has_native" placeholder="DD/MM/YYYY">
// The element id="editConference_startTime" is a time DOES pull through!
<input type="text" id="editConference_startTime" placeholder="Time" class="ui-timepicker-input" autocomplete="off">
<div id="start-date-picker"><div class="pika-single is-hidden is-bound" style="position: static; left: auto; top: auto;"></div></div>
<div id="start-time-picker"></div>
</div>
</div>
<div class="formRow">
<div class="labelBlock" id="editConference_endLbl">End</div>
<div class="fieldBlock calendarBlock">
<input type="date" id="editConference_endNative" class="native_date has_native">
<input type="text" id="editConference_end" class="sl_date has_native" placeholder="DD/MM/YYYY">
<input type="text" id="editConference_endTime" placeholder="Time" class="ui-timepicker-input" autocomplete="off">
<div id="end-date-picker"><div class="pika-single is-hidden is-bound" style="position: static; left: auto; top: auto;"></div></div>
<div id="end-time-picker"></div>
</div>
</div>
Here is the Javascript that I have been using. I have been testing it out using the Chrome F12 Console and working inside the iframe. All the inputs used appear to be of type="text". It automates the filling out of the form except the problem noted above and submits it:
\\Loading the data into the fields
var Title = "Coding syntax test again";
document.getElementById('editConference_label').value = Title;
var StDate = "06/05/2020";
document.getElementById('editConference_start').value = StDate;
var StTime = "16:20";
document.getElementById('editConference_startTime').value = StTime;
var EndDate = "06/05/2020";
document.getElementById('editConference_end').value = EndDate;
var EndTime = "17:50";
document.getElementById('editConference_endTime').value = EndTime;
var Desc = "The conference description stuff";
document.getElementById('editConference_description').value = Desc;
\\ Click 'OK'
document.getElementById("editConference_ok").click();
Things tried:
1) Using the code below to enter data via the id ="editConference_startNative" element. It does not seem to work but I am not sure if my code makes any sense or if this something worth pursing:
var StDate = document.querySelector('input[type="date"]');
StDate.value = '2020-05-05';
document.getElementById('editConference_startNative').value = StDate;
2) Creating a var with a date type for use with the Native version of the input
var StDate = new Date("05/05/2020");
document.getElementById('editConference_startNative').value = StDate;
I think the output is in the wrong form to be used but can't figure out how to shorten it in the right format. Perhaps this is not the right approach.
3) Removing the final click code then waiting for a few seconds and them adding the Click line in and executing but this did not work so I presume it is not a question of a delay. I also tried this code before the click code for a delay but I am not sure if it is valid:
setTimeout(function(){}, 3000);
document.getElementById("editConference_ok").click();
Thanks in advance for any suggestions.
my below datepicker code is like below. Its working fine. But the datepicker popup opens when i click on the input field. But want that to be open once i click on the calendar icon. Please suggest me a way to achieve that.
<div class="col-sm-6 col-md-6 col-lg-6 padleft">
<div class="form-group">
<label for="exampleSelect1">Start Date
</label>
<div class="input-group" style="width:75%">
<div class="input-group-btn">
<input type="text"
class="form-control date"
id="dateFrom"
placeholder="From"
ng-click="model.dateFrom=true"
datepicker-popup="{{model.format}}"
ng-model="model.defect.startDate"
is-open="model.dateFrom"
datepicker-options="dateOptions"
date-disabled="model.disabled(date, mode)"
ng-required="true"
close-text="Close" my-date>
<span class="btn btn-default " ng-click="model.dateFrom=true"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
</div>
</div>
In My controller :
self.format = 'MM-dd-yyyy';
self.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
self.opened = {};
self.opened[$event.target.id] = true;
// log this to check if its setting the log
console.log(self.opened);
};
Angular : 1.6
Using 'ui.bootstrap.datetimepicker',
and 'ui.bootstrap
You'll need to add ng-click="model.dateFrom=true" as an attribute to the <i> element containing your calendar icon, not its parent span.
I would actually recommend writing a separate function for toggling the datepicker on and off. Something like
$scope.toggleDatePicker = function() {
$scope.model.dateFrom = !$scope.model.dateFrom;
};
and then calling that from your html: ng-click="toggleDatePicker()"
<div class="input-daterange input-group" id="datepicker'">
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
I know the method goes something like this:
datestart = $("#datepicker").find("input").val();
However this returns 2 different value (Only showing the first one regardless what I do), how do I go about getting just the start or the end of the value?
I was trying something like this:
datestart = $("#datepicker2").find("input").attributes['name'=start].val();
Obviously that doesn't work... Can anyone shine some light on this issue?
You almost got it right:
datestart = $("#datepicker").find("input[name='start']").val();
dateend = $("#datepicker").find("input[name='end']").val();
or better yet:
datestart = $("#datepicker input[name='start']").val();
you can write the following to get the first value
$("input[name=start]").val();
to get the second value use
$("input[name=end]").val();
I am experiencing difficulties with getting a text value from bootstrap-timepicker24 form.
jsp code:
<form action="#" class="form-horizontal form-bordered" id="shop-time">
<div class="form-body form" >
<div class="form-group">
<label class="control-label col-md-4">Monday</label>
<div class="col-md-4">
<div class="input-group shop-monday-open-time">
<input type="text" class="form-control timepicker timepicker-24">
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-clock-o"></i>
</button>
</span>
</div>
</div>
</div>
js code:
// forms
var shopForm = $('#shop-time');
var shopMondayOpen = shopSave.find('.shop-monday-open-time');
// time picker listener
shopMondayOpen.on('changeTime.timepicker', function(open) {
var time = dateInUTC(open.time);
});
But the event changeTime does not affect the listener. But if I just reload the page and stop at the breakpoint on this line: var shopMondayOpen = shopSave.find('.shop-monday-open-time') line and evaluate shopMondayOpen.val at the console I get something like:
shopMondayOpen.val
jquery.min.js:4 function (a){var b,c,d,e=this[0];{if(arguments.length)return d=m.isFunction(a),this.each(function(c){var e;1===this.nodeType&&(e=d?a.call(this,c,m(this).val()):a,null==e?e="":"number"==typeof e?e+="":m.isArray(e)&&(e=m.map(e,function(a){return null==a?"":a+""})),b=m.valHooks[this.type]||m.valHooks[this.nodeName.toLowerCase()],b&&"set"in b&&void 0!==b.set(this,e,"value")||(this.value=e))});if(e)return b=m.valHooks[e.type]||m.valHooks[e.nodeName.toLowerCase()],b&&"get"in b&&void 0!==(c=b.get(e,"value"))?c:(c=e.value,"string"==typeof c?c.replace(lc,""):null==c?"":c)}}
I tried to use timepicker-24 manual but it didn't get me far..
Guess that I am missing something but I just can't figure it out.
After several days I have made a conclusion that only way you can get a value from a timepicker-24 is a value from conroler, as I have already said at tht comment to my post:
<input type="text" class="form-control timepicker timepicker-24 shop-monday-open">
var time = $('shop-monday-open').val
with the html like this:
<div class="input-group">
<input type="text" class="form-control" name="tot-1">
<span class="input-group-addon btn btn-default addQR">+</span>
How can I get of the input element when I click on the button?
I have tried this:
$("addQR").click(function(){
var caunter = $(this).closest("input");
var nameclosest = getElementsByName(caunter);
});
but it doesn't work. Any suggestion?
You are missing a period in the selector of the button, and you should be using .prev() not .closest(). You already know the tag name input, so I wonder why you would be trying to get it; you're probably trying to get the name attribute:
$(".addQR").click(function(){
var caunter = $(this).prev("input"),
nameclosest = caunter.attr('name');
});
$(".addQR").click(function(){
var caunter = $(this).prev("input"),
nameclosest = caunter.attr('name');
alert( nameclosest );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<input type="text" class="form-control" name="tot-1">
<span class="input-group-addon btn btn-default addQR">+</span>