<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.
Related
I have no clue why my sign up page have these errors
jquery-ui.js:8056 Uncaught TypeError: Cannot read property 'left' of undefined
Some codes
<input type="text" name="datePickerInput" class="form-control hidden" id="datePickerInput" value="" placeholder="">
<script type="text/javascript">
$("#babyDob").click(function() {
$('#datePickerInput').datepicker('show');
$("#datePickerInput").datepicker({
dateFormat: 'yy-mm-dd',
maxDate: 0,
onSelect: function() {
var dateSelected = $(this).datepicker('getDate');
// dateSelected = moment(dateSelected).format('YYYY-MM-DD');
console.log("dateSelected",dateSelected);
}
});
});
</script>
Entire Codes
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Bunlong Heng">
<meta name="csrf-token" value="{{ csrf_token() }}">
<title>Sign Up</title>
<link id="favicon" rel="shortcut icon" href="/assets/fe/img/favicon/local/favicon-prod.png" type="image/x-icon" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
#include('layouts.be.baby.styles.datePicker')
<style type="text/css">
.form {
margin-top: 200px;
color: black;
z-index: 2;
}
.btn, .form-control {
border-radius: 0px;
border: solid 1px black;
color: black;
}
.sign-up-section {
font-weight: thin !important;
}
body{
overflow: hidden;
}
</style>
</head>
<body>
<div class="container ">
<div class="row ">
<p style="font-size: 1500px; color: black; z-index: 1; position: absolute; top: 0; right: 0; ">MY</p>
<div class="col-sm-4 "></div>
<div class="col-sm-4 form text-center">
<img src="https://i.imgur.com/XCVhEh4.png">
{!! Form::open(array('class' => 'form-horizontal', 'role' =>'form', 'url'=>'baby/store','files' => true)) !!}
{{-- Name --}}
<div class="form-group">
<label for="name" class="col-sm-4 control-label">Name</label>
<div class="col-sm-8">
<input type="text" value="{{Request::old('name')}}" value="" name="name" class="form-control" id="name" placeholder="Name">
</div>
</div>
{{-- Email --}}
<div class="form-group">
<label for="email" class="col-sm-4 control-label">Email</label>
<div class="col-sm-8">
<input name="email" type="email" value="" class="form-control" placeholder="Email">
</div>
</div>
{{-- babyName --}}
<div class="form-group">
<label for="babyName" class="col-sm-4 control-label">babyName</label>
<div class="col-sm-8">
<input type="text" value="{{Request::old('babyName')}}" value="" name="babyName" class="form-control" id="babyName" placeholder="babyName">
</div>
</div>
{{-- babyDob --}}
<div class="form-group">
<label for="babyDob" class="col-sm-4 control-label">babyDob</label>
<div class="col-sm-8">
<input type="text" value="{{Request::old('babyDob')}}" value="" name="babyDob" class="form-control" id="babyDob" placeholder="babyDob">
<input type="text" name="datePickerInput" class="form-control hidden" id="datePickerInput" value="" placeholder="">
</div>
</div>
{{-- adminCode --}}
<div class="form-group">
<label for="adminCode" class="col-sm-4 control-label">Password</label>
<div class="col-sm-8">
<input type="text" value="{{Request::old('adminCode')}}" value="" name="adminCode" class="form-control" id="adminCode" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-10">
<a class="btn btn-default" href="/baby/signup"> Cancel </a>
<button type="submit" id="submit" class="btn btn-default">Next</button>
</div>
</div>
{!!Form::close()!!}
</div>
</div>
</div>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$("#babyDob").click(function() {
$('#datePickerInput').datepicker('show');
$("#datePickerInput").datepicker({
dateFormat: 'yy-mm-dd',
maxDate: 0,
onSelect: function() {
var dateSelected = $(this).datepicker('getDate');
// dateSelected = moment(dateSelected).format('YYYY-MM-DD');
console.log("dateSelected",dateSelected);
}
});
});
</script>
</body>
</html>
Consider the following example.
$(function() {
$('#datePickerInput').datepicker('show');
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" name="datePickerInput" class="form-control hidden" id="datePickerInput" value="" placeholder="">
This throws a similar error:
Uncaught TypeError: inst is undefined
You must initialize the Datepicker first, and then call the show option. Like so:
$(function() {
$("#datePickerInput").datepicker({
dateFormat: 'yy-mm-dd',
maxDate: 0,
onSelect: function() {
var dateSelected = $(this).datepicker('getDate');
console.log("dateSelected", dateSelected);
}
});
$('#datePickerInput').datepicker('show');
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" name="datePickerInput" class="form-control hidden" id="datePickerInput" value="" placeholder="">
When selecting a date from Materialize datepicker, a user sometimes may not select a day for many unknown reasons, but the "OK" button remains active, promoting them to click and of course no date value is selected.
So far, after they click "ok", I can be able to check that the date value is empty prompting them to select a day.
However, my question is about deactivating the "OK" button all together so that they have to select a day to make it active. May be there is Materialize option which I've not found from the guide
Code:
var currYear = (new Date()).getFullYear();
$(document).ready(function() {
$(".datepicker").datepicker({
defaultDate: new Date(currYear-5,1,31),
// setDefaultDate: new Date(2000,01,31),
maxDate: new Date(currYear-5,12,31),
yearRange: [1928, currYear-5],
format: "yyyy/mm/dd"
});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<div class="container">
<br><br><br><br><br><br><br>
<div class="col s12 m10 offset-m1 l6 offset-l3">
<div class="row">
<form action="" class="col s12 m8 offset-m2 l6 offset-l3">
<div class="row">
<div class="input-field">
<input type=text name="bdate" id="bdate" class="datepicker" required>
<label for="bdate">Birthday</label>
</div>
</div>
<div class="row">
<div class="input-field">
<input name="email" id="email" type="text" class="validate">
<label for="email">Email</label>
</div>
</div>
</form>
</div>
</div>
You can implement onOpen and onSelect method of datepicker. There no such feature inbuilt in materialise css I guess so Try below updated code..
var currYear = (new Date()).getFullYear();
$(document).ready(function() {
$(".datepicker").datepicker({
defaultDate: new Date(currYear-5,1,31),
// setDefaultDate: new Date(2000,01,31),
maxDate: new Date(currYear-5,12,31),
yearRange: [1928, currYear-5],
format: "yyyy/mm/dd",
onOpen:function(){
$('.datepicker-done').prop("disabled", true);
},
onSelect:function(){
$('.datepicker-done').prop("disabled", false);
}
});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<div class="container">
<br><br><br><br><br><br><br>
<div class="col s12 m10 offset-m1 l6 offset-l3">
<div class="row">
<form action="" class="col s12 m8 offset-m2 l6 offset-l3">
<div class="row">
<div class="input-field">
<input type=text name="bdate" id="bdate" class="datepicker" required>
<label for="bdate">Birthday</label>
</div>
</div>
<div class="row">
<div class="input-field">
<input name="email" id="email" type="text" class="validate">
<label for="email">Email</label>
</div>
</div>
</form>
</div>
</div>
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/
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>