<input type="date" id="exampleInput" name="input" ng-model="startYear"
placeholder="yyyy" min="1111" max="9999" />
I tried above way but didn't work
<div date-input ng-model="date"></div>
Your directive template would look like this:
<input
id="exampleInput"
type="number"
name="input"
ng-model="year"
ng-change="setDate()"
placeholder="yyyy"
min="1111"
max="9999"
/>
While your actual directive would look like:
.directive('dateInput', ['$filter', function($filter) {
return {
restrict: 'A',
scope: {
ngModel: '='
},
templateUrl: './dateInput.html',
link: function(scope) {
scope.$watch('ngModel', function(nv, ov) {
if (!angular.isDefined(nv) && !angular.isDefined(ov)) {
scope.ngModel = new Date();
scope.year = _getYear(scope.ngModel);
} else {
scope.ngModel = new Date(nv);
}
})
angular.extend(scope, {
setDate: setDate
})
function _getYear(date) {
return parseInt($filter('date')(date, 'yyyy'));
}
function setDate() {
var year = parseInt(scope.year),
date = new Date(year, 1, 1);
scope.ngModel = date;
}
}
}
}]);
So basic idea is to extract year from date input using angulars built in date filter or create new date object if value has not been passed and do the same thing.
Edit it and than compose a new date object and bind to ngModel.
You could easily do the same for month and day and replace 1 values that are passed to date object constructor.
Note that you also have to pass date formatted in a way Date object can read it.
Related
I have datepicker showing only months.
It should show only current month and remaining months should be disabled.
I have tried with min-date and max-date, but it is not working.
HTML:
<input type="text" class="form-control"
readonly="readonly" ng-model="xxxx"
min-mode="'month'" min-date="startmnth" max-date="endmnth"
datepicker-popup="yyyy-MM" is_open="status.date_opened"
ng-required="true" placeholder="YYYY-MM"
datepicker-options="datepickerOptions"
datepicker-mode="'month'" ng-click="openfromDate($event)"
show-button-bar="false">
JS:
$scope.startmnth = new Date().getMonth()
$scope.endmnth = new Date().getMonth()
$scope.datepickerOptions = {
startingDay: 1,
};
$scope.openfromDate = function ($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.date_opened = true;
};
You can add "dateDisabled: this.disabledDates" as part of your options, and then create a function like this:
this.disabledDates = function(data) {
var date = moment(data.date);
//check date and return true/false to disable/enable
return false;//to disable
}
I am using the Bootstrap 3 Date/Time Picker (https://github.com/Eonasdan/bootstrap-datetimepicker) and I have problems
formatting the date
<input type="text" id="fmEndDate" class="form-control input-sm"
datetimepicker
format="DD-MM-YYYY hh:mm"
ng-model="workRequest.EndDate"
placeholder="..."
name="fmEndDate"
required
ng-disabled="isDisabled">
But the value is being display as MM/DD/YYYY hh:mm AM
i want 31-12-2017 23:59 for new year eve timestamp
This is my directive
"use strict";
angular.module("datetimepicker", [])
.provider("datetimepicker", function () {
var defaultOptions = { };
this.setOptions = function (options) {
defaultOptions = options;
};
this.$get = function () {
return {
getOptions: function () {
return defaultOptions;
}
};
};
})
.directive("datetimepicker", [
"$timeout",
"datetimepicker",
function ($timeout,datetimepicker) {
var defaultOptions = datetimepicker.getOptions();
return {
require : "?ngModel",
restrict: "AE",
scope : {
datetimepickerOptions: "#"
},
link : function ($scope, $element, $attrs, ngModelCtrl) {
var passedInOptions = $scope.$eval($attrs.datetimepickerOptions);
var options = jQuery.extend({}, defaultOptions, passedInOptions);
$element
.on("dp.change", function (e) {
if (ngModelCtrl) {
$timeout(function () {
ngModelCtrl.$setViewValue(e.target.value);
});
}
})
.datetimepicker(options);
function setPickerValue() {
var date = options.defaultDate || null;
if (ngModelCtrl && ngModelCtrl.$viewValue) {
date = ngModelCtrl.$viewValue;
}
$element
.data("DateTimePicker")
.date(date);
}
if (ngModelCtrl) {
ngModelCtrl.$render = function () {
setPickerValue();
};
}
setPickerValue();
}
};
}
]);
Any ideas?
As shown in the bootstrap3 docs you can define custom formats in JavaScript:
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'your desired Formatting style'
});
});
</script>
</div>
</div>
Even more simple:
$("#fmEndDate").datetimepicker({format: 'dd-mm-yyyy hh:ii'});
Sidenote: Be careful with Date/Time formatting:
As for AngularJS HH format will result in hours as 00-23. While in Bootstrap3 which you are also using HH will result in hours as 01-12.
I highly suggest you to use a library like MomentJS which is doing the troublesome work for you.
Regards,
Megajin
I want to keep the selected date in UTC format.
But the pop-up calendar is not sync with the selected datetime.
Lets's say when I click 08/13 and the selected date is 08/12
Because in my timezone is 08/13 but the it's still on 08/12 with UTC timezone
HTML
<div class="col-sm-10" ng-click="open($event)">
<input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-valid-date ng-valid-required" datepicker-popup="yyyy/MM/dd" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" required="required" aria-required="false" aria-invalid="false" ng-model="form.start_date" />
</div>
JS controller
app.controller('FlightSkuStartDatepickerCtrl', ['$scope',
function($scope) {
// Disable weekend selection
$scope.disabled = function(date, mode) {
return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));
};
$scope.toggleMin = function() {
$scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1,
class: 'datepicker'
};
$scope.formats = ['YYYY/MM/DD'];
$scope.format = $scope.formats[0];
}
]);
If you are storing it as UTC why do you have problem with keeping it as UTC?. If you want to change your time from UTC to another timezone you can use moment for angular. But you must give moment a timezone for converting. For example:
function utctoTimeZoneFormat(date, current_tz) {
var offset = moment(date).tz(current_tz).utcOffset();
var returnObj = {
"day": "",
"time": ""
}
returnObj.day = moment.utc(date).tz(current_tz).utcOffset(offset).format('dddd');
returnObj.time = moment.utc(date).tz(current_tz).utcOffset(offset).format('HH:mm:ss')
return returnObj;
}
You can pass date parameter as your selected date from the UI and current_tz as your timezone. But you must pass it like " America/Los_Angeles" as title of timezone.
function timeZoneToUTCFormat(date, current_tz) {
var offset = moment(date).tz(current_tz).utcOffset();
offset = offset * -1;
var returnObj = {
"day": "",
"time": ""
}
returnObj.day = moment.utc(date).tz(current_tz).utcOffset(offset).format('dddd');
returnObj.time = moment.utc(date).tz(current_tz).utcOffset(offset).format('HH:mm:ss')
return returnObj;
}
The second function enables you to store your selected date as UTC. You should pass the parameters accordingly. For example; if you are in "America/Los_Angeles" you should pass your timezone as the given string and you'll convert it to UTC. So you can sync your UI and backend by using the two functions written above.
In the newer versions of ui-datepicker there is an easier way to solve this
ng-modal-options='{"timezone":"utc"}'
this remove the timezone component from date
In older versions
The solution is to remove the timezone component of the date part (better have directive for reusability...
myapp.directive("dateToIso", function () {
var linkFunction = function (scope, element, attrs, ngModelCtrl) {
ngModelCtrl.$parsers.push(function (datepickerValue) {
return moment(datepickerValue).format("YYYY-MM-DD");
});
};
return {
restrict: "A",
require: "ngModel",
link: linkFunction
};
});
You can use it like below
<input ng-model='abc' date-to-iso ui-datepicker>
I have a watcher on a $scope variable which sets off a function to change the $scope variable to the beginning of the week of the date chosen. The function is returning the correct date but when I try to set the $scope variable to that date the view does not update. But checking it inside the inspector the $scope variable is changed but the view never updates. Here is the $watch function:
angular.module('hansenApp', ['ngAnimate', 'ui.bootstrap']);
angular.module('hansenApp').controller('DatepickerCtrl', function ($scope) {
$scope.startDate = new Date();
$scope.endDate = new Date();
$scope.status = {
startOpened: false,
endOpened: false,
};
$scope.openStart = function ($event) {
$scope.status.startOpened = true;
};
$scope.openEnd = function ($event) {
$scope.status.endOpened = true;
};
$scope.$watch('startDate', function (dateVal) {
var oldDate = new Date(dateVal);
var tempDate = getStartDateOfWeek(dateVal);
if (oldDate.getTime() != tempDate.getTime()) {
$scope.startDate = tempDate;
}
});
$scope.$watch('endDate', function (dateVal) {
var oldDate = new Date(dateVal);
var tempDate = getEndDateOfWeek(dateVal);
if ($scope.endDate.getTime() != tempDate.getTime()) {
$scope.endDate = tempDate;
}
});
function getStartDateOfWeek(date) {
var ISOweekStart = date;
ISOweekStart.setDate(date.getDate() - date.getDay());
return ISOweekStart;
}
function getEndDateOfWeek(date) {
var ISOweekEnd = date;
ISOweekEnd.setDate(date.getDate() + (6 - date.getDay()));
return ISOweekEnd;
}
});
Edit 1: Here's the view:
<p class="input-group">
<input type="text" id="endDate" class="form-control" uib-datepicker-popup="MM/dd/yyyy" ng-model="endDate" is-open="status.endOpened" close-text="Close" placeholder="End Date:" runat="server" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openEnd($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
You do not change the reference of the date, but just the value of it.
A Date is an object in javascript, hence if you do not change the reference (replace it by a new Date() object) the angular change detector will not trigger again.
So you will have to replace the startDate by a completely new instance of a javascript date with the given properties.
So replace
var ISOweekEnd = date;
by
var ISOweekEnd = new Date();
Hi I have situation where I have to format certain values using ng-init as well as have ng-model for two way binding in input field so value can be changed and saved.
<div ng-repeat="ab in ablist">
<div class="col-sm-3">
<input type="text" ng-init="item.ab=fn(item.ab)" ng-model="item.ab" />
</div>
</div>
The above code doesnt work. It does not show the formatted value.
Can you let me know how I can change this so I can display the formatted value using ng-init but as well as keep ng-model for binding edited value on submit.
In this case you have to use directive. ng-init is to be used when you want to set some default or initial value to any control. Directive can keep your display value and your model value in separate formats. Here is a directive for formatting integers with commas.
app.directive('formattednumber', function () {
return {
link: function (scope, element, attrs, ctrl) {
element.bind('blur', function (blurEvent) {
if (element.data('old-value') !== element.val()) {
// console.log('value changed, new value is: ' + element.val());
scope.$apply(function () {
var v = number_format(element.val(), 0, 0, 99999999999);
element.val(v);
//scope.myDirective = element.val();
//element.data('old-value', element.val());
});
}
});
ctrl.$formatters.unshift(function (modelValue) {
if(!modelValue) modelValue="0";
if(modelValue.replace &&(isNaN(parseFloat(modelValue)) || !isFinite(modelValue)))
{
modelValue = parseFloat(modelValue.replace(/,/g, ""));
}
var v = number_format(modelValue, 0, 0, 99999999999);
v = v == undefined? 0 : v;
element.val(v);
return v;
});
ctrl.$parsers.unshift(function (viewValue) {
if(!viewValue) viewValue="0";
viewValue = parseInt(viewValue.replace(/,/g, ""));
var v = number_format(viewValue, 0, 0, 99999999999);
v = v == undefined? 0 : v;
element.val(v);
return viewValue;
});
},
restrict: 'A',
require: 'ngModel'
}
});
Similarly, you can write one for date formatting. You can use Date.js for the same.
The usage is :
<input type="text" ng-model="item.amount" formattednumber />
What about this:
<div ng-repeat="ab in ablist">
<div class="col-sm-3">
<input type="text" ng-init="item=fn(ab)" ng-model="item" />
</div>
</div>