I am using Tempus Dominus Bootstrap 4 datepicker ,try to get maxday and minday value from datepicker,but i am not geting.Please Any one can help me.
If you look at the documentation, you can enable/disable dates via the code below:
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker6" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker6"/>
<div class="input-group-append" data-target="#datetimepicker6" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker6').datetimepicker({
defaultDate: "11/1/2013",
disabledDates: [
moment("12/25/2013"),
new Date(2013, 11 - 1, 21),
"11/22/2013 00:53"
]
});
});
</script>
</div>
</div>
Related
friends, I want to turn the datepicker on and off in both input and icon clicks in this code structure, but I couldn't succeed, can you help?
<div class="container">
<div class="col-sm-6" style="height:130px;">
<div class="form-group">
<div class='input-group datetimepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('.datetimepicker').datetimepicker({
viewMode: 'years'
});
});
</script>
</div>
I am using bootstrap 4, jQuery 3.3.1 and datepicker (http://www.eyecon.ro/bootstrap-datepicker/)
I have three issues:
The Calendar icon is not the size of the input box
When submit without selecting the date, bootstrap validation message not working.
Auto close is not working.
$(document).ready(function()
{
$('#depositeDate').datepicker({
"setDate": new Date(),
"autoclose": true
});
})
<div class="form-group row">
<label for="depositeDate" class="col-sm-4 col-form-label col-form-label-lg">Deposit Date</label>
<div class="col-sm-2 input-group date">
<input type="text" class=" text-input form-control" id ="depositeDate" placeholder="MM/DD/YYYY">
<div class="input-group-addon">
<i class="fas fa-calendar-alt fa-3x" style="color:RED"></i> </div>
<div class="invalid-feedback">
Please enter a valid Order Number.
</div>
</div>
</div>
The Calendar icon is not the size of the input box
The markup for input group addon is changed in Bootstrap 4.0 stable
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">#example.com</span>
</div>
</div>
Your code should be
<div class="input-group date" >
<input type="text" class="form-control" id ="depositeDate" placeholder="MM/DD/YYYY">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2"><span class="fa fa-calendar"></span></span>
</div>
</div>
3.Auto close is not working.
I don't see setting like "autoclose": true , we should explicitly call to close the datepicker.
.on('changeDate', function(ev) {
checkout.hide();
})
<div class="form-group row justify-content-center align-items-center">
<label for="depositeDate" class="col-sm-3 col-form-label">Deposit Date</label>
<div class="col-sm-3 input-group date" >
<input type="text" class="text-input form-control" id ="depositeDate" placeholder="MM/DD/YYYY">
<div class="input-group-addon" style="cursor: pointer;" onclick="$('#depositeDate').focus();">
<i class="fas fa-calendar-alt fa-2x"></i>
</div>
</div>
</div>
this code will do:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<br>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<label for="Order number">Order number</label>
<input type="text" id="Order number" >
</div>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<label for="male">Deposit Date</label>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<script>$(function() {
$('#datetimepicker1').datetimepicker();
});</script>
check out the fiddle:https://jsfiddle.net/rqy7L2do/
I need help with bootstrap datepicker
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
</script>
</div>
</div>
The code works, however it shows date instead of time.
You need to edit the format option to show time only:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js" type="text/javascript" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'HH:mm'
});
});
</script>
</div>
</div>
$(document).ready(function(){
$("#datetimepicker").datetimepicker({
pickDate: false,
minuteStep: 15,
pickerPosition: 'bottom-right',
format: 'HH:ii p',
autoclose: true,
showMeridian: true,
startView: 1,
maxView: 1,
});
$(".datetimepicker").find('thead th').remove();
$(".datetimepicker").find('thead').append($('<th class="switch">').text('Pick Time'));
$('.switch').css('width','190px');
});
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://www.malot.fr/bootstrap-datetimepicker/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet">
</head>
<body>
<div class="form-group">
<input class="form-control" type="text" id="datetimepicker" readonly>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://www.malot.fr/bootstrap-datetimepicker/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
</body>
</html>
this works in my application:
$("#datetimepicker").datetimepicker({format: 'HH:mm:ss', pickDate:false });
You should try this
<div class="well">
<div id="datetimepicker3" class="input-append">
<input data-format="hh:mm:ss" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker3').datetimepicker({
pickDate: false
});
});
</script>
Add to
showSeconds:false
$('#kt_timepicker_2').timepicker({
minuteStep: 1,
format: 'HH:mm',
defaultTime: '',
showMeridian: false,
snapToStep: true,
showSeconds:false});
Download the zip file in https://www.malot.fr/bootstrap-datetimepicker/demo.php
It has the Time only picker code.
I have also copied it here
<div class="form-group">
<label for="dtp_input3" class="col-md-2 control-label">Time Picking</label>
<div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
<input class="form-control" size="16" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
</div>
<input type="hidden" id="dtp_input3" value="" /><br/>
</div>
<script>
$('.form_time').datetimepicker({
//language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 1,
minView: 0,
maxView: 1,
forceParse: 0
});
</script>
I have a form in a modal window :
<div class="modal fade bs-example-modal-lg" id="vp" >
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Create Job</h4>
</div>
<div class="modal-body container-fluid">
<form id="create_job" method="post" action="?create">
<div class="form-group">
<div class="row">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="Job number - Jxxxx" name="job_number">
</div>
<div class="col-md-4">
<input type="text" class="form-control" placeholder="Part number - xxxxxx" name="part_number">
</div>
<div class="col-md-2"><p class="form-control-static text-right"><b>Cable length (m):</b></p></div>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="Cable" value="06" name="cable">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" name="submitButton" class="btn btn-primary">Submit</button></form>
</div>
</div>
</div>
</div>
This is the validation js:
$(document).ready(function() {
$('#create_vpf_job').formValidation({
framework: 'bootstrap',
excluded: ':disabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
job_number: {
validators: {
notEmpty: {
message: ' '
}
}
},
part_number: {
validators: {
notEmpty: {
message: ' '
}
}
},
cable: {
validators: {
notEmpty: {
message: ' '
}
}
}
}
});
});
I've look online for same problems but I haven't found a solution. The submit button doesn't submit. I'm using formvalidation.io for validation and nothing from their docs helped me.
Also tried adding with no luck
$('#create_job').submit();
Your HTML is bad formatted, and the form is closing after the container div closes, so the submit button doesn't know what to submit. Change it to:
<div id="vp" class="modal fade bs-example-modal-lg">
<div role="document" class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title">Create Job</h4>
</div>
<div class="modal-body container-fluid">
<form action="?create" method="post" id="create_job">
<div class="form-group">
<div class="row">
<div class="col-md-4">
<input type="text" name="job_number" placeholder="Job number - Jxxxx" class="form-control" />
</div>
<div class="col-md-4">
<input type="text" name="part_number" placeholder="Part number - xxxxxx" class="form-control" />
</div>
<div class="col-md-2">
<p class="form-control-static text-right">
<b>Cable length (m):</b>
</p>
</div>
<div class="col-md-2">
<input type="text" name="cable" value="06" placeholder="Cable" class="form-control" />
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button class="btn btn-primary" name="submitButton" type="submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
And it will work. On this plunkr you can check that it's giving a bad-request response, which is good news, because it means the request is being done, and so, the form is being submitted once the correction made
I have researched stackoverflow to make a drop-down button with login form stay open when completing the form. Right now as soon as you try to type, the login form closes. Here is my code:
<div class="top-nav">
<div class="btn-group pull-right dropdown-toggle"> <a class="btn btn-login" href="#"><i class="icon-user icon-white"></i> Login</a> <a class="btn btn-login dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<form class="form-horizontal dropdown-menu">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox">
Remember me </label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
At the end of my code just before the body tag I entered this script:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script language="javascript">
$('.dropdown-toggle').dropdown();
$('.dropdown-menu').find('form').click(function (e) {
e.stopPropagation();
});
</script>
I was able to reproduce the issue using your code. Removing .find('form') from the JavaScript fixed the problem.