I have a page with two date pickers, and I have to validate both of them.
This is a demo code of index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- ###DatePicker### -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.4.5/js/bootstrapValidator.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.4.5/css/bootstrapValidator.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css" />
<!-- ################ -->
<!-- ####Bootstrap### -->
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css" />
<!-- ################ -->
<!-- #####Custom##### -->
<script src="Scripts/datepicker.js"></script>
<link rel="stylesheet" href="CSS/dashboard.css" />
<!-- ################ -->
</head>
<body>
<!-- Top bar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">TEST PAGE</a>
</div>
</div>
</nav>
<!-- Content -->
<div class="container-fluid">
<!-- Right Panel -->
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<!-- Start Date -->
<form id="startDate" method="post" class="dateRangeForm form-vertical">
<div class="form-group">
<label class="control-label">Start Date:</label>
<br></br>
<div class="date">
<div class="input-group input-append date dateRangePicker">
<input type="text" class="form-control" name="date" />
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<!-- End Date -->
<div class="form-group">
<label class="control-label">End Date:</label>
<br></br>
<div class="date">
<div class="input-group input-append date dateRangePicker">
<input type="text" class="form-control" name="date" />
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-default">Update Data</button>
</div>
</form>
</div>
</div>
</body>
</html>
And this is datepicker.js:
// http://formvalidation.io/examples/bootstrap-datepicker/
$(document).ready(function()
{
$('.dateRangePicker').datepicker({ dateFormat: 'mm/dd/yyyy'}).datepicker("setDate", new Date());
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10)
dd='0'+dd
if (mm < 10)
mm='0'+mm
today = mm+'/'+dd+'/'+yyyy;
$('.dateRangePicker')
.datepicker({
format: 'mm/dd/yyyy',
startDate: '01/01/2010',
endDate: today
})
.on('changeDate', function(e) {
// Revalidate the date field
$('.dateRangeForm').bootstrapValidator('revalidateField', 'date');
});
$('.dateRangeForm').bootstrapValidator({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
date: {
validators: {
notEmpty: {
message: 'Required field'
},
date: {
format: 'MM/DD/YYYY',
min: '01/01/2010',
max: today,
message: 'Invalid date'
}
}
}
}
});
});
When I try to run the page, I have the following error when picking date:
TypeError: undefined is not an object (evaluating 'f[c].apply')
(anonymous function)bootstrapValidator.min.js:11:12426
eachjquery-2.1.0.min.js:1:2881
eachjquery-2.1.0.min.js:1:822
bootstrapValidatorbootstrapValidator.min.js:11:12269
(anonymous function)datepicker.js:28
dispatchjquery-2.1.0.min.js:2:6060
handlejquery-2.1.0.min.js:2:2835
triggerjquery-2.1.0.min.js:2:5168
(anonymous function)jquery-2.1.0.min.js:2:11007
eachjquery-2.1.0.min.js:1:2881
eachjquery-2.1.0.min.js:1:822
triggerjquery-2.1.0.min.js:2:10980
_triggerbootstrap-datepicker.min.js:1:5750
_setDatebootstrap-datepicker.min.js:1:17438
clickbootstrap-datepicker.min.js:1:16930
fjquery-2.1.0.min.js:1:3717
dispatchjquery-2.1.0.min.js:2:6060
handlejquery-2.1.0.min.js:2:2835
How do I solve this?
Thank you.
Change:
$('.dateRangeForm').bootstrapValidator('revalidateField', 'date');
To:
$('.dateRangeForm').bootstrapValidator('updateStatus', 'date', 'NOT_VALIDATED')
.bootstrapValidator('validateField', 'date');
JsFiddle: https://jsfiddle.net/n6hgwq5h/1/
Related
<html lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Solicitud De Vacaciones</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" />
<style>
.bootstrap-iso .formden_header h2, .bootstrap-iso .formden_header p, .bootstrap-iso
form{
font-family: Arial, Helvetica, sans-serif; color: black
}
.bootstrap-iso form button, .bootstrap-iso form button:hover{
color: white !important;
}
.asteriskField{
color: red;
}
</style>
</head>
<body>
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-2 col-xs-12">
<form action="MovimientoBancario" class="form-horizontal" method="post">
<div class="form-group ">
<label class="control-label col-sm-2 requiredField" for="date">
Desde
<span class="asteriskField">
*
</span>
</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="date" name="from" placeholder="YYYY/MM/DD" type="text" required/>
</div>
</div>
</div>
<div class="form-group ">
<label class="control-label col-sm-2 requiredField" for="date">
Hasta
<span class="asteriskField">
*
</span>
</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="date" name="to" placeholder="YYYY/MM/DD" type="text" required/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input name="_honey" style="display:none" type="text"/>
<button class="btn btn-primary " name="submit" type="submit">
Buscar
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include Date Range Picker -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script>
$(document).ready(function(){
var date_input=$('input[id="date"]');
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'yyyy-mm-dd',
container: container,
todayHighlight: true,
autoclose: true,
})
})
</script>
</body>
Here's my code, I've searched all over stackoverflow but none of the solutions I find works for me, I need to do two things.
date two has to be bigger than date one
date one has to give you the option to start from the current date.
I've tried these
Jquery datepicker restrict dates in second date field based on selected date in first date field
https://jqueryui.com/datepicker/#min-max
You can use startDate for restrict to start from current date.
Try below code I hope it will resolve your problem.
<html lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Solicitud De Vacaciones</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" />
<style>
.bootstrap-iso .formden_header h2,
.bootstrap-iso .formden_header p,
.bootstrap-iso form {
font-family: Arial, Helvetica, sans-serif;
color: black
}
.bootstrap-iso form button,
.bootstrap-iso form button:hover {
color: white !important;
}
.asteriskField {
color: red;
}
</style>
</head>
<body>
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-2 col-xs-12">
<form action="MovimientoBancario" class="form-horizontal" method="post">
<div class="form-group ">
<label class="control-label col-sm-2 requiredField" for="date">
Desde
<span class="asteriskField">
*
</span>
</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" class="from_date" id="dpd1" name="from" placeholder="YYYY/MM/DD" type="text" required/>
</div>
</div>
</div>
<div class="form-group ">
<label class="control-label col-sm-2 requiredField" for="date">
Hasta
<span class="asteriskField">
*
</span>
</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="dpd2" name="to" placeholder="YYYY/MM/DD" type="text" required/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input name="_honey" style="display:none" type="text" />
<button class="btn btn-primary " name="submit" type="submit">
Buscar
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include Date Range Picker -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />
<script>
$(document).ready(function() {
var date_input = $('input[id="date"]');
var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
var currDate = new Date();
var date = new Date();
date.setDate(date.getDate());
$('#dpd1').datepicker({
format: 'yyyy-mm-dd',
startDate: date,
container: container,
todayHighlight: true,
autoclose: true,
})
$('#dpd1').datepicker().on('changeDate', function() {
$('#dpd2').val('')
})
$('#dpd2')
.datepicker()
.on('show', function(ev) {
var toDate = $('#dpd1').datepicker("getDate");
toDate.setDate(toDate.getDate() + 1);
$('#dpd2').datepicker("setStartDate", toDate);
})
.on('changeDate', function(ev) {
var date1 = $('#dpd1').datepicker("getDate").valueOf();
var date11 = $('#dpd1').datepicker("getDate");
date11.setDate(date11.getDate() + 1);
var date2 = ev.date.valueOf();
if (date2 <= date1) {
alert("Second date bigger than first!");
$('#dpd2').datepicker("setDate", date11);
}
});
})
</script>
</body>
DEMO
I noticed you have used same id on both textboxes with different name attributes. It is good practice to use different ids for all controls.
Regardless of that, here's the change you need to make in your jquery
$(document).ready(function() {
var date_input = $('input[name="from"]');
var date1_input = $('input[name="to"]');
var container =
$(".bootstrap-iso form").length > 0
? $(".bootstrap-iso form").parent()
: "body";
date_input
.datepicker({
format: "yyyy-mm-dd",
container: container,
todayHighlight: true,
autoclose: true,
startDate: new Date()
})
.on("changeDate", function(e) {
var desdeDate = e.date;
desdeDate.setDate(desdeDate.getDate() + 1);
date1_input.datepicker({
format: "yyyy-mm-dd",
autoclose: true
});
date1_input.datepicker("setStartDate", desdeDate);
date1_input.focus();
});
});
Note that I used name attributes to select the textboxes and changeDate event is to calculate the new start date value for the second textbox which is then initialized with setStartDate method of the datepicker plugin.
You can find many other options to tweak at their website.
I'm trying to calculate the days between dates and when I choose the 2 dates it doesn't show anthing in my heading. How can I implement this? This should be able to make calculations between dates many years apart to it has to consider February has 28 days etc...
<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">
<div class="row">
<label>From System Date:</label>
<div class="form-group">
<div class="input-group date" id="initialDate">
<input type='text' name="initialDate" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#initialDate').datetimepicker({
format: 'DD/MM/YYYY'
});
});
</script>
</div>
</div>
<div class="row">
<label>To System Date:</label>
<div class="form-group">
<div class='input-group date' id='finalDate'>
<input type='text' name="finalDate" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#finalDate').datetimepicker({
format: 'DD/MM/YYYY'
});
});
</script>
</div>
<div class="row">
<script>
function CalculateDayends() {
var oneDay = 24*60*60*1000;
var initialDate = $('#initialDate');
var finalDate = $('#finalDate');
return Math.round(Math.abs((initialDate.getTime() - finalDate.getTime())/(oneDay)));
}
</script>
<h4>DAYENDS to run: <b><script>document.write(CalculateDayends())</script></b></h4>
</div>
Your error is showing because your vars initialDate and finalDate are just strings.
This getTime() function is always used in conjunction with a Date object.
Just use:
var diff = Math.floor(( Date.parse(finalDate) - Date.parse(initialDate) ) / 86400000);
This will give you the days between your two dates picked.
Working Fiddle
I am using the Bootstrap datatimepicker (https://eonasdan.github.io/bootstrap-datetimepicker/). It's great but it does not show or let the user select seconds.
$(document).ready(function () {
$('#datetimepicker1').datetimepicker({defaultDate: new Date()});
});
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
So how to select seconds as well? And how to get seconds to show in the format? Currently it's 05/18/2017 1:26 PM, I want 05/18/2017 1:26:40 PM
In the dev guide, there is a fillSeconds() function but I am not sure how to apply it here.
Setting the format to the correct value from moment and sideBySide:
$('#datetimepicker1').datetimepicker({
defaultDate: new Date(),
format: 'DD/MM/YYYY hh:mm:ss A',
sideBySide: true
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.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.17.1/moment.min.js"></script>
<link rel="stylesheet"
href="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css">
<script src="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/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='datetimepicker1'>
<input type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
$(document).ready(function () {
$('#datetimepicker1').datetimepicker({
defaultDate: new Date()});
}).fillseconds();
Try this way.
i am trying to get the Bootstrap Datepicker to work on my website but the button seems to be disabled and doesn't do anything when i click on it or the input form box here is my test code I am not sure what i am doing wrong here. i am using bootstrap 3.3.5
<!DOCTYPE html><html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/css/main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$('datepicker').datepicker({
format: 'mm-dd-yyyy'
});
});
</script>
</head>
<body>
<center>
<h1>BootStrap Datepicker</h1>
<form>
<div class="form-group">
<div class="input-group date" id='datepicker'>
<input type="text" class="form-control" placeholder="Birthdate yyyy/mm/dd">
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
</form>
</center>
</body>
</html>
<div class="row">
<div class="col-lg-2">
<div class="panel">
<fieldset>
<legend>Bootstrap-datepicker set date sample</legend>
<div class="form-group">
<label for="exampleInputDate">Some special date</label>
<input type="text" class="form-control" id="exampleInputDate">
</div>
</fieldset>
</div>
</div>
</div>
here is the javascript file
var firstDayOfMonth = function() {
// your special logic...
return 5;
};
var d = new Date();
var currMonth = d.getMonth();
var currYear = d.getFullYear();
var startDate = new Date(currYear,currMonth,firstDayOfMonth());
$('#exampleInputDate').datepicker('setDate',startDate);
This should work perfectly
here is the plunker
I have a situation with datetimepicker. It doesn't show any calendar When I click the icon.
The chrome browser not showing any errors in the development console.
<script src="Scripts/jquery-2.1.1.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/moment.js"></script>
<link href="css/custom.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
<script src="Scripts/bootstrap-datetimepicker.js"></script>
<script src="Scripts/bootstrap-select.min.js"></script>
<div class="row cuadrado">
<div class="col-md-4 col-sm-6 col-xs-1"><h4>Fecha de Nacimiento :</h4></div>
<div class="col-md-8 col-sm-6 col-xs-1">
<div class="input-group date" id="datetimepicker1">
<input type='text' id="fecha_nac" runat="server" name="fecha_nac" class="form-control input_margin" readonly="true" placeholder="Eliga la fecha"/>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
$(function () {
$('#datetimepicker1>input').datetimepicker({
format: "yyyy-mm-dd"
});
});
It's a lot easier if you provide the input with a proper id and bind the datetimepicker plugin to it.
HTML
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="date">Date</label>
<div class="input-group">
<input name="date" type="text" id="my-date" class="form-control form-date">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
</div>
JS
$( '#my-date' ).datetimepicker( { format: 'MM-DD-YYYY' } );
Here is a working JSFiddle
First of all just include the jquery ui.min.js file for example
<link href="Contents" src="Scripts/jquery-ui-2.1.1.min.js">
and then write the code accordingly as mentioned below:
$("#datetimepicker1").datepicker({
dateFormat: "dd,MM,yy",
showOn: "button",
buttonText: "Select Date",
changeYear: "true",
changeMonth:"true"
});
add class="form-group",this works for me, but I don't know why
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type='text' id="fecha_nac" runat="server" name="fecha_nac" class="form-control input_margin" readonly="true" placeholder="Eliga la fecha"/>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>