Is there an option in Angular UI Bootstrap Datepicker to display multiple months? like numberOfMonths option in JQuery datepicker.
Use 2 datepickers with different models:
Here is a plunker:
<body ng-controller="MainCtrl as main">
<div ng-form class="btn-group" dropdown>
<datepicker ng-model="main.startDate" max-date="main.endDate"></datepicker>
<datepicker ng-model="main.endDate" min-date="main.startDate"></datepicker>
</div>
<p>{{main.startDate | date:'EEEE MMMM d'}} - {{main.endDate | date:'EEEE MMMM d'}}</p>
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
this.startDate = new Date();
this.endDate = new Date(this.startDate.getTime() + 7 * 24 * 60 * 60 * 1000);
});
Related
The following HTML code rests inside a Modal component provided by reactstrap.
<div>
<label htmlFor="address">Location*</label>
<br />
<input
id="address"
className={classes.WholeWidthInput + " " + classes.BorderOverride}
type="text"
onChange={this.handleFormChange.bind(this, "address")}
onBlur={this.saveAddress.bind(this)}
required
placeholder="Find location"
value={this.props.post.address}
/>{" "}
<br />
</div>
The following code hooks up the google places api with the above input element.
handleGoogleSearchLoad = () => {
/* global google */
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-90, -180),
new google.maps.LatLng(90, 180)
);
var options = { bounds: defaultBounds, types: ['(cities)'] };
const autocomplete = new google.maps.places.Autocomplete(document.getElementById("address"), options);
autocomplete.setFields(['address_components', 'formatted_address', 'geometry']);
this.setState({autocomplete});
}
But the thing is the dropdown appears behind the modal when I type something into the form to search. I tried the .pac_container css suggestion but it didn't work or maybe I don't know where the css should have been used. Thanks in advance.
I have problem with changeing text in my input text field. I would like to let user use "start" button to start my aplication: This should write hours and minutes to the text field and same for the "end" button, when user click on submit. These times and other will be fire on firebase.
Thanks for help and there is my code:
<template>
...
<label>Start Time:</label>
<input type="text" v-model="newAct.startTime" disabled/><br>
<label>End Time:</label>
<input type="text" v-model="newAct.endTime" disabled/><br>
<button #click="submitStart">Start</button>
<button #click="submitEnd">Stop</button>
...
</template>
There is my Code:
<script>
...
export default {
...
submitStart() {
let t = new Date();
let time = t.getHours() + ":" + t.getMinutes();
newAct.StartTime = time;
},
submitEnd() {
let t = new Date();
let time = t.getHours() + ":" + t.getMinutes();
newAct.EndTime = time;
}
}
...
</script>
Using react-typeahead-component
I used browserify to change it from npm into a meteor local package. Nothing is showing on the screen when i run meteor.
OptionTemplate.jsx
module.exports = React.createClass({
render: function() {
return (
<div>
<p>HELLO</p>
</div>
);
},
handleChange: function(event) {
console.log('HELLO');
}
});
main.jsx
var OptionTemplate = require('./OptionTemplate.jsx');
SearchBox = React.createClass({render() {
return (
<div className="col-xs-12 col-lg-12">
<OptionTemplate />
</div>
)}
});
You aren't using components properly. You might want to re-read the react documentation.
In your main.jsx, you are importing the component 'OptionTemplate' but you are trying to render the component 'Typeahead' and passing in 'OptionTemplate' as a prop. The 'Typeahead' component now lives in 'OptionTemplate'. Your main.jsx should like like:
var OptionTemplate = require('./OptionTemplate.jsx');
SearchBox = React.createClass({render() {
return (
<div className="col-xs-12 col-lg-12">
<OptionTemplate />
</div>
)}
});
I am using rzymek:fullcalendar package.
I just create a select list using semantic ui dropdown
<div class="ui compact selection dropdown">
<i class="dropdown icon"></i>
<div class="text">Compact</div>
<div class="menu">
<div class="item">January 2015</div>
</div>
</div>
Create A calendar (call the fullcalendar template):-
<div class="calendar">
{{>fullcalendar options id="myCalendar"}}
</div>
Changing the calendar month and year like this:-
$('.ui.selection.dropdown')
.dropdown('restore default text')
.dropdown({
onChange: function (val) {
var monthAndYear = val.split(" ");
console.log(monthAndYear[0]);
var today = new Date();
Session.set('date'monthAndYear[1]+'-0'+MonthList.indexOf(monthAndYear[0]));
$('#myCalendar').fullCalendar({
gotoDate: moment(Session.get('date')),
});
}
});
But it's not working. I don't know why ?
After your template with class calendar has been added to the HTML you can use $('#myCalendar').
If the calendar is already rendered you can't use:
$('#myCalendar').fullCalendar({gotoDate: moment(Session.get('date'))});
To go to a date you might want to call:
$('#myCalendar').fullCalendar('gotoDate', moment(Session.get('date')));
Starting from a simple list of favorite venues stored in an array as objects, I need to have these venues show up on google maps with their own markers. When the markers are clicked, their info windows should open and display their information. That’s pretty straight forward and I’ve already done that.
In addition to this, I also have the names of those venues displayed in a list to the right of the map. My trouble is connecting these two things — the markers and their respective titles in the list to the right. For instance, when I click on an item (venue name) in the list view, I need the map marker on that location to display its info.
For the life of me I can’t seem to make sense of how to connect the two things. I’m using Knockout.js to keep the Javascript and html in sync, and you can see below the map that when I click an item in the list the ‘currentPlace’ is displayed. This won’t be in the end application, but it illustrates what I’m going for. Basically I need that currentPlace to trigger a marker click???
Some things I’ve looked at:
google maps api .... showing a markers infowindow from a link outside of the map
This seems to work at first, but a click on a map marker doesn’t open a window…Also they’re using jQuery and I’m trying to get this to work using only Knockout.js and vanilla JavaScript.
Also, this:
http://jsfiddle.net/RASG/X5mhL/
This illustrates exactly what I’m shooting for but with this example the hrefs are simply entered into the html. I’m trying to have this work in JavaScript in a way that I can easy add new locations just by adding a new place to the initialPlaces array.
Any help would be greatly appreciated.
Here is my html with the Knockout.js data-binds:
<body>
<div class="row">
<div class="col-md-8">
<hr>
</div>
<div class="col-md-4" id="search-header">
<form id="new-search">
<input type="text" class="text-input" data-bind="value: searchEntry">
<input type="submit" value="look for things" class="search-button" data-bind="">
</form>
</div>
</div>
<div class="row">
<div class="col-md-8" id="mapContainer">
<div class="map" id="map-canvas"></div>
</div>
<div class="col-md-4">
<div id="places">
<h2 id="list-title">FAVORITE PLACES</h2>
<hr>
<div id="place-list" data-bind="foreach: placeList">
<h3 data-bind="text: $data.name, click: $parent.setPlace" id="list-item"></h3>
</div>
</div>
</div>
</div>
<div id="place" data-bind="with: currentPlace">
<h2 data-bind="text: name"></h2>
</div>
And here is my JavaScript:
var infowindow = new google.maps.InfoWindow();
var Place = function(data) {
var self = this;
this.name = ko.observable(data.name);
this.lat = ko.observable(data.lat);
this.long = ko.observable(data.long);
var titleString = String(data.name);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.long),
title: titleString,
map: map
});
google.maps.event.addListener(marker, 'click', function () {
map.panTo(marker.position);
infowindow.open(map, marker);
infowindow.setContent(titleString);
});
markers.push(marker);
};
var markers = ko.observableArray([]);
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = { center: { lat: 40.675087, lng: -73.975524},
zoom: 12,
disableDefaultUI: true
};
map = new google.maps.Map(mapCanvas, mapOptions);
var initialPlaces = [
{
name: 'Soda Bar',
lat: '40.678396',
long: '-73.968349'
},
{
name: 'Brooklyn Roasting Co.',
lat: '40.704334',
long: '-73.986524'
},
{
name: 'Prospect Park',
lat: '40.661034',
long: '-73.968876'
}
];
var ViewModel = function() {
var self = this;
this.placeList = ko.observableArray([]);
initialPlaces.forEach(function(placeItem){
self.placeList.push( new Place(placeItem));
console.log(placeItem);
});
this.currentPlace = ko.observable(this.placeList()[0]);
this.setPlace = function(clickedPlace) {
self.currentPlace(clickedPlace);
};
/*
* Create a thing to hold search entry
*/
this.searchEntry = ko.observable('Search')
};
ko.applyBindings(new ViewModel());