I want to open the material calendar with a fa-icon. So I have it like this:
<div class="form-group row">
<label for="start" class="editor-label col-sm-4"><strong> Time start:</strong></label>
<input [(ngModel)]="start" [ngModelOptions]="{standalone: true}"
type="text" class="date" id="start" value="start">
<span class="ml-2" (click)= "reOpenCalender()">
<fa-icon [icon]="faCalendarAlt" size="1x" #picker [styles]="{'color': '#B7B7B7'}"
></fa-icon>
</span>
</div>
And ts script like this:
reOpenCalender() {
let self = this;
setTimeout(() => {
self.picker.open();
}, 50);
}
But I get this error:
core.js:4442 ERROR TypeError: self.picker.open is not a function
at widget-editor.component.ts:65
if I click on the icon.
So what I have to change?
Thank you
You add #picker to icon, icon does not have the open method.
After click on icon you need to call open method on datepicker itself.
You should have something like this:
<span class="ml-2" (click)= "reOpenCalender()">
<fa-icon [icon]="faCalendarAlt" size="1x"></fa-icon>
</span>
<mat-datepicker #picker></mat-datepicker>
Please check the documentation for more info.
Related
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.
I have this data field for input
And it does show a data selector plugin wich works fine with the keyboard.
But I want to disable the up and down arrows. Could you guide me how?
Also need when date filed is clicked that it open date picker or when the user clicks on calendar icon
Thanks.
Code:
<div class="col-sm-10">
<input type="date"ng-model="date" class="form-control" placeholder="date" style="width:180px" id="date" ng-required="true">
<span class="input-group-addon" style="width:auto">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
<div class="col-sm-10">
<input type="date"ng-model="client.dateofbirth" class="form-control" placeholder="Data de nascimento" style="width:180px" id="dateofbirth" ng-required="true">
<span class="input-group-addon" style="width:auto">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
the calendar icon also shows me down not in the correct place...
i want when i click on the textbox it opens the calendar.
// not working
$('#date').datepicker(
{
allowInputToggle: true
});
From the look of it, it looks like the input has type="number", but I am not sure why there is a dropdown arrow there. You can remove the up and down arrows using CSS. I always add this snippet in my main CSS/SASS file.
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: test-field;
}
<input type="number"/>
Source: Turn Off Number Input Spinners | CSS-Tricks
When I open it calendar show with year and days. Can I make it somehow to first display years?
here is html:
<input style="width: 30%;float: left;" name="date" id="date" type="text"
class="form-control"
uib-datepicker-popup="dd/MM/yyyy"
ng-model="ctrl.userProfile.birthDate"
is-open="dpOpenStatus.withRequired"
ng-required />
<span class="input-group-btn">
<button type="button"
class="btn btn-default"
ng-click="setDpOpenStatus('withRequired', $event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
According to the docs, you can set the datepicker-options object's datepickerMode property to one of the following:
datepickerMode C (Default: day) - Current mode of the datepicker
(day|month|year). Can be used to initialize the datepicker in a
specific mode.
So, in your view, add this:
datepicker-options="options"
and in your controller, add this:
$scope.options = {
datepickerMode: 'year',
minDate: new Date()
};
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..
Using twitter bootstrap, I have created a button with an input box beside it. I'm trying to then access that value in my view using jQuery but for some reason I can't get anything back besides "undefined". Here's my code:
jQuery:
var browserInput = $("#browserInput").val();
console.log(browserInput);
Html:
<div class="col-lg-4">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" id="addBrowser">
<span class="glyphicon glyphicon-plus"></span>
Add
</button>
</span>
<input id="browserInput" type="text" class="form-control" style="display: none;" >
</div>
</div>
If this is your actual code layout, you won't get a value because the DOM isn't loaded at the time you are requesting the value.
You should try to wrap your function in document ready
$(document).ready(function() {
var browserInput = $("#browserInput").val();
console.log(browserInput);
});
If you want to have the value on keyup or interaction with the input box, you can also do it like
$(document).ready(function() {
$('#browserInput').on('keyup',function() {
var browserInput = $("#browserInput").val();
console.log(browserInput);
});
});
I'm going to undelete my answer because apparently it helped the poster solve his issue...
<input id="browserInput" type="text" value="" class="form-control" style="display: none;" />
Seems that having the value="" in the <input> tag made a difference for him.
I wonder if he meant "" instead of undefined.