I'm using a bootstrap datepicker and I want to set the defaultViewDate option (http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#id3). It all works fine if I set it at instantiation like this:
jQuery(element).datepicker({
defaultViewDate: {year: 2000}
});
The trouble is that I want to have the default view (not the value) update in response to user input. I'm including this as part of an angular app on a page so I was hoping there would be a way to leverage data-binding here.
Angular UI Bootstrap has a datepicker directive that sounds like it can do what you want. In the example they have, they change the default view by way of buttons at the bottom of their example.
Related
Do you know an Angular datepicker which has input features like:
Keyboard navigation (e.g. keydown for previous day, keyup for next day) in the input field (so I don't mean in the datepicker popup)
Autocomplete, e.g. when you fill in 12/12 and tab away, it automatically fills in 12/12/2019
Keys for specific actions, e.g. T fills in today's date
Or a datepicker which can be easily customized to work like this?
I found that datepickers from libraries like Kendo and Syncfusion try to do too much and are therefore difficult to customize to our needs. They focus on the datepicker popup, while the input field is hard to work with without mouse.
(the old ASP.NET Peterblum components had all this user-friendly functionality which does not seem to be available in modern frameworks, see: http://peterblum.com/DES/DateAndTime.aspx#DateTextBox).
You can find some date-pickers written in angular here, https://angularscript.com/?s=datetime+picker+. Most of these are customizable as your needs. Thanks
I would like to use the Angular Material Datepicker in my Angular application, but I a not quite satisfied with the default behavior The datepicker normally opens the calendar as a popup under the input. Instead I would like for the calendar to be permanently opened so that the user can continue to view the calendar as he selects different dates.
I understand that there is an opened property that reflects the status of the popup:
Angular Datepicker
Could I achieve the desired behavior by permanently setting the property to true to prevent the calendar from closing? I have never rally modified the default behavior of a library before...how would I go about this?
Perhaps a different approach would be separating the input from the calendar? I wonder what the best design approach would be?
I am integrating Angular UI Bootstrap datepicker within ui-grid, but i am facing an issue. When the user opens the datepicker by clicking a cell the datepicker is displayed but within ui-grid because of which user cannot see the full calendar and has to scroll.
Image: https://i.stack.imgur.com/AJ67m.png
It's not clear that you are using the datepicker popup instead of the inline datepicker. So, the first recommendation would be to use datepicker popup. Second, set the datepicker-append-to-body option to true to get it to attach to the document body rather than the grid cell it's defined in.
I'm using Trent Richardsons Timepicker plugin: http://trentrichardson.com/examples/timepicker/
As you can see in the demo, there is a method to switch the picker to a select format.
What I'm trying to achieve is to append the select method straight underneath the default slider - at the moment you can only have either the slider, or the select, not both at once.
I can see in the docs that you can create a custom control type to change the output of the select using $.timepicker.setDefaults({controlType:myControl}) - and then writing a custom function. Should I be somehow creating a new function that merges both the slider and select together?
Any tips at what I should be doing for this?
I have a form that i am trying to submit with angular JS
One of the field requires generation of an ethiopian calendar , so i am using an external javascript library to show this date - available here http://keith-wood.name/calendarsRef.html
To show the date picker one creates an input text as below:
<input type="text" id="ethiopianDOB" ng-model='Ethiopian'
And corresponding javascript
$( "#ethiopianDOB" ).calendarsPicker({
calendar: $.calendars.instance('ethiopian')
});
However this interferes with my ng-model binding and hence cannot access my variable in $scope (I reviewed the object on form submission and i have no item like $scope.Ethiopian
I am looking for ways to either
1. Retain the binding of the ng-model OR
2. Not require the javascript to instantiate the calendar OR
3. Improvement on my approach to this problem
Thanks
You should not mix JQuery and Angular if possible. Try to 'think in angular' instead of falling back on JQuery.
Here is a great post about this topic: "Thinking in AngularJS" if I have a jQuery background?
That being said, you should try to replace the JQuery calendar with an angular directive such as the datepicker from Angular UI Bootstrap. I don't know if they have an Ethopian calendar but you could always build your own.
This would fix your issue.
Hope this helps.