I'm having the following problem in my form has two dates of type varchar
<div class="row clearfix">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-5 form-control-label">
<label for="areareal_cadastro">Cadastrado em</label>
</div>
<div class="col-lg-8 col-md-10 col-sm-8 col-xs-7">
<div class="form-group">
<div class="form-line">
<input type="text" id="areareal_cadastro" name="areareal_cadastro" value="<?= $construct_areareal['areareal_cadastro']; ?>" class="form-control">
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-5 form-control-label">
<label for="areareal_atualizar">Atualizado em</label>
</div>
<div class="col-lg-8 col-md-10 col-sm-8 col-xs-7">
<div class="form-group">
<div class="form-line">
<input type="text" id="areareal_atualizar" name="areareal_atualizar" value="<?= $construct_areareal['areareal_atualizar']; ?>" class="form-control">
</div>
</div>
</div>
</div>
But in the console I get the following error, being that I'm not declaring this variable anywhere.
try this js use library too.
$('#input_id').bootstrapMaterialDatePicker({ weekStart : 0, time: false });
You Have to add Below CSS and Javascript
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="js/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-1.11.2.min.js"></script></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
Related
could you help me how to load a textfile into an array via Javascript via a local file?
I'm pretty much a beginner in programming und want to develope a small vocabulary test for my niece. Currently, I am writing the questions and solutions manually. However, I want to just a load a local file, which I can use and then work via array-indexes, if possible. Could you help me here and explain to me how I can load a local textfile into an array?
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Vokabeltrainer</title>
<meta http-equiv="cache-control" content="no-cache">
<script src=#"></script>
<script src="#"></script>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
</head>
<body>
<main>
<div class="container">
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12">
<h1>Leonie's Vokabeltrainer</h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12">
<img src="pictures/Bild3.jpg">
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12">
<p>Liebe Leonie, hier kannst Du die Verbformen für das Simple Present üben!</p>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-sm-12 col-md-12">
<strong>Grundform</strong>
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<strong>Personalpronomen</strong>
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<strong>Simple Present:</strong>
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<!--Hier kommt die Lösung hin, wenn falsch oder richtig geraten wurde-->
</div>
</div>
<div class="row">
<div class="col-lg-2 col-sm-12 col-md-12">
(to) run
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
He...
</div>
<div class="col-lg-3 col-sm-12 col-md-12">
<input type="text" id="check1">
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<button onclick="checkSolution()">Prüfen!</button>
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<p id="solution1">
</div>
</div>
<div class="row">
<div class="col-lg-2 col-sm-12 col-md-12">
(to) go
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
They...
</div>
<div class="col-lg-3 col-sm-12 col-md-12">
<input type="text">
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<button>Prüfen!</button>
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<!--Hier kommt die Lösung hin, wenn falsch oder richtig geraten wurde-->
</div>
</div>
<div class="row">
<div class="col-lg-2 col-sm-12 col-md-12">
(to) carry
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
She...
</div>
<div class="col-lg-3 col-sm-12 col-md-12">
<input type="text">
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<button>Prüfen!</button>
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<!--Hier kommt die Lösung hin, wenn falsch oder richtig geraten wurde-->
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12">
<p id="punke">
</div>
</div>
</div>
</main>
</body>
<script>
let counter = 0;
function checkSolution() {
InputText = document.getElementById("check1").value;
if (InputText === 'runs') {
document.getElementById('solution1').innerHTML = 'super';
counter++;
document.getElementById('punke').innerHTML ='Deine Punkte: ' +counter;
}
else {
document.getElementById('solution1').innerHTML = 'nicht super';
}
}
</script>
</html>
Using plain JS
var dataFile = require("dataFile");
dataFile.readFile("./yourFile.txt", function(text){
var textByLine = text.split("\n")
});
I am writing a spring MVC application and I want to use Vue for my front end. I am trying to use the x-templates to render my components but for some reason it doesn't work and the Vue devtools are not detecting any Vue.js on the page. I managed to get Vue.js working on my index.jsp file but it doesnt work for my hotels,jsp file.
main.js:
let getJsonData = (url)=>{
let result = [];
$.getJSON(url, (data)=>{
data.forEach((x)=>{
result.push(x);
});
})
return result;
};
Vue.component('hotel', {
template: '#hotel-template',
data:function(){
return {
msg:'Yoshi'
}
}
})
let app = new Vue({
el:'#app',
data:{
navLinks:[
{
name:'login',
path:'/login'
},
{
name:'sign up',
path:''
}
],
countries:[],
allHotels:getJsonData('./hotels'),
}
})
header.jsp:
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="/css/main.css" rel="stylesheet"/>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul class="nav">
<li class="nav-item" v-for="link in navLinks">
<a class="nav-link" v-bind:href="link.path">{{link.name}}</a>
</li>
</ul>
<div class="container">
footer.jsp:
</div>
</div>
</body>
<script src="/js/main.js"></script>
</html>
index.jsp:
<%#include file = "header.jsp" %>
<header class="jumbotron">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<h1 class="display-1">Bon voyage!</h1>
<p> Dear <strong>${user}</strong>, Welcome to ${user} Page.
Logout</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<select id="country_select">
<option>Choose country</option>
</select>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</header> <!--end of jumbotron -->
<main>
<div class="row">
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<h4>Hotel name</h4>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<h4>Hotel Country</h4>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<h4>Hotel City</h4>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<h4>Hotel address</h4>
</div>
</div>
<hr>
<div v-for="hotel in allHotels" class="row">
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
<a v-bind:href='"./hotel/" + hotel.id'>{{ hotel.name }}</a>
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
{{ hotel.country }}
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
{{ hotel.city }}
</div>
<div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3">
{{ hotel.address }}
</div>
</div>
</main>
<!-- reviews
hotel requests
hotels-->
<%#include file = "footer.jsp" %>
hotels.jsp:
<%#include file = "header.jsp" %>
<script type="text/x-template" id="#hotel-template">
<header>
<h1>{{ msg }}</h1>
</header>
</script>
<%#include file = "footer.jsp" %>
I didnt manage to fins a solution to my problem, However I found an alternative that worked. Vue.js also has inline templates that has the same functionality as x-templates. A solution was to to put the following tag:
<hotel></hotel>
with the inline-template attribute with it. The end result would look like this
<hotel inline-template></hotel>
You should load vue.js just before the tag, not in the head area.
This will allow you to use the template: with your template in backticks (``) - that way you can have a multi-line template without having to build it as a string.
I want to use color picker in my form and i have tried below code in my project but its not working. Anything wrong with the code?,
In view blade,
#extends('layouts.blank')
#push('stylesheets')
<link href="https://maxcdn.bootstrapcdn.com/bootstrap
/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
colorpicker/2.5.1/css/bootstrap-colorpicker.min.css" rel="stylesheet">
#endpush
#section('main_container')
<div class="main-content">
<!-- page content -->
<div id="page-wrapper">
<div class="tab-pane active" id="horizontal-form">
<h3 class="blank1">Vehicle Details</h3>
{!! Form::open(array('class' => 'form-horizontal','route' =>
'vehicles.store','method'=>'POST')) !!}
<script type="text/javascript">
$('.colorpicker').colorpicker();
</script>
<div class="row">
<div id="cp2" class="input-group colorpicker colorpicker-component">
<input type="text" value="#00AABB" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-6">
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
{{ Form::close() }}
</div>
</div>
</div>
</div>
#endsection
#pushonce('custom-scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
</script>
#endpushonce
I got an empty text box not showing the color.Is there any problem with including css or js files.
How can I solve this ?Can anyone help?
I have used the scripts through #yield scripts then it worked.
You can try this it's worked fine!
<html lang="en">
<head>
<title>Bootstrap Color Picker Plugin Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.6/css/bootstrap-colorpicker.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.6/js/bootstrap-colorpicker.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Color Picker Plugin Example</h1>
<div id="cp2" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
</div>
<script type="text/javascript">
$('#cp2').colorpicker();
</script>
</body>
</html>
Make like this
<div class="main-content">
<!-- page content -->
<div id="page-wrapper">
<div class="tab-pane active" id="horizontal-form">
<h3 class="blank1">Vehicle Details</h3>
{!! Form::open(array('class' => 'form-horizontal','route' =>
'vehicles.store','method'=>'POST')) !!}
<script type="text/javascript">
$('#cp2').colorpicker();
</script>
<div class="row">
<div id="cp2" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="colorpicker form-control" />
<span class="input-group-addon"><i></i></span>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-6">
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
{{ Form::close() }}
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>
I have some problems with my modal which doesn't show up even though I set data-target and data toggle attributes to my button. The screen is faded like it is when the modal is open...
This is the button that triggers the modal:
<a id="createCampaignBtn" data-target="#createCampaignModal" data-toggle="modal"
class="removeRight removeLeft buttonsA">
<div class="buttons removeRight centerTextOutHoriz">
<span class="centerTextInner buttonRight">Start a new Campaign</span>
</div>
</a>
The modal:
<div class="modal">
<div id="createCampaignModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content modalLook">
<div class="modal-header divTitlesModal">
<div class="col-xs-7 removeLeft">Start a new campaign</div>
<button type="button" class="close col-xs-1 removeRight removeLeft " data-dismiss="modal"
aria-label="Close"><span
aria-hidden="true">×</span></button>
<div class="hidden" id="actionType"></div>
</div>
<div class="modal-body">
<form id="createCampaignForm" class="form-horizontal">
<div class="form-group ">
<label class=" col-sm-12 col-md-12 requiredField pull-label-left"
for="campaignTitle">Campaign Title</label>
<div class="col-sm-12 col-md-12 inputContainer">
<input class="form-control" id="campaignTitle" name="title"
placeholder="" type="text" maxlength="100" required="" autofocus=""/>
</div>
</div>
<div class="form-group ">
<label class=" col-sm-12 col-md-12 requiredField pull-label-left"
for="campaignStartDate">Start Date</label>
<div class="col-sm-12 col-md-12 inputContainer">
<input class="form-control" id="campaignStartDate" name="startDate"
placeholder="MM/DD/YYYY" type="text" required=""/>
</div>
</div>
<div class="form-group ">
<label class=" col-sm-12 col-md-12 requiredField pull-label-left"
for="campaignEndDate">End Date</label>
<div class="col-sm-12 col-md-12 inputContainer">
<input class="form-control" id="campaignEndDate" name="endDate"
placeholder="MM/DD/YYYY" type="text" required=""/>
</div>
</div>
<div class="form-group ">
<label class=" col-sm-12 col-md-12 requiredField pull-label-left"
for="campaignTypes">Type</label>
<div class="col-sm-12 col-md-12 inputContainer">
<select class="select form-control" id="campaignTypes" name="typeId">
</select>
</div>
</div>
<div class="form-group">
<label class=" col-sm-12 col-md-12 requiredField pull-label-left"
for="campaignDescription">Description</label>
<div class="col-sm-12 col-md-12">
<textarea class="form-control" id="campaignDescription" name="description"
placeholder="" required="" form="createCampaignForm"></textarea>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="form-group submitFormGroup">
<button type="button" class="btn btn-default cancel modalButton"
data-dismiss="modal">
Cancel
</button>
<button class="btn btn-primary modalButton modalSubmit"
value="Submit"
type="submit">Submit
</button>
</div>
</div>
<div class="col-xs-5">
<div id="holidayAlert" class="errorMessage"></div>
</div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
And this is what I've included for this page:
CSS:
<head>
<meta charset="UTF-8">
<title>Holiday System</title>
<link rel="stylesheet" href="../commons/css/bootstrap.min.css"/>
<link rel="stylesheet" href="../commons/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="../commons/css/jquery.minicolors.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../commons/css/navbar.css"/>
<link rel="stylesheet" type="text/css" href="../commons/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../commons/css/simple-sidebar.css">
<link href="../commons/css/style.css" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="../commons/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" href="../commons/favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="../commons/favicon/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="../commons/favicon/manifest.json">
<link rel="mask-icon" href="../commons/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="../commons/favicon/favicon.ico">
<meta name="msapplication-config" content="/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="css/home.css">
</head>
And the js files:
<!--Include jQuery-->
<script type="text/javascript" src="../commons/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../commons/js/jquery.serializeObject.min.js"></script>
<script type="text/javascript" src="../commons/js/jquery-ui.js"></script>
<script src="../commons/js/sidebar_menu.js"></script>
<!--Include Date Range Picker-->
<script type="text/javascript" src="../commons/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="../commons/css/bootstrap-datepicker3.css"/>
<script type="text/javascript" src="../commons/js/jquery.autocomplete.min.js"></script>
<!--Include js created for this page-->
<script type="text/javascript" src="../commons/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/homepage.js"></script>
<script type="text/javascript" src="../commons/js/navbar.js"></script>
<script type="text/javascript" src="../commons/js/jquery.minicolors.min.js"></script>
<script type="text/javascript" src="../commons/js/notify.js"></script>
<script src="../commons/js/sidebar_menu.js"></script>
<script type="text/javascript" src="../commons/js/searchBar.js"></script>
<script type="text/javascript" src="../commons/js/jquery.tablesorter.min.js"></script>
I tried to force the modal to show up with this js code, but it works only one time and after I close it, it doesn't work anymore.
$('#createCampaignBtn').click(function () {
$("#createCampaignModal").css('display', 'block');
});
You need to remove the wrapper div on the modal:
<div class="modal"></div>
The wrapper prevents the modal from showing up.
To show the modal programatically you can use bootstrap's modal('show') function.
$('#createCampaignBtn').click(function () {
$("#createCampaignModal").modal('show'); // initializes and invokes show immediately
});
You can even omit the show parameter, which is the default action.
Try this
Jsfiddle
$('#createCampaignBtn').click(function () {
$("#createCampaignModal").modal("show");
});
And remove
<div class="modal"></div>
I am trying to put a dash '-' between two text boxes in a single bootstrap row. I currently have it without a dash, and when I put it in it appends the '-' above the text box rather than next to it.
My code looks like the following (it's using angular 2 with prime-ng library):
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<p-dropdown [options]="fieldsForDropdown" [(ngModel)]="selectedField" (onChange)="onFieldChanged($event)"></p-dropdown>
</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">
<input pInputText class="form-control" type='date' [(ngModel)]="fromVal" (change)="addFROMFilter($event)" />
</div>
<div class="col-lg-4 col-md-3 col-sm-12">
<input pInputText class="form-control" type='date' [(ngModel)]="toVal" (change)="addTOFilter($event)" />
</div>
<div class="col-lg-1 col-md-3 col-sm-12">
<button class="btn btn-default btn-lg" (click)="applyDateFilter($event)">Apply</button>
</div>
</div>
I want it to look like this
If possible I would like it to have equal spacing between the four elements as well.
Thanks in advance
Just try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" />
<style>
.bdr {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 15px;
height: 2px;
background-color: #000;
}
#media only screen and (max-width: 550px) {
.mt_10 {
margin-top: 5px;
margin-bottom: 5px;
}
.bdr {
height: 15px;
width: 2px;
}
.mb_40 {
margin-bottom: 40px;
}
}
</style>
</head>
<body>
<div class="col-xs-12 col-sm-12">
<div class=" col-xs-12 col-sm-3 mt_10">
<p-dropdown [options]="fieldsForDropdown" [(ngModel)]="selectedField" (onChange)="onFieldChanged($event)"></p-dropdown>
</div>
<div class="col-xs-12 col-sm-7" style="position:relative; padding:0;">
<div class="col-xs-12 col-sm-6 mt_10 mb_40">
<input pInputText class="form-control" type='date' [(ngModel)]="fromVal" (change)="addFROMFilter($event)" />
</div>
<div class="bdr"></div>
<div class="col-xs-12 col-sm-6 mt_10">
<input pInputText class="form-control" type='date' [(ngModel)]="toVal" (change)="addTOFilter($event)" />
</div>
</div>
<div class="col-xs-12 col-sm-2 mt_10">
<button class="btn btn-default btn-lg" (click)="applyDateFilter($event)">Apply</button>
</div>
</div>
</body>
</html>
You can also use bootstrap to split up the input fields and add a - in between like so, this would give you much more flexibility:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<p-dropdown [options]="fieldsForDropdown" [(ngModel)]="selectedField" (onChange)="onFieldChanged($event)"></p-dropdown>
</div>
<div class="col-lg-8 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-5 col-xs-5">
<input pInputText class="form-control" type='date' [(ngModel)]="fromVal" (change)="addFROMFilter($event)" />
</div>
<div class="col-lg-1 col-xs-1">
<strong>-</strong>
</div>
<div class="col-lg-5 col-xs-5">
<input pInputText class="form-control" type='date' [(ngModel)]="toVal" (change)="addTOFilter($event)" />
</div>
</div>
<div class="col-lg-1 col-md-3 col-sm-12 col-xs-12">
<button class="btn btn-default btn-lg" (click)="applyDateFilter($event)">Apply</button>
</div>
</div>
try to add a -
and add some css style like
.dash {
float:left;
width:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-3">
<select style="width:100%"><option></option></select>
</div>
<div class="col-xs-3">
<input pInputText class="form-control" type='date' [(ngModel)]="fromVal" (change)="addFROMFilter($event)" />
</div>
<b class="dash">-</b>
<div class="col-xs-3">
<input pInputText class="form-control" type='date' [(ngModel)]="toVal" (change)="addTOFilter($event)" />
</div>
<div class="col-xs-3">
<button class="btn btn-default btn-lg" (click)="applyDateFilter($event)">Apply</button>
</div>
</div>
div{
display:inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<p-dropdown [options]="fieldsForDropdown" [(ngModel)]="selectedField" (onChange)="onFieldChanged($event)"></p-dropdown>
</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">
<input pInputText class="form-control" type='date' [(ngModel)]="fromVal" (change)="addFROMFilter($event)" />
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-6">
<b>-</b>
</div>
<div class="col-lg-4 col-md-3 col-sm-12">
<input pInputText class="form-control" type='date' [(ngModel)]="toVal" (change)="addTOFilter($event)" />
</div>
<div class="col-lg-1 col-md-3 col-sm-12">
<button class="btn btn-default btn-lg" (click)="applyDateFilter($event)">Apply</button>
</div>
</div>