I have following input which displays datetime
<div ng-repeat="item in items">
<input type="text" ng-model="item.name" />
<input ng-model="item.time" />
</div>
The issue i have is that time is in following format.
"2002-11-28T14:00:00Z"
I want to just display the time portion. For which I would have to apply filter
date: 'hh:mm a'
I tried
ng-model="labor.start_time | date: 'hh:mm a'"
How can I show only time portion in input box showin time only? I can't use span tag as the time a user can change so have to show in input tag.
As above Gaul said, you can use watcher for it.
<div ng-controller="MyCtrl">
<input ng-model="currentDate">
</div>
function MyCtrl($scope, $filter) {
$scope.currentDate = new Date();
$scope.$watch('currentDate', function(date){
$scope.currentDate = $filter('date')(date, 'shortTime');
});
}
This is working JSFiddle with your example.
item.time is being overwritten with whatever you type in that input. so when you change the inputs content to a time value only, item.time will also only contain the time portion. You'll need a extra variable to hold the time portion and update the datetime value if the time value changes. You can use a $watch for that
$scope.$watch('item.time_portion', function(newValue, oldValue) {
// update the hours and minutes of $scope.item.time here
});
Related
First off i just want to say i have just started with Angular so all this is really new to me. I don't even know if what i am setting up is done in the right way.
What i am trying to do is to Pass a date value after i have chosen it in the datetimepicker back to my angular controller so that i can process it.
the problem i have is that when i choose the date (i can clearly see what i have chosen through a alert poping up displaying it on.change) i can't pass the value through either ng-model attribute in the input tag nor with ng-click after storing the date value in a variable.
i want the date to be passed to a $scope.chosenDate = ''; as a string, or something like that, in the Angular Controller.
I am Using the: DateTimePicker Bootstrap 3 - minimal setup version:
DateTimePicker Bootstrap 3
Here is the datetimepicker:
<div class="col-lg-12 col-md-6">
<lable class="lfInputLable">From</lable>
<div class="form-group" style="margin-bottom: 5px !important;">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var dateToPass;
$(document).ready(function dateFunction() {
$('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-DD hh:mm'
});
$('#datetimepicker1').on("dp.change", function () {
var selectedDate1 = $("#datetimepicker1").data('date').toString();
var dateToPass = selectedDate1.toString();
alert("Date is set to: " + selectedDate1);
alert("The Date To Pass: " + dateToPass)
});
});
</script>
1) You are doing wrong way. Select any angular js supported date picker
https://github.com/720kb/angular-datepicker
2) Angular js support two way binding. please read more about two way binding. and then you are good to start with variables in angular js
http://www.w3schools.com/angular/angular_databinding.asp
So i got this to work but i got to use another Datetimepicker.
I used the: dalelotts/angular-bootstrap-datetimepicker
Worked like Magic!
You can access the data by adding model variable.
<input type='text' class="form-control" ng-model="data.date" />
in your controller, you can access it through $scope.data.date.
I'm currently retrieving data from a database over an API. The data comes back in this format:
2016-10-12T08:00:00
I would like to display the time portion of this in a time input field with AM and PM on my current webpage.
I have the following input:
<input type="time" name="StartTime" class="form-control" />
When the ajax call finishes successfully to the api i do the following:
$("#group-management #EditGroupModal [name=StartTime]").val(data.startTime);
data.StartTime is of course the string of datetime text seen above.
Which currently does not set the value of the time input on the page. I'm guessing it is because there is some formatting issue. I would like to parse the text string seen above and put it into the form field on the front end, but I am unsure of how to go about doing it. I have tried playing around with the Date object but no luck.
The time input only accepts a time as a valid value, as in 08:00:00
You can split your string, and pop of the time
var data = {startTime : "2016-10-12T08:00:00"}
var time = data.startTime.split('T').pop();
$("[name=StartTime]").val(time);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="time" name="StartTime" class="form-control" />
Use http://momentjs.com/
$(()=>{
$('#StartTime').val(moment('2016-10-12T08:00:00').format('HH:mm:ss'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://momentjs.com/downloads/moment.js"></script>
<input type="time" name="StartTime" id='StartTime' class="form-control" />
Maybe like this?:
var date = new Date('2016-10-12T08:00:00'); // replace the hardcoded time with your return value from Ajax call
$("#group-management #EditGroupModal [name=StartTime]").val(date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds());
I have one input field for time entry , need to enter hour and minute (HH:mm Format) .So how can input values automatically formatting . Eg: input values automatically formatting with HH:mm format (11:30).Any help would be appreciated.
You can use uib-timepicker directive for this purpose.It is easy to use and lot more customizable like you can switch between 12/24H etc. The doc explains it pretty clearly.
<div uib-timepicker ng-model="mytime" ng-change="changed()"
hour-step="hstep" minute-step="mstep" show-meridian="ismeridian">
</div>
you just write{{"HH:mm"}} in $scope
value = {{a.value | date: "HH:mm"}}
I am populating a hidden field with a UTC date/time value from a database. I am then using some jQuery and the moment library to convert the UTC date to local time and set the default date of a eonasdan-datetimepicker. I am also using the dp.change event of eonasdan-datetimepicker to convert dates that are picked via the widget back to UTC to bind back to the database via the hidden field. Here is my javascript - this works, but I do not like it.
$(".datepicker").each(function (index) {
var utcDateTime = moment.utc($("#" + $(this).data("utc-target")).val(), "MM/DD/YYYY h:mm A");
var localDateTime = moment.utc(utcDateTime).local().format("MM/DD/YYYY h:mm A");
$(this).find(">:first-child").val(localDateTime);
}).datetimepicker({
useCurrent: false,
}).on("dp.change", function (e) {
$("#" + $(this).data("utc-target")).val(moment.utc(e.date).format("MM/DD/YYYY h:mm A"));
});
HTML:
<label for="PublishedField">Date/Time Published</label>
<div class="input-group date datepicker" data-utc-target="PublishedUtcField">
<input name="PublishedField" type="text" id="PublishedField" class="form-control" />
<span class="input-group-addon"><span class="fa fa-calendar"> </span></span>
</div>
<input type="hidden" name="PublishedUtcField" id="PublishedUtcField" value="4/10/2015 5:16:00 PM" />
While this works, I'm not a fan of the each loop to set the initial value of the datetimepicker. I feel as though it would be cleaner to set it via the defaultDate property, but I am unable to set that property using an anonymous function. I think a dp.initialize or dp.setup event would be a nice solution, but the library does not support something like that, as far as I can tell. This could also be done using some kind of placeholder functionality, but I cannot find any similar scenarios in the docs or on GitHub.
Anybody know of a better way to do this? Is this kind of scenario supported somehow in a way I'm just not seeing or aware of? Am I missing something obvious?
I'm trying to do some stuffs with Angular from a few days and I'm stucked with an update problem.
This is part of my HTML page :
<div ng-app="monApp" ng-controller="monControleur">
Date de début : <input type="text" ng-model="date_deb" placeholder="JJ/MM/AAAA" value="" name="date_d" id="champ_date_deb" size="12" maxlength="10"> <span id="calendarMainDeb"></span>
<script type="text/javascript">
//<![CDATA[
calInit("calendarMainDeb", "Calendrier Deb", "champ_date_deb", "jsCalendar", "day", "selectedDay","calendarWrap1");
//]]>
</script>
<table border='1'>
<tr data-ng-repeat="evenement in mydata | entre_deux_dates:date_deb:date_fin ">
....
When I input a new date_deb with the keyboard, displayed values are filtered with Angular. On the contrary, if a use a JS calendar to set the date_deb value, it sets the value but no filtering is realized unless giving focus in JS and pressing "space".
Here is the last part of the JS which updates the date value :
field.value = dateArr[0]+'/'+dateArr[1]+'/'+dateArr[2];
field.focus();
What can I do to dynamically update the filtered values right after a date is picked in the calendar ? I wouldn't like the user to have to press "space" after each selection ...
I have tried a lot of solutions in angular (ng-model-options, etc.) and in JS but none worked.
You need to invoke a digest cycle:
$scope.$applyAsync(function() {
field.value = dateArr[0]+'/'+dateArr[1]+'/'+dateArr[2];
field.focus();
});
That is because angular works by dirty checking - in each digest cycle (apply means run a digest for the root scope), all watchers in the scope hierarchy are checked for changes, and updates occur as necessary.
You can put your answer in $timeout, as $timeout runs the digest cycle as well as it saves from the error "$apply alreay running".
$timeout(function() {
field.value = dateArr[0]+'/'+dateArr[1]+'/'+dateArr[2];
});