I have an api which return the date in this format "014-08-26T15:10:45.402Z" i am using angular kendo ui .The problem i am facing is the date is not getting bound to the kendo date picker.Could someone help me out .
<input kendo-date-picker ng-model="emp.datestart" k-format="MM/dd/yyyy" />
In order to have the Kendo DatePicker working with a string date value model you need:
1) Use k-ng-model instead of ng-model.
2) Tell the widget in which exact format the date will be parsed.
<input kendo-date-picker k-ng-model="emp.datestart" k-options="datePickerOptions" />
Then at your AngularJS controller you will specify the date parsing format, for example:
$scope.datePickerOptions = {
parseFormats: ["yyyy-MM-ddTHH:mm:ss"]
};
you can use something like this
<h4>Select date:</h4>
<input
kendo-date-time-picker
k-options="monthSelectorOptions"
data-k-ng-model="dateObject"
data-ng-model="dateString.startDate"
style="width: 100%;" />
var startDate = new Date();
$scope.monthSelectorOptions = {
value: startDate,
format: "dd/MM/yyyy h:mm tt",
parseFormats: ['ddd MMM dd yyyy'],
animation: {
close: {
effects: "fadeOut zoom:out",
duration: 300
},
open: {
effects: "fadeIn zoom:in",
duration: 300
}
},
culture: "de-DE",
};
And here is complete solution on kendo dojo
Related
I have a react-datepicker component inside my form and i am trying to put a placeholder which says "please select a date" but datepicker only shows the date.I did research and some people say placeholder shows only if selected={...} is false but i don't know how to make my selected={} false on default and show on toggle.
I tried to use react-datepicker's code,it is placeholderText="" but i couldn't implemented it
this is my state in my form;
bookTime: {
data: new Date(),
name: "bookTime",
category: "text",
everFocused: false,
isValid: true,
extra : {
label:"Randevu Tarihi*",
help: "Geçersiz Alan!"
}
},
this is my datepicker component;
<DatePicker className="turkish"
locale={tr}
placeholderText="Please select a date"
onChange={this.handleChangeDatePicker}
onChangeRaw={this.handleDateChangeRaw}
selected={bookTime.data }
showTimeSelect
minTime={setHours(setMinutes(new Date(), 0), 7)}
maxTime={setHours(setMinutes(new Date(), 0), 22)}
minDate={subDays(new Date(), 0)}
timeFormat="HH:mm"
timeIntervals={60}
dateFormat="HH:mm,d MMMM yyyy"
timeCaption="Saat"
/>
placeholderText={'Please select a date'}
It work!
It seems like you are setting the current date as the bookTime.date at the initialization. So the selected value will not be empty at the start.
Try setting bookTime.date value to false at the initialization. Whenever a new date is picked, it (this.handleChangeDatePicker) should update the date.
I'm using the angular Jquery UI datepicker(https://github.com/angular-ui/ui-date) for selecting the date of birth.
The datepicker correctly picks and displays time when I click on it. But, the value is saved as midnight of my current timezone(+0530).
For example, if the date 30/04/1981 is selected the actual model value: 1981-04-29T18:30:00.000Z. I understand that this is the expected behaviour, but for the case of setting the dob, the value should not change from country to country.
Is there an elegant way to convert this value to UTC 00.00:000z? While preserving the date selected in the current time zone?
html is given below,
<div>
<input ui-date="dateOptions"
name="dob"
ng-model="passenger.dob"
class="form-control"/>
</div>
<p>{{passenger.dob}}</p>
dateOptions are as follows,
self.dateOptions = {
changeYear: true,
changeMonth: true,
minDate: self.minDate,
maxDate: self.maxDate,
dateFormat: 'dd/mm/yy',
weekHeader: "Wk",
yearRange: "-100:+0",
showOn: "both",
buttonImage: "images/calendar.png"
};
Its working fine here in my punker.. https://plnkr.co/edit/sBdu1J?p=preview
I have a problem with AngularUI datepicker when i want to use 2 calendar in range each other.
When i select date in first calendar, the min date of the second calendar need to be higher than first.
So far no problem !
But, when i open the second calendar, the first date is good, but i can't click on date or can't switch month! Nothing do...
Here is my code
HTML :
<div ng-controller="test">
From <input id="from" ng-model="from" ui-date="formatCalendar" ng-change="updateDate()">
To <input id="to" ng-model="to" ui-date="formatCalendar2">
</div>
Javascript :
function test($scope){
$scope.to = null;
$scope.from = null;
$scope.formatCalendar = {
minDate: 0,
maxDate: 365,
defaultDate: "+1w",
numberOfMonths: 2,
changeMonth: true,
dateFormat: 'dd/mm/yy'
};
$scope.formatCalendar2 = {
defaultDate: "+1w",
numberOfMonths: 2,
changeMonth: true,
dateFormat: 'dd/mm/yy'
};
$scope.updateDate = function(){
$scope.formatCalendar2.minDate = $scope.from;
};
}
You can see demon # http://plnkr.co/edit/4tTHEIUzVRyQJ7NOCIAs?p=preview
Thanks for help :)
By looking at the source of ui-date, it seems that it has a watch on the whole config object. That watch will only fire if your config object is replaced, and not if you only modify a property on it. Something like this might work:
$scope.updateDate = function(){
// Just a simple way to clone the object to trigger
// the watch in ui-date
$scope.formatCalendar2 = JSON.parse(JSON.stringify($scope.formatCalendar2));
$scope.formatCalendar2.minDate = $scope.from;
};
EDIT:
Misread the code, the watch does fire because getOptions() returns a new object every time. I was able to get your code running here: http://jsbin.com/yibehape/2/edit
It sets the min date for the To field when changing the From field. So I'm guessing that there's some logical error in your code that you haven't showed us. You seem to have removed your plunker, did you get it working?
I am using ui-date directive (https://github.com/angular-ui/ui-date).
This UI Calendar component is getting Date by default. Can I get only month and year without dates.
How to get only month and year?
I don't know ui-date directive, but I had exactly the same need than you.
You can use eternicode's fork of bootstrap-datepicker and look for the min view mode parameter which will fit your need.
Following Code work for me. Thanks
$scope.expireDate = {
dateFormat: 'mm-yy',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function() {
function isDonePressed() {
return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
}
if (isDonePressed()) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
};
$scope.setExpireDate = function() {
$(".ui-datepicker-calendar").hide();
$("button.ui-datepicker-current").css("display", "none");
};
Use minMode:'month' in the datepicker-options and it will work.
There is an angular version of the eternicode's bootstrap-datepicker here:
angular-bootstrap-datepicker
I want a date picker in my cell so i have created a cell template
var myDateTemplate= '<input type="text" ng-model="row.entity.myDate" />';
my col model is
var col = [{
field : 'myDate',
displayName : 'My Date',
enableCellEdit : true,
width : '130',
cellTemplate : myDateTemplate,
editableCellTemplate : myDateTemplate,
resizable : true,
sortable : false
}]
it works fine and when i choose date i get it in mm/dd/yyyy format i want to change it to dd/mm/yyyy format to i added ui date format
var myDateTemplate = '<input ui-date="{ dateFormat: 'dd mm yyyy' }" ui-date-format="dd mm yyyy" ng-model="row.entity.myDate"/>';
when i use ui date format it will throw a error
Error: Syntax Error: Token 'undefined' not a primary expression at column NaN of the expression [{ dateFormat:] starting at [{ dateFormat:]
and it is giving the date like
Mon Dec 23 2013 00:00:00 GMT+0530 (India Standard Time) instead of my preffered format.
I think you're close, just escape the quotes around your date format to make the proper string:
var myDateTemplate = '<input ui-date="{ dateFormat: \'dd mm yyyy\' }" ui-date-format="dd mm yyyy" ng-model="row.entity.myDate"/>';
I'm not using the exact same cellTemplate you are (presumably your input field will work correctly once you escape the quotes). This is working for me:
columnDefs: [{
field:'StartTime',
displayName:'Start Time',
cellFilter: 'date:\'MM/dd/yyyy HH:MM:ss\''
}, {
field:'duration', displayName:'Duration'
}, {
field:'distance', displayName:'Distance'
}, {
field:'typedesc', displayName:'Type'
}, {
field:'Drivers', displayName:'Drivers'
}]