I am using Pikaday date picker plugin in my angular JS app.
Is it possible to have different format for view and different format while submitting?
For ex: 01 Jan 2014 (Display)
01/01/2014 (while submitting the form)
I know i can apply a filter while posting the content. However, since the date picker is been used in many places i have to do it at all the places separately. It will be great if the plugin updates my ng-model with a certain format but displays it differently.
You can get this by using angularjs directive (formatters and parsers).
For example using moment.js:
app.directive('fdate', function () {
return {
require: 'ngModel',
link: function(elem, $scope, attrs, ngModel){
ngModel.$formatters.push(function(val)
{
return moment(val).format("DD/MM/YYYY");
});
ngModel.$parsers.push(function(val){
return moment(val, "DD/MM/YYYY").valueOf();
});
}
}
});
and in your html:
<input type="text" ng-model="obj.yourdate" fdate>
i found this fiddle as an example:
http://jsfiddle.net/arunpjohny/wNBAn/
Related
I wanted to use an input[date] inside a form to enable users to use the modern browsers' support, without using a javascript datepicker.
For the ones who're using not supporting browsers, I'v set ui-mask. Both work together.
I use the french format (dd/mm/YYYY).
<input type="date" ng-model="myDate" ui-mask="99/99/9999">
$scope.myDate = new Date("2016-02-12"); // works
$scope.myDate = "12/02/2016"; // Doesn't...
In an empty form, no problem, Angular accept it.
But with a filled form, Angular expects a date format I don't want : YYYY-mm-dd (javascript date object).
I can't understand why Angular only provides support that format, and not others like french format. Because I want the input[date] to show the french format, not the standard one !
Many modern browsers provides interesting support for dates, I can't understand why Angular waste that.
Or maybe I missed something ?
To achieve your goal need to use momentJs and ngModel $parsers and $formatters. Below some code and JSFiddle example:
In your controller you prepare some string value in french date format:
$scope.myDate= '12/02/2016';
In view you set this value to ngModel attribute of input[type=date] element:
<input class="form-control" type="date" ng-model="myDate">
You need to create new directive, it can be assigned to input element:
.directive('input', function(dateFilter) {
return {
restrict: 'E',
require: '?ngModel',
link: function(scope, element, attrs, ngModel) {
if (
'undefined' !== typeof attrs.type && 'date' === attrs.type && ngModel
) {
ngModel.$formatters.push(function(modelValue) {
return moment(modelValue, "DD/MM/YYYY").toDate();
});
ngModel.$parsers.push(function(viewValue) {
return moment(viewValue).format("DD/MM/YYYY");
});
}
}
}
})
New function in $formatters array modifies your myDate to javascript date object (with moment parser it's pretty simple). New function in $parsers array modifies value of input element back to french formatted date string.
This solution provides two way binding between your myDate and input[type=date] element. :)
Look at JSFiddle exaple
I am using angular-strap datepicker from http://mgcrea.github.io/angular-strap/##datepickers for my angularjs SPA project. when editing an existing record using ngModel two way binding, Angular doesn't detect the date field change and even if I force the form to save by updating another non date field, the new date is not updated in backend. Here is the related part in my html file:
<input name="DecisionDatePicker" id="ddpID" type="text" class="form-control input-medium" tabindex="14" placeholder="{{vm.format}}"
data-date-format="MM-dd-yyyy"
data-ng-model="vm.formData.dateDecision"
data-ng-required="vm.decisionDateRequired"
bs-datepicker />
I do not do anything special in my js file. I am using breezejs for my data handling and it is working fine for other fields.
what am I doing wrong? Any help is appreciated.
I've had this same problem and I solved with a custom directive that updates the model when the bs-datepicker dispatches a blur event:
angular.module('moduleName').directive('updateModelOnBlur',
['$parse', function($parse) {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, elm, attrs) {
elm.bind("blur", function (event) {
scope.$apply(function () {
var model = $parse(attrs.ngModel);
model.assign( scope, elm.context.value );
});
});
}
};
}]
);
I know this is just a hack, and not a final solution for the problem. But, if you are stuck and want to keep going, sometimes a hack might be useful.
You can also include $filter service in the directive if you want to manipulate date format before updating model. ;)
I'm a little lost here. I defined an angular directive that creates a datepicker (the bootstrap datepicker by eternicode(https://github.com/eternicode/bootstrap-datepicker/)):
The datepicker appears to work visually. It pops up, and puts a value in my textbox. But the angular model is not updated unless I edit the textbox by hand.
My directive:
myApp.directive('ccDatePicker', function ($compile) {
return {
restrict: 'EA',
template: '<input type="text" ng-model="ngModel" />',
require: '^ngModel',
scope: {
ngModel: '='
},
replace: false ,
link: function (scope, element, attrs) {
element.children(0)
.on('change', function () { scope.$digest(); })
.datepicker({ format: 'yyyy/mm/dd', autoclose: true });
}
};
});
My HTML:
<label>Due date: <cc-date-picker ng-model="todoObject.dueBy" /></label>
<div>
dueBy: {{todoObject.dueBy}} (updates when editing textbox by hand, but not when using date picker)
</div>
I used scope.$digest to refresh the model, and I also tried scope.$apply. No luck.
How do I get my angular model to update when the user chooses a date in the date picker?
I had a similar problem when trying to make a datepicker directive based on a jQuery plugin, because the datepikcer's onSelect() event happens outside the angular world and no notifications are raised, you need to call a $scope.$apply() force a digest to let angular know that it should update the model value:
onSelect: function (date) {
scope.$apply(function () {
ngModelCtrl.$setViewValue(date);
});
}
Also in the snippet you posted, I don't see where you're setting the models value, hence this line:
ngModelCtrl.$setViewValue(date);
EDIT
I made a plunk demonstrating what needs to be done. On an unrelated note, why don't you use the angular-ui datepicker?
if you set the dueBy date first (eg.
$scope.todoObject={dueBy:"04/27/2015"};
how to make the dropdown show the initial value when it's first displayed?
http://plnkr.co/edit/xOzfQOOMe1GFoB1tfQiF?p=preview
i want create an angular directive for persian datepicker, javascript lib that i want to use is http://jspersiandatepicker.codeplex.com/, and my code is :
<input type="text" persiandatepicker ng-model="mydate" />{{mydate}}
directive('persiandatepicker', function() {
return {
restrict: 'A',
require: '?ngModel',
link: function (scope, element, attrs, ngModel) {
if (!ngModel) return;
ngModel.$render = function () {
element.bind("click", function () {
PersianDatePicker.Show(this, ngModel.$viewValue || '');
});
};
}
};
});
this code show datepicker when click on input and when select date show in input, but model not bind and not change how can i do binding in this sample??
this link in plunker is my code : http://plnkr.co/edit/AQsvlbdGHCVpjMeCbR3c?p=preview
You need to let angular know that the value has changed. It looks like the datepicker calls _textBox.onchange(); when it is finished updating the textbox so you can hook into that event. You will need to wrap your code in
element.bind("onchange", function () {
scope.$apply(function() {
//Code to update model goes here.
//Basically you will need to copy the textbox's contents to the model,
// you may wish to convert to a date object as well
}
}
The angularui datepicker source code is only 120 lines long and could be a great resource if you are looking for an example on creating a datepicker directive.
Currently there is a good one Available. it's a Persian angularjs calendar:
Amin Rahimi's angularjs Datepicker .
Also you can use this version of angular-ui bootstrap that has persian calendar: persian angular bootstrap
Hello All,
I am running into some problems when using the Kendo-UI date picker in my angular application. Any help would be greatly appreciated.
Thanks in Advance, Drew
Issue
When using the angular-kendo directive for the date picker along with a date format a date object put into the model. The desired behavior is to store a string in the model as formatted by the options.
Javascript Versions
Angular-Kendo 0.5.2 2013-07-26
AngularJS v1.0.5
jQuery jQuery v1.9.1
Snippet from Template
<input type="text" name="publicationDate" ng-model="preview.publicationDate" kendo-date-picker="dateOptions" k-options="dateOptions" />
Date Options
$scope.dateOptions = {
format: "yyyy-MM-dd"
};
Output
Date object stored in model: Tue Sep 17 2013 00:00:00 GMT-0400 (EDT)
Desired string to be stored in model: 2013-09-17
Questions
Is there any remedy for this issue?
Am I using the directive correctly?
In Kendo UI 2014 Q2 (2014.2.625), this is fixed by using k-ng-model instead of ng-model.
I think what is going on is that when you are binding through ng-model, kendo is returning the value of
.value()
In your controller, I believe you can do this:
$scope.$watch('preview.publicationDate'), function (val) {
if (val) {
$scope.preview.publicatonDate = kendo.toString(val, "yyyy-MM-dd");
}
});
This code helps to change the kendo-date-time-picker to the desired format
<input kendo-date-time-picker
k-options="monthSelectorOptions"
k-format="'dd/MM/yyyy hh:mm tt'" />
Possible Solution
I was able to do a work around by creating a custom directive.
The sample provided by another stack overflow post here demonstrates how to create a custom directive.
I still have some additional testing to do but it seems to be working. I am not sure if this is the most efficent way to get around the problem though.
Snippet from Template
<input type="text" parsedate="yyyy-MM-dd" name="publicationDate" ng-model="preview.publicationDate" kendo-date-picker="" k-options="dateOptions"/>
Custom Directive
module.directive("parsedate", function () {
return {
require: "ngModel", link: function (scope, element, attr, ngModel) {
function parsedate(text, format) {
return kendo.toString(text, attr.parsedate);
}
ngModel.$parsers.push(parsedate);
}
};
});