I've started to learn angularjs not that much time ago. And I'm about to write some form application. The thing is that when I'm trying to output default value from select and some datepicker (got it from twitter bootstrap) into the table, it doesn't appear when page is loaded. Also, when I change date on datepicker it still doesn't appear in the table but if I change select options it appears. So how can I fix it? I need to output datepicker value when I change it + output default values when page is loaded.
Here's Datetimepicker
<label> <b> * Date and Time of Incident: </b> </label>
<div id="datetimepicker" class="input-append date">
<input type="datetime" ng-model="date" name="date" required></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
Here's random input:
<label> <b> * Reported By: </b> </label> <input type="text" name="report" ng- model="report" required / >
When I use: {{report}} - it shows what I've been entered, but if I use {{date}} it doesn't show anything, only If I write something manually, but I want disable this field for users so he can only choose dates\time.
You may want to check out this: https://github.com/angular-ui/ui-date. It's datepicker written as angular directive. You can find plenty of useful angular utils, modules and directives here: http://angular-ui.github.io/.
Ok. I think the problem is that Angular doesn't know about that change. For this you should call $scope.$digest() or make the change inside of $scope.$apply(function() { $()... }); But you need a controller for that.
Here are an example
Or you can use the "oficial" calendar for angular:
https://github.com/angular-ui/ui-calendar
Cheers!
Related
What I could use for date instead of 'datepicker' because it don't work correct and I heard it's not compatible from bootstrap 3+.
If I paste example datepicker code to clear html page it works correct but if I paste it to my page inputs do themself smaller(height). I checked where the problem is and probably problem is by bootstrap-combined.min.css If I delete it everything back to standard size(without datepicker input) but datepicker doesn't works. I tried to update version(in examples is 2.2.2) of bootstrap-combined-min.css but probably it's not exist.
If exist any alternative way, write about it.
Please for answer like for beginner because I don't understand enough scripts and adding it to page.
<div id="datetimepicker" class="input-append date">
<input type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
$('#datetimepicker').datetimepicker({
format: 'dd/MM/yyyy',
language: 'pt-BR'
});
I am creating date field in angular 4, In that when I click on the date field Date popup must come below the date field.
Here is my code
<div class="col-3">
<div class="form-group calenderForm calenderForm1">
<label for="templateName">REPAIR DATE (FROM)</label>
<owl-date-time name="repairDateFrom"
[(ngModel)]="repairDateFrom"
[max]="max"
[type]="'calendar'"
[dateFormat]="'YYYY-MM-DD'"
[placeHolder]="'YYYY-MM-DD'"
></owl-date-time>
<div class="error-message-block"></div>
<input type="hidden" name="repairDateFrom" id = "repairDateFrom"
value="{{repairDateFrom | date: 'yyyy-MM-dd'}}"
(click)="closeDatePopUp()"/>
</div>
</div>
whether I have to use ngModel function or I have to write in picker plugin component to achieve the result.
Please help me that how can I achieve it.
The best and easy idea is to install ng2-popover . Popover is for angular applications using bootstrap but if you don't want to use it without bootstrap - just simply create your own css class. Popover doesn't depend of jquery.
If you are useing bootstrap 4 powered for Angular you can implement popovers out of the box. Quick and easy popovers
<input type="input" placement="bottom"
ngbPopover="Popover text." popoverTitle="Popover on bottom">
I'm trying to insert into input by using Protractor for testing. My input tag has a custom directive obtained from materializecss which is basically a datepicker (http://materializecss.com/forms.html#date-picker).
My HTML:
<div class="input-field">
<input name="dob" id="dob" input-date select-years="75" format="dd-mm-yyyy" changeformat data-ng-model="editProfile.patientProfile.dobToDisplay" data-ng-required="!editProfile.patientProfile.dobToDisplay" type="text" placeholder="(DOB)DD-MM-YYYY" class="colors" " />
<label for="dob" class="active ">(DOB)<span class="hide-on-small-only">DD-MM-YYYY</span></label>
<span class="materialize-red-text" ng-if="patProForm.$submitted && patProForm.dob.$invalid">Date of birth is invalid!</span>
</div>
I have tried following commands but could not succeed:
element(by.model('editProfile.patientProfile.dobToDisplay')).sendKeys('04-01-2016');
I tried removing attribute:
var remove_inputDate = element(by.name("rptdate"));
browser.executeScript('arguments[0].removeAttribute("input-date");', remove_inputDate.getWebElement());
and tried pushing data into ng-model
element(by.model('editProfile.patientProfile.dobToDisplay')).sendKeys('04-01-2016');
but it did not work,
var remove_inputDate = element(by.name("rptdate"));
browser.executeScript('arguments[0].removeAttribute("input-date");', remove_inputDate.getWebElement());
and tried pushing data into ng-model
element(by.model('editProfile.patientProfile.dobToDisplay')).sendKeys('04-01-2016');
but it did not work.
By using Chrome, it says element is not stable and through Firefox element is not visible.
Is this the correct way of inserting data?
I'm working on a web app which makes use of UI-Bootstrap's datepicker and timepicker directives. For the datepicker I am using a simple popup dialog, and for the timepicker I simply have the dialog on the page next to the datepicker.
Unfortunately I am having difficulty getting these two directives to work together. When the user selects a date, everything works correctly, but when the timepicker is updated, I'm not sure how to get it to consequently update the datepicker as well.
I considered two options for getting around this, the first one was to have the timepicker simply update the ng-model of the datepicker whenever it is changed, but unfortunately this does not also retroactively change what is displayed on the datepicker, so does not work for me. The second option I thought about was having the directives interact with each other, but unfortunately I am a novice at looking at and editing directives, so would need some help with this solution.
If anyone knows of a way to achieve what I want with the dynamic updates, please give me any advice you can offer.
Here is the HTML of my schedule view from the Plunker, which is attache below:
<div class="col-md-12 container-fluid" style="padding-bottom:20px">
<div class="container-fluid" ng-style="vm.contentStyle">
<h2>Schedule</h2>
<!-- DatePickers -->
<div class="col-md-11" style="padding-bottom:20px">
<div class="col-md-6">
<p><label class="control-label" style="color:#AAB4BE" for="startDate">{{ vm.displayName }}</label></p>
<p class="input-group">
<input type="text" class="form-control" ng-change="vm.datePick()" datepicker-popup="yyyy-MM-dd HH:mm" id="startDate" ng-model="vm.date" is-open="vm.opened.start" datepicker-options="vm.dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.open($event, 'start')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-md-6" style="padding-top:2px">
<timepicker ng-show="vm.date" ng-model="vm.time" ng-change="vm.timePick()" show-meridian="false"></timepicker>
</div>
</div>
</div>
</div>
Here is a plunker with an example of what I am trying to do. If there is anything further I can provide that would help with answering this question, please let me know!
Unfortunately you can't just update the model so you have to break the reference by reassigning the model with the new value. I forked the plunker above and fixed it in this version.
vm.pickTime = function(dateTimestamp) {
var newDate = new Date(dateTimestamp);
newDate.setHours(vm.time.getHours());
newDate.setMinutes(vm.time.getMinutes());
vm.date = newDate;
};
I also introduced a form element to make things a little more clean.
I found a Plunker that may help you.
http://plnkr.co/edit/QujX5A?p=preview
<datetimepicker min-date="minDate" show-weeks="showWeeks" hour-step="hourStep"
minute-step="minuteStep" ng-model="date" show-meridian="showMeridian"
date-format="dd-MMM-yyyy" date-options="dateOptions"
date-disabled="disabled(date, mode)"
readonly-date="false"
readonly-time="false"></datetimepicker>
Is this what you were looking for?
Your plunker has typos in it.
You defined vm.pickTime and vm.pickDate in the controller and called vm.timePick and vm.datePick in html.
I fixed them in this plunker.
<timepicker ng-show="vm.date" ng-model="vm.time" ng-change="vm.pickTime()" show-meridian="false"></timepicker>
I am using http://eonasdan.github.io/bootstrap-datetimepicker/ for calendar. Now I want to pick the selected date by the user. I am stuck with this calendar. Please help me to get the current selected date by the user I have used js to get the value.
On each date there is a class named "day". Now I wanted to get the value of the attribute "data-day" which have the value of the date as follows:
$(".day").click(function(){
var clicked = $(this).attr('id');
alert(clicked);
});
It returns the attribute's value only one time it's not recognizing the second click.
Please help me with js or this eonasdan plugin.
HTML
<br/>
<!-- padding for jsfiddle -->
<div class="row">
<div class="col-md-4 col-xs-6">
<input type="text" class="form-control" id="datetimepicker2" />
<br>
<input type="button" class="btn btn-success" id="getDate" value="Get Date" />
</div>
<span id="SelectedDate"></span>
</div>
JS
$('#datetimepicker2').datetimepicker();
$('#getDate').click(function () {
console.log($('#datetimepicker2').data('date'))
$('#SelectedDate').text($('#datetimepicker2').data('date'))
})
DEMO
Get Only Date Part
I have found methods for calendar described at linked page.
So for example to see what have user entered you have to:
$('#datetimepicker').data("DateTimePicker").date()
input here your id and as result receive object which has '_d' field with value.
data('DateTimePicker')
also has a lot of taste functions to configure plugin.
i think i might have the solution for you.
$('#datetimepicker1').data('date')
Please have a go.