I hope someone can help me with this issue.
I am trying to use the datepicker from the following link
The problem is that I want to be able to use a few features but don't know how.
1)I want to be able to unset a specific date from my angular controller
2)I want to be able to clear all the selected dates from the datepicker calendar.
http://bootstrap-datepicker.readthedocs.org/en/release/methods.html
Here's how my code looks:
<div class="col-md-3">
<h5>Pickup Dates</h5>
<!--Inline DatePicker-->
<div class="datepicker" ng-click="dateSelection()" ng-selected="selectedDates!=-1">
</div>
</div>
<script>
$('.datepicker').datepicker({
multidate: true,
todayHighlight: true,
format: 'dd/MM/yyyy'
});
</script>
My angular controller is as follow
$scope.dt = $('.datepicker').datepicker('getDates');
Then I have a function that gets triggered when a button is clicked.
Once the button is pressed, all dates are saved and then the selected dates
should clear from the calendar but instead a new calendar gets created.
$scope.createSearches=function() {
/*saving dates code*/
$('.datepicker').datepicker('clearDate')
}
I read the documentation and not sure how to use the clearDate event so if someone can help me with this and also how to unset specific dates from the controller, I will really appreciate that.
Thanks
Related
In Angular 2, I am using PrimeNG calendar using model driven form with *ngSwitchCase as follows
<div [ngSwitch]="field.controlType">
...
<p-calendar *ngSwitchCase="'date'" [formControlName]="field.key" [id]="field.key" [showIcon]="true" dataType="string"></p-calendar>
...
</div>
The calendar comes up well on the UI, but when I select the date, or click outside on the page, it does not go away.
Only when I click on tab to go away, the calendar is closed.
If I use ngModule, it works fine, but that is not the requirement.
Does anyone have any clue/example on it, please share
Thanks
Found the error that I was using <div class="section"> somewhere before the primeng calendar.
Renaming the css section class to appsection solved this issue.
Please accept my apologies if i had any mistakes in my post. This is my first post here. But, i am not new to StackOverflow. Correct me if any.
I am using angular-bootstrap-datetimepicker library from the below url:
Link to library
I am currently embedding the calender on the page.
I am using angular.js, moment.js, grunt and bower. Absolutely no issue loading the calender and can even select a date and display the selected date as well.
Here is the sample code:
<div>
Selected Date: {{ data.embeddedDate | date:'yyyy-MMM-dd' }}
<datetimepicker data-ng-model="data.embeddedDate" data-datetimepicker-config="{ startView:'day', minView:'day'}" />
</div>
I am trying to highlight today's date automatically when the datetimepicker shows on the page.
As you can see, in the config options, i could set the default view and min view.
Note: I tried to mimic the working code (till now) in Plunkr but, its not showing the calendar. I added all libraries as well. Anyways, that's just for idea only. If i could get the Plunkr working, i will update again.
Here is the link to Plunkr.
Any suggestions (regarding highlight today date by default) will be appreciated.
To get the directive to show todays date by default, you can set the value of data.embeddedDate in the controller through its scope, like so:
$scope.data = { embeddedDate: new Date() };
Working Plunkr
can someone help me about angular calendar problem as follow:
following is the plunker
'http://plnkr.co/edit/fChjjzknFOWmLcuUomeD?p=preview`
where "calendar.js" comes from
https://github.com/angular-ui/ui-calendar
and "fullcalendar.js","moment.min.js" and "fullcalendar.css" are from
http://fullcalendar.io/download/
I just want to display calendar and string "Hello world" at the moment
In your Plunkr example, you named the app wrong in your index view.
ng-app="plunker"
instead of
ng-app="app"
Check this working Plunker
http://plnkr.co/edit/11GUvB6CjnZxrk6dlEnk?p=preview
Always check your console for errors before worrying about calendars, etc.
I'm currently doing work experience designing the ui for some courier software in basic HTML. I have only been doing this for 4 days now so please excuse my basic knowledge etc.
At the top of this particular page I have 2 headers which I would like, if possible, to get to automatically update to mirror data entered into 2 fields lower in the form. Neither of these fields has a submit button currently and ideally I would like it so that the headers are changed when the user clicks on the next part of the form. My boss didn't know how to do this but suggested I look at java onchange commands, however I haven't been able to find anything that would help me out in this regard.If anyone has any suggestions they would be greatly appreciated.
<script type="text/javascript">
function changed () {
var el = document.getElementById('info');
el.innerHTML = document.getElementById('user').value;
}
</script>
<form name="log in_form" method="post" action="log.php?action=login">
<div class="forminput"><input onkeyup="changed()" type="text" id="user">
</form>
<div id="info">
</div>
Use the onKeyUp, for constant updating.
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function(){
YAHOO.dateSelects.exc = new YAHOO.widget.Calendar("exc","excContainer",
{ title:"Choose a date:", close:true, multi_select:true });
YAHOO.dateSelects.exc.render();
YAHOO.util.Event.addListener(
"excshowup",
"click",
YAHOO.dateSelects.exc.show,
YAHOO.dateSelects.exc,
true
);
});
</script>
<div class="calendarOuterContainer">
<div id="excContainer" class="calendarContainer"></div>
</div>
<a id="excshowup"><img src="/images/icons/calendar.png" /></a>
The preceding code generates a YUI calendar with the ability to select multiple dates on one calendar. What I am having trouble figuring out is how to capture that data and place it inside a text input tag on the fly. So when a person clicks the close button, all the selected dates are populated inside the input tag.
Suggestions? (Code sample is greatly appreciated)
Subscribe to the hide event & call getSelectedDates() on your calendar instance which will return an array of JS Date objects. You can then format & combine those to get a string in the style you want to set the value of your text input.