We Keep Coding

how to get value datetimepicker in jquery

excuse me want to ask. I'm sorry in advance if my language is not neat.
how to get value datetimepicker from this form.
<div class="form-group">
<label>Date:</label>
<div class="input-group date" id="reservationdate" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input"
data-target="#reservationdate" />
<div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
I managed to use the datetimepicker function and work but how to get value
$(function () {
$('#reservationdate').datetimepicker({
format: 'L',
});
});

What you did here only initiates the datepicker on that element
$('#reservationdate').datetimepicker({
format: 'L',
});
Based on the documentation, you could then request the value in a few ways.
You would want to call the getValue method after initiation. Usually done after a form-submit or button click event.
$('#reservationdate').datetimepicker('getValue');
Another way would be to use this onChange handler:
$('#reservationdate').datetimepicker({
format: 'L',
onChangeDateTime:function(dp, $input){
alert($input.val())
}
});

UPDATE:
Additionally, your html code is not correct.
You want to be setting the reservationdate id on the input, not the div.
<div class="form-group">
<label>Date:</label>
<div class="input-group date" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" id="reservationdate"
data-target="#reservationdate" />
<div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
===========
You need to call the datepicker('getValue'); function.
For your example:
$('button.somebutton').on('click', function () {
var d = $('#reservationdate').datetimepicker('getValue');
console.log(d.getFullYear());
});
This returns a Date object which you can query the year, month, day or time.
Highly recommend you read through the entire documentation page - https://xdsoft.net/jqplugins/datetimepicker/. You might be able to find all these answers and more yourself.

Jquery datepicker not working inside v-for of Vue.js component in laravel

Jquery date picker showing strange behavior inside the v-for loop in my vue.js component. Outside of the loop, it is working fine and date picker is showing. But, inside my v-for loop, it is not picking date picker as expected.
Here is my working code of date picker. (Working Case)
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="date" class="col-form-label pt-0">For Week End</label>
<input type="text" :name="`payrolls[${i}][payrol_date]`" class="form-control datepickere">
</div>
</div>
Date picker not working in this case (Non-working case)
<div v-for="(pay_roll, i) in payrolls" class="border border-primary p-3 rounded mb-3" :key="pay_roll.id">
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="date" class="col-form-label pt-0">For Week End</label>
<input type="text" :name="`payrolls[${i}][payrol_date]`" class="form-control datepickere">
</div>
</div>
</div>
Here is my Jquery code of datepicker.
$(".datepickere").datepicker({
onSelect: function(dateText) {
display("Selected date: " + dateText + ", Current Selected Value= " + this.value);
$(this).change();
}
}).on("change", function() {
display("Change event");
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
Although I have given a class instead of an id, still problem is the same. What is going wrong?

seems to be a typo in your code. Change datepickere to datepicker and it should work. Also, if I was you, I would use a vue compatible datepicker such as https://www.npmjs.com/package/vuejs-datepicker.

Materializecss Datepicker Scrolls the page to top when click on it

I use materializecss Datepicker in my web page and one worked fine until I add another datepicking option to my web page.
After that when I select a date background page scrolls to top automatically.
Place where I needed to load datepicker:
Place where I needed to load datepicker-1:
where the modal loads:
I this is my code for datepicker 1;
<div class="row dateRangeSelector orderStatusWidget-dateRangeSelector"
id="customDates">
<div class="col s6 orderStatusWidgetDateWrapper">
<label>From</label>
<input type="text" class="datepicker" id="distStartDate">
</div>
<div class="col s6">
<label>To</label>
<input type="text" class="orderStatusWidget-datepicker"
id="endDate1">
</div>
datepicker 2:
<div class="row dateRangeSelector orderStatusWidget-dateRangeSelector" id="customDates">
<div class="col s6 orderStatusWidgetDateWrapper">
<label>From</label>
<input type="text" class="datepicker orderStatusWidget-datepicker"
id="startDate">
</div>
<div class="col s6">
<label>To</label>
<input type="text" class="datepicker orderStatusWidget-datepicker"
id="endDate">
</div>
</div>
my javascript code:
$('#distStartDate').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15, // Creates a dropdown of 15 years to control year,
today: 'Today',
clear: 'Clear',
close: 'Ok',
closeOnSelect: true, // Close upon selecting a date,
onStart: function() {
$('.picker').appendTo('body');
}
})
**same for each and every input.
After doing some element inceptions I figure out that picker element that needs to create near to element is created in bottom of the page in my case.
Please tell me a way to fix this error.

Datepicker not showing days - Bootstrap

I'm struggling with the answer to this, the reason I'm struggling is because the datepicker is working on one of my pages.
Could an issue be that i'm loading a datatable at the same time as the datepicker? Because on the broken page, i'm loading the datatable which uses the date from the datepicker.
Problem reproduced
JSFiddle - Without including the FilterLoggingTable function, it works fine.
Code snippet for Datepicker
if (typeof $('#generateDate, #loggingDatePicker').datepicker !== 'undefined')
{
var currentDate = new Date();
$('#generateDate, #loggingDatePicker').datepicker(
{
format: 'dd-mm-yyyy',
autoclose: false
});
$('#generateDate, #loggingDatePicker').datepicker('setValue', currentDate).datepicker('update').datepicker();
}
HTML (Broken Datepicker)
<div class="col-sm-6">
<div class="input-group date col-md-3 pull-right" data-date-format="dd-mm-yyyy" data-date="12-04-2015">
<input id="loggingDatePicker" class="form-control" type="text" value="12-04-2015" size="14" />
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
HTML (Working Datepicker)
<div class="col-md-4 form-group">
<div class="input-group date " data-date-format="dd-mm-yyyy" data-date="12-04-2015">
<input id="generateDate" class="form-control generatePDFBTNS" type="text" value="12-04-2015" size="14" />
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
Broken Page
Working Page

DEMO
Ok. The problem was with your below line:
("tr:not(:has(>th))").show().filter
inside FilterLoggingTable() function.
What this does is hides or shows all the trs in the page when criteria is matched!Now why
this effects your calendar is because the bootstrap creates table
for your calendar when you initialize the datepicker and that
table will also match the above criteria which should be only there
for dataTables.
So, what you need to do is just get the trs of dataTable as below:
$('#dataTables-example').find("tr:not(:has(>th))").show().filter(function ()
Now you can keep autoclose:false if you want..

Angular JS: ngShow isn't binding my change

I've got an Angular module here within a larger rails project. I'm new to Angular and wish to avoid jQuery if I can (but do use it throughout the rails project and can use it if necessary). What I'm trying to do is hide a checkbox if the End Time is "", and show a checkbox if there's a value in the End Time. Unfortunately I have been unable to hide it if End Time is "". See:
You can see my HTML code below:
<div class="control-group span8">
<h4 class="pull-left"><strong>Active Hours (UTC):</strong></h4>
</div>
<div class="control-group span1">
<label class="control-label label-unstyled font-size-14" for="inputStartTime">Start Time</label>
<div class="controls">
<select ng-model="geoRegion.start_time" id="inputStartTime" class="input-small" ng-options="thisHour.value as thisHour.name for thisHour in hours" value="{{geoRegion.start_time}}"></select>
</div>
</div>
<div class="control-group span1">
<label class="control-label label-unstyled font-size-14" for="inputEndTime">End Time</label>
<div class="controls">
<select ng-model="geoRegion.end_time" id="inputEndTime" class="input-small" ng-options="thisHour.value as thisHour.name for thisHour in hours" value="{{geoRegion.end_time}}"></select>
</div>
</div>
<div class="control-group span8">
<div ng-show="clearGeoSegment(geoRegion.end_time)"><label class="inline checkbox label-unstyled font-size-14"><input type="checkbox" id="clearGeoSegment" ng-model="geoRegion.clear_segment">Clear Geo Segment at end of active time period.</label></div>
</div>
<div class="control-group span8">
<p id="broadcast-notice" class="pull-left font-size-14"><strong>Note:</strong> If active hours is blank, the Geo Segment is always active.</p>
</div>
My controller code (yes, I used jQuery. But please suggest otherwise!):
$scope.clearGeoSegment = (endTime) ->
if endTime is ''
$('#clearGeoSegment').hide()
else
$('#clearGeoSegment').show()
Any help would be greatly appreciated!

So you don't need to do the hide/show with jquery. You need to just bind to an expression that will be truthy when the checkbox should be visible. In this case it should be as simple as:
<div ng-show="geoRegion.end_time">
And you can delete your clearGeoSegment function entirely.