I am using Angular UI Bootstrap dirrective for Datepicker. I have list of dates, that I set in calendar as active (i.e. other dates are disabled).
Here is my date list - ["10/16/2015", "11/20/2015", "12/18/2015"]
UI Datepicker always open current date/month. How can I make, so calendar would open on specific date, even if this date is from previous year?
I found option defaultViewDate option, but it seems that it doesn't work (at least I didn't find this method in tpl library)
Any ideas how I can make that?
Thanks!
Given Angular UI's documentation on its datepicker, the calendar adapts to a date set on the ng-model, so all you'd have to do is create a date:
new Date(year, month, day, hours, minutes, seconds, milliseconds);
See w3schools for more on that.
Set the model to that and you should be good to go. Let us know if it works.
EDIT:
To set the initial date when no date is specified, use init-date by creating a default date on the scope of the parent controller.
angular.module("yourModule").controller("parentCtrl", function($scope) {
$scope.initialDate = new Date(2000, 5, 4);
}
And the HTML:
<div ng-controller="parentCtrl">
<datepicker init-date="initialDate"></datepicker>
</div>
Hope it helps.
Related
I use the jquery datepicker in an Angular Application and I noticed a behavior that I would like to prevent.
The application consists of an input field for the date and a select box for a month selection.
If the months in the select box are changed, the minDate of the jquery date picker should be adjusted.
I tried the following example:
I set the date in the input field to the 24.04.2018
I chose October
The date of the input field is automatically set to 24.10.2018
I do not want the content of the Inputs field to be automatically adjusted.
Here is my git-hub project: https://github.com/annalen/jquery-datepicker
Many thanks for the help
Solution
I use the beforeShow and onClose date-picker functions
jQuery(yourElement).datepicker('option', 'beforeShow', function (date) {
return {
'minDate': yourMinDate,
'maxDate': yourMaxDate
};
});
jQuery(yourElement).datepicker('option', 'onClose', function (date) {
jQuery(this).datepicker('option', {
'minDate': null,
'maxDate': null
});
});
The datepicker updates the date only if the selected one is out of the range.
For example, if the current selected date is 24.04.2018 and you set the minDate to 20.04.2018, nothing will happen.
But if you set it to any date after 24.04.2018, it will get updated. I believe it's normal since its the purpose of setting a minDate.
You can always set yourself manually the input's value: $('#datepicker').val('20.04.2018') but I don't think it's a good idea to have something displayed different than the internal datepicker component state (the calendar that will popup will show a different date than the one in the input)
Regards,
Vincent
I am trying to integrate the Bootstrap 3 Date/Time Picker v4.17.42 into a webpage. I have a text field that is pre-populated with a date prior to calling the datepicker.
The field is as follows;
<input value="19/02/1986" class="form-control datepicker" type="text" name="patient[date_of_birth]" id="patient_date_of_birth">
and I call the datepicker like so;
$('.datepicker').datetimepicker({
format: 'DD/MM/YYYY',
useCurrent: false,
maxDate: new Date(),
minDate: now.setFullYear(now.getFullYear() - 110)
});
When I click in the text field the datepicker appears, but it shows the current month rather than February 1986. If I click out of the field and then back in, the datepicker disappears then reappears set correctly to February 1986.
What do I have to do to so the correct month appears the first time the datepicker is opened?
You can force a refresh programatically after the initialize:
$('.datepicker').datetimepicker('setDate', new Date(1986, 02, 19));
$('.datepicker').datetimepicker('update');
You can also add a property to the object when initalizing:
setDate: new Date(1986, 02, 19)
To use default data just try this
$("#datepicker").datepicker("setDate", new Date());
In this script new Date() returns the current value that will be assigned to setDate attribute.
Like you said, this is a bug in the latest versions, tracked here: github.com/Eonasdan/bootstrap-datetimepicker/issues/1831
However, I found a work around that might be helpful in the meantime (if you don't want to use version 4.17.37):
var selectedDate = moment($('#patient_date_of_birth').val(), 'DD/MM/YYYY');
$('#patient_date_of_birth').data('DateTimePicker').viewDate(selectedDate);
Do this after your datepicker initialization.
This is the syntax needed hard refresh the view for this particular datepicker. You access the picker via data('DateTimePicker'), and the viewDate() method updates the date displayed by the picker.
I'm loading a selection of dates into bootstrap datepicker for the user to view. Currently they can click on a highlighted date but it clears all the dates that are preloaded.
I don't want them to be able to click on any dates, just view the different month pages of dates. How can I do this?
this is how I setup datepicker and load the dates;
$('.datepickera').datepicker({
format: 'yyyy/mm/dd',
multidate: false
});
$.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});
$(".datepickera").data("datepicker").setDates($('#mydates').data('dates'));
If I understand you correctly you can make the datepicker unselectable by using the daysOfWeekDisable property like this:
$('.datepicker').datepicker({
daysOfWeekDisabled: [0,1,2,3,4,5,6]
});
0 is Sunday and 6 is Saturday. This way a user cannot select any day but can view the entire calendar. You can read more about it here. Hope that helps.
I'm using Angular UI bootstrap's datepicker , and when I change programmatically the date the view doesn't change, when I'm in 30 Novembre and I programmatically change the date to 2 December, the date change but the view still fixed in November, here's how I code the next date button.
$scope.right=function(){
if($scope.viewmodel.timeResolution=='yearly')
$scope.dt.setFullYear($scope.dt.getFullYear()+1);
else if($scope.viewmodel.timeResolution=='monthly')
$scope.dt.setMonth($scope.dt.getMonth()+1);
else if($scope.viewmodel.timeResolution=='daily') {
$scope.dt.setDate($scope.dt.getDate() + 1);
}
$scope.changedValue();
};
Html :
<uib-datepicker ng-model="dt" id="dp" datepicker-mode="mode" init-date="initDate" show-weeks=false max-mode="maxMode" min-date="minDate" max-date="maxDate" min-mode="minMode" class="well well-sm" ng-change="changedValue(viewmodel.dt)"></uib-datepicker>
how can I simulate a refresh view everytime I change the date programmatically on the datepicker ?
you need to convert again to date. The function set... only returns the timestamp:
$scope.right=function(){
if($scope.viewmodel.timeResolution=='yearly')
$scope.dt = new Date($scope.dt.setFullYear($scope.dt.getFullYear()+1));
else if($scope.viewmodel.timeResolution=='monthly')
$scope.dt = new Date($scope.dt.setMonth($scope.dt.getMonth()+1));
else if($scope.viewmodel.timeResolution=='daily') {
$scope.dt = new Date($scope.dt.setDate($scope.dt.getDate() + 1));
}
$scope.changedValue();
};
To make your overall experince with angular dates better, you should look into moment .js
http://momentjs.com/
It allows you to create, format, add and subtract dates easily and with minimal issues. Using the default date.set functions can cause a lot of issues.
I have a set up like this using moments with no issues
I have a jQuery datepicker and I cannot figure out how to programmatically change the month back to the current month. After making a POST request to save the user's dates I need to return the calendar back to the current month. The calendar may be on a different month from the user playing around with different dates. I have tried setting the mindate again but that did not work.
This is not a popup calendar.
Setting the datepicker back to today
$('#myDatePicker').datepicker('setDate', new Date());
setting just the month back
var date = $('#myDatePicker').datepicker('getDate');
date.setMonth( (new Date()).getMonth() );
$('#myDatePicker').datepicker('setDate', date);
FIDDLE
You can also use .val() to set the date
$("#datepicker").val(date);