How to open first years uib-datepicker-popup? [AngularJS] - javascript

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()
};

Related

open material datepicker with button

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.

Disable Past Dates in Metronic Template datetimepicker plugin

I'm using Metronic Template in my Laravel project.
Here I wanted to disable past dates in datetime picker plugin.
I have searched some blogs and most answers were to use minDate:0 property.
But it seems this doesn't work in Metronic template.
Please help me if you have experience in such case.
Here is my code.
<div class="input-group date">
<input type="text" class="form-control m-input" readonly="" name="followup_deadline" placeholder="Select date & time" id="datePicker">
<div class="input-group-append">
<span class="input-group-text">
<i class="la la-calendar-check-o glyphicon-th"></i>
</span>
</div>
</div>
And javascript/jquery code is here
$("#datePicker").datetimepicker({
todayHighlight: !0,
autoclose: !0,
pickerPosition: "bottom-left",
format: "yyyy-mm-dd hh:ii:00"
});
Other details needed?
Looking forward your kind answer.
Hi I solved it using this format
Javascript
let todayDate = new Date().getDate();
let endD = new Date(new Date().setDate(todayDate));
$('.form_datetime').datetimepicker({
startDate : endD,
weekStart: 7,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
});
As you can see I have created a Date object and assigned it to startDate this then will disable all date behind the current date (even the time).
Html
<div class="input-group date form_datetime">
<input type="text" size="16" id="datee" class="form-control" name="date_needed" required>
<span class="input-group-btn">
<button class="btn default date-set" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>

Bootstrap date-picker on change event on text box is not working?

I had a date-picker which was working correctly.And its change event was also working fine. Now i implemented a icon and make text box read-only. Now the change event is not fired neither in read-only textbox case nor in non-read-only textbook case.I have changes only html.
HTML of working case:
<label class="control-label">Date</label>
<input type="text" class="form-control date-picker" id="StateDatePicker" placeholder="MM/DD/YYYY">
Javascript of working case:
$StateDatePicker = $("#StateDatePicker");
$(".date-picker").datetimepicker({
format: "MM/DD/YYYY"
})
This is how i called change event.
$StateDatePicker.on("dp.change", function () {
//Performing functionality
});
This was working fine.It was no icon in working case, now i added icon showing in picture:
Now i have changed the following:
HTML:
<div class='date-picker input-group date'>
<input type='text' class="form-control" id="StateDatePicker" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Date-picker is working fine, only change event is not called
There is no change in JS. Why its change event is not called is not working?
Finally i got my answer
I tried this and it working now
<div class='date-picker input-group date' id="StateDatePicker"> //Set id to div
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Try to use like this where you have placed
This may help you (Not Sure)
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
in your HTML :
on your javascript :
$('.form_date').datetimepicker({
language: 'id',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
You can use the datepicker's onSelect event.
$(".date").datepicker({
onSelect: function(dateText) {
display("Selected date: " + dateText + "; input's current value: " + this.value);
}
});
If you like, of course, you can make the change event on the input fire:
$(".date").datepicker({
onSelect: function() {
$(this).change();
}
});
Try something like:
$("#StateDatePicker").datetimepicker({
format: "MM/DD/YYYY"
}).on("changeDate", function () {
//Performing functionality
});
or maybe change your HTML to this: (give id for div tag, not input field)
<div class="input-group input-append date" id="StateDatePicker">
<input type="text" class="form-control" placeholder="MM/DD/YYYY">
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Its working demo.
Html Section
<div class="form-group input-group">
<label class="input-group-btn" for="date-fld1">
<span class="btn btn-default">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</label>
<input type="text" class="form-control date-input" id="date-fld1" readonly/>
</div>
And in script-----------
$(".date-input").datepicker().on("changeDate",function(){
alert('hi');
});
CDN files used
- http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js
and http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css

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

How come my input box's value isn't being returned?

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.

Categories