I use angular strap datePicker
<input type="text" name="dateFrom" ng-model="dateFrom" bs-datepicker
data-end-date="{{endDate}}" data-start-date="{{startDate}}" />
How ever when change endDate or startDate from code it does update in the DOM but the date picker remains unaware of this change, is there some kind of update I need to trigger?
The change is done via a ng-click with function on the same scope, that then sets a new value for endDate and startDate.
Like so (CoffeeScript):
$scope.setDateRange = (dateRange) ->
if dateRange is "past"
$scope.endDate = "-1d"
$scope.startDate = ""
if dateRange is "now"
$scope.endDate = ""
$scope.startDate = ""
if dateRange is "future"
$scope.endDate = ""
$scope.startDate = "+1d"
Edit:
Here is the solution:
On the controller constructor I store the date from and to controls:
dateFromCtrl = $element.find 'input[name="dateFrom"]'
dateToCtrl = $element.find 'input[name="dateTo"]'
Then when setDateRangeis called I made few helper methods to call the datepicker setEndDate and setStartDate methods:
setEndDate = (date) ->
dateFromCtrl.datepicker 'setEndDate', date
dateToCtrl.datepicker 'setEndDate', date
setStartDate = (date) ->
dateFromCtrl.datepicker 'setStartDate', date
dateToCtrl.datepicker 'setStartDate', date
setDateRange = (dateRange) ->
if dateRange is "past"
setEndDate "-1d"
setStartDate ""
if dateRange is "now"
setEndDate ""
setStartDate ""
if dateRange is "future"
setEndDate ""
setStartDate "+1d"
Try using the setStartDate() and setEndDate() calls:
http://bootstrap-datepicker.readthedocs.org/en/latest/methods.html#setstartdate
Or you might look at the datepicker that is now provided by the Angular folks, so it has especially nice integration within Angular: http://angular-ui.github.io/bootstrap/
Related
In my application i use $scope variables of momemt type.
I'am use md-datepicker from Angular Materialjs for change dates variables at ng-model.
md-datepicker work only with Date type, which I can convert from moment, but after change data by md-datepicker $scope variables change type from Moment to Date.
How to convert result md-datepicker Date type back to moment type?
This is need for use it in other functions which use moment.
<md-datepicker ng-model="momentfrom" md-open-on-focus="true" name="dateFrom" >
</md-datepicker>
The momentfrom variable after work with md-datepicker change type to Date, which need convert to moment.
app.config(['$mdDateLocaleProvider', function ($mdDateLocaleProvider) {
$mdDateLocaleProvider.parseDate = function(dateString) {
var m = moment(dateString, ["DD.MM.YYYY"],true);
return m.isValid() ? m.toDate() : new Date(NaN);
};
$mdDateLocaleProvider.formatDate = function (date) {
return date ? moment(date).format('DD.MM.YYYY') : '';
};
}]);
Your formatting for moment is wrong. Use this in the formatDate function:
return moment(date).format('YYYY-MM-DD');
if you want to set the date to be null on load, then use change the return to this:
return date ? moment(date).format('YYYY-MM-DD') : '';
Refer to the AngularJS Material docs for further information on $mdDateLocaleProvider functionalities.
I'm currently working on a project using React.js.
I’m using material-ui datepicker and I'm blocking all dates except the 14 upcoming dates. What I want is that every Thursday I get 14 new dates in my datepicker.
I'm supposed to add my beginningOfWeek and endOfWeek into my maxDate and minDate, but it's currently not working and I can't figure out how to get it right.
It types out the correct answer in the log but when I press the datepicker I'm getting an error and the debugger says:
TypeError: d2.getFullYear is not a function at monthDiff
What am I doing wrong?
I've used this example for my own code. How to get the date ranges of a given week number in JS
This is my code:
var moment = require('moment');
const w = moment().weekday();
const daysToSubtract = (w + 3)%7;
const beginningOfWeek = moment(new Date()));
const endOfWeek = moment(new Date()).add(-daysToSubtract, 'days');
console.log(beginningOfWeek.format('MM/DD/YYYY h:mm a'),
endOfWeek.format('MM/DD/YYYY h:mm a'))
<div className="center-container">
<DatePicker hintText={newdate} mode="landscape" maxDate={endOfWeek}
minDate={beginningOfWeek}/>
</div>
I solved it by doing this. I changed my maxDate into maxDate = {new Date(endOfWeek)}/>
const moment = require('moment');
const w = moment().weekday();
const daysToSubtract = ((w + 3 + Math.floor(hours/16)))%7 ;
const beginningOfWeek = moment().add(-daysToSubtract, 'days');
const endOfWeek = moment().add(14-daysToSubtract, 'days');
console.log(beginningOfWeek);
console.log(endOfWeek);
<div className="center-container">
<DatePicker hintText={newdate} mode="landscape" minDate={new
Date()} maxDate = {new Date(endOfWeek)}/>
</div>
This should be simple and I believed all my code is correct, but I suppose it is not.
I have two Datepickers. Datepicker 2 should be setting it's minDate to the value of datepicker 1. This works, as I can see the min-date attr updating when I select a date on Datepicker 1, but Datepicker 2 does not re-render the disabled dates. I feel like I should be refreshing the Datepicker somehow, but unsure how.
// Datepicker Controller
app.controller('datepickerController', ['$scope', function($scope) {
// open depart date
$scope.openDepartDatepicker = function($event) {
$event.preventDefault();
$event.stopPropagation();
// open depart datepicker
$scope.departDatepickerOpen = true;
}
// open return date
$scope.openReturnDatepicker = function($event) {
$event.preventDefault();
$event.stopPropagation();
// open return datepicker
$scope.returnDatepickerOpen = true;
}
$scope.$watch('search.searchparams.journeys[0].departuredate',function(value){
$scope.returnMinDate = value;
});
// minDate set intiitally
$scope.departMinDate = new Date();
$scope.returnMinDate = new Date();
// date options
$scope.departDateOptions = {};
$scope.returnDateOptions = {};
// date format
$scope.dateFormat = 'EEE dd/MM/yyyy';
}]);
And here is the actual input
<input id="returnDate" placeholder="Returning" type="text" class="form-control" data-ng-model="search.searchparams.journeys[1].departuredate" datepicker-popup="{{dateFormat}}" data-ng-focus="openReturnDatepicker($event)" show-button-bar="false" min-date="{{returnMinDate}}" is-open="returnDatepickerOpen" datepicker-options="returnDateOptions" readonly=""/>
Nothing I have tried has made a difference. The new minDate is updating, but just not being applied to the Datepicker. I can actually see the updated min-date attribute in my inspector, so all values are updating as expected.
Any help appreciated
The issue is so simple and so silly.
min-date="{{returnMinDate}}"
needs to be
min-date="returnMinDate"
It smacked me right in the face this morning.
I am trying to create an AngularJS datepicker on the push of a button. I am using this bootstrap-ui control. The control works (pops up on the click of a button, and I can select a date), but I can't seem to set the initial date back from the scope (so that when it is first opened, the designated date is already selected).
The error I get in the Chrome console is:
Datepicker directive: "ng-model" value must be a Date object, a number of milliseconds since 01.01.1970 or a string representing an RFC2822 or ISO 8601 date.
jade:
button(type="button" ng-model="date.from" btn-radio="'From'" ng-click="date.openFromPopup($event);" show-weeks="false" show-button-bar="false" datepicker-popup = "date.format" is-open = "date.fromOpened" min = "date.minDate" max = "date.today") From
Since I have a watch on $scope.date.from, I can confirm that the selected date is correct, but I can never set it from the controller. Any ideas?
AngularJS controller:
$scope.date = {};
$scope.date.format = "yyyy/MM/dd";
$scope.date.opened = false;
$scope.date.from = new Date();
$scope.date.today = new Date();
$scope.date.minDate = null;
$scope.date.fromOpened = false;
$scope.$watch('date.from', function(v) {
if(v){
alert(v);
}
});
In the example on the angular-ui page, it says to use it like this...
$scope.from = function() {
$scope.dt = new Date();
};
$scope.from();
Does that work?
I have two datepicker textbox From date and To Date... I need default in From date this month start date and To date today's day...
How to set default dates in Angularjs Datepicker textbox..?
I am not sure what you mean by a datepicker textbox.
Are you using a date input?
<input name="dateInput" type="date" ng-model="date"/>
If so in the controller you need to set the ng-model variable, in this case, $scope.date to the default date you want to use
e.g. to use today's date
var d=new Date();
var year=d.getFullYear();
var month=d.getMonth()+1;
if (month<10){
month="0" + month;
};
var day=d.getDate();
$scope.date=year + "-" + month + "-" + day;
I have set up a plunkr at http://plnkr.co/edit/WJ86aB?p=preview
If so in the controller you need to set the ng-model variable, in this case, $scope.date to the default date you want to use
e.g. to use today's date
$scope.date = new Date();
In your html:
<input name="dateInput" type="date" ng-model="date"/>
$scope.date = new Date().toLocaleDateString()
<input datepicker data-ng-model="date" type="date" />