I have an input element with an attached datepicker created using bootstrap-datepicker.
When the user changes the date by typing directly into the input element, and then clicks the calendar icon, the changed date is not reflected in the calendar
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="input-append date" id="calendar_toDate" data-date="12/31/2999" data-date-format="mm/dd/yyyy"><input type="Text" alt="toDate" id="toDate" name="toDate" enabled="" onblur="Javascript:checkDate(this, '', 'R');" value="12/31/2999" size="10" maxlength="10" class="input input-small" data-req="Y" aria-required="true" data-type="d">
<span class="add-on" title="Date Picker"><i class="icon icon-calendar"></i></span>
</div>
<script type="text/javascript">
$(function(){
window.prettyPrint && prettyPrint();
$('#calendar_toDate').datepicker();
});
function calenderDataChange(){
javascript:dataChangeCheckRoleDate();}
$('#calendar_toDate').datepicker({
format : 'mm/dd/yyyy',
startDate:'01/01/1900',
endDate:'12/31/2999',
autoClose:true ,
orientation:'auto right'
}).on('changeDate',function(ev){
$(this).datepicker('hide');
});
</script>
<span class="required"></span>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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>
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
<title>Document</title>
</head>
<body>
<div class="col-lg-6 col-md-6 col-sm-6">
<p>Date: <input type="text" id="datepicker"></p>
</div>
</body>
</html>
Related
With this input field I can open calendar only on icon next to input field, I want to open calendar on whole input field. How can I do this?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/css/datepicker.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/js/bootstrap-datepicker.js"></script>
<script>
function exportbydate() {
swal({
title: "{{trans('a_pdf.choosedate')}}",
html: `<form action="{{ url('/myaccount/view/transfer/pdf') }}" method="GET">`+
`<div class="row">
<input id="fromdate" name="fromdate" class="form-control" type="date" placeholder="Your name here" style="margin:10px; width: 50%;" autocomplete="off" required/>
<input id="todate" name="todate" class="form-control" type="date" style="margin:10px; width: 50%" autocomplete="off" required/>
</div>`+
` <button type="submit" class="btn btn-primary" >{{trans('a_pdf.search')}}</button>`+
`</form>`,
width: '650px',
showCancelButton: false,
showConfirmButton: false,
showCloseButton: true,
})
}
</script>
$( function() {
$( "#datepicker" ).datepicker();
} );
<!-- Using jQuery UI Datepicker -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
i am using jquery datetime picker
my problem is when i select the time and use tab button it will change to minus 1 hours
means if i select 9.30 am and click on tab button it will be 8.30 am and it will countinuely do minus when ever i use tab on that controll
here you can see that i have select 9.30 AM but when focus out on this control it will automatically do 8.30 AM
here is a code
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Places Searchbox</title>
<link href="~/Content/jquery.datetimepicker.css" rel="stylesheet" />
<script src="~/scripts/jquery.min.js"></script>
<script src="~/scripts/moment.js"></script>
<script src="~/scripts/bootstrap.min.js"></script>
<script src="~/scripts/bootstrap-datetimepicker.min.js"></script>
<script src="~/scripts/jquery.datetimepicker.full.min.js"></script>
<script src="~/scripts/VagaroDateTimePicker.js"></script>
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<input type="text" class="datepicker" />
</div>
</div>
</div>
$('.datepicker').datetimepicker({
format: 'M-d-Y g:i A',
});
i got the solution for this
$('.datepicker').datetimepicker({
// datepicker: false,//hide date
// format: 'DD-M-YYYY hh:mm A'
format: 'M-d-Y g:i A',
formatTime: 'g:i A',
validateOnBlur: false,
});
i have added validateOnBlur:false and its work for me
I test your code and i saw the problem that when you press tab if you choose 10.00 AM its became 09.00 AM and i checked the documentation and i figure out that you can combine moment.js as its written in the documentation
All you have to do to just add moment.js and then add this line to your codes
$('.datepicker').datetimepicker({
format:'DD.MM.YYYY h:mm a',
formatTime:'h:mm a',
formatDate:'DD.MM.YYYY'
});
$.datetimepicker.setDateFormatter('moment');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5">
<div class="row">
<div class="col-md-6 mb-5">
<input type="text" class="datepicker"/>
</div>
<div class="col-md-6 mb-5">
<input type="text" class="datepicker" />
</div>
<div class="col-md-6 mb-5">
<input type="text" class="datepicker" />
</div>
</div>
</div>
and i already made for you here please check it out and tell me if its helps
Fiddle: https://jsfiddle.net/v82vkxpz/7/
I wanted to put datetime picker, I am able to do it but my input box in smaller even if I put 'form-control input-lg'. Please suggest how can I change its size.
Also I wanted to overlap this datetime picker icon on text box.
Below is my code:
$('#dateOfAlert1').datetimepicker({
format: 'dd/MM/yyyy hh:mm:ss',
language: 'en-US'
});
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<body>
<label class="control-label" for="dateOfAlert">Date <span class="asteriskField"> * </span>
</label>
<div id="dateOfAlert1" class="input-append">
<span class="add-on"> <i data-time-icon="icon-time"
data-date-icon="icon-calendar"></i>
</span>
<input type="text" id="dateOfAlert" name="dateOfAlert" class="form-control input-lg" />
</div>
</body>
You have div class overriding bootstrap
id="dateOfAlert1" class="input-append
remove the input-append or edit the input in that class.
$('#dateOfAlert1').datetimepicker({
format: 'dd/MM/yyyy hh:mm:ss',
language: 'en-US'
});
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<body>
<label class="control-label" for="dateOfAlert">Date <span class="asteriskField"> * </span>
</label>
<div id="dateOfAlert1">
<span class="add-on"> <i data-time-icon="icon-time"
data-date-icon="icon-calendar"></i>
</span>
<input type="text" id="dateOfAlert" name="dateOfAlert" class="form-control input-lg" />
</div>
</body>
$('#dateOfAlert1').datetimepicker({
format: 'dd/MM/yyyy hh:mm:ss',
language: 'en-US'
});
.add-on{
position:relative;
}
.add-on .date-icon{
position:absolute;
top:0px;
left:0px;
}
.add-on{
width:50px!important;
}
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<body>
<label class="control-label" for="dateOfAlert">Date <span class="asteriskField"> * </span>
</label>
<div id="dateOfAlert1" class="input-append">
<span class="add-on"> <i data-time-icon="icon-time" class="date-icon" data-date-icon="icon-calendar"></i>
</span>
<input type="text" id="dateOfAlert" name="dateOfAlert" class="form-control input-lg" />
</div>
</body>
Sorry if its repeated but i cannot found solution. So ask on stackoverflow.
You can check my problem in image and also see that all required files are included. Just check it and help to fix it.
Thanks in advance.
Below is my code:
<div class="form-group">
<label class="control-label col-sm-3" >Set Date : </label>
<div class="col-sm-8">
<input type="text" id="datetimepicker" class="form-control datetimepicker" name="date_add_custom" placeholder="Set Date" value="" autocomplete="off"/>
</div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link rel="stylesheet" href="css/bootstrap-datetimepicker.css"/>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/moment.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="js/bootstrapValidator.js"></script>
<script type="text/javascript">
$('.datetimepicker').datetimepicker({
// format:'YYYY-MM-DD HH:mm',
format:'MM/DD/YYYY HH:mm', //HH = 24 hours
pickTime: true,
});
</script>
I have the code to add a date picker. Working fine. but when I try adding more than one pickers (div). Only the first picker works, Can anyone explain me what is wrong. I need to add sixteen datepickers (inputs) in my timetable.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<div id="datetimepicker" class="input-append date">
<input type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<div id="datetimepicker" class="input-append date">
<input type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
$('#datetimepicker').datetimepicker({
format: 'dd/MM/yyyy hh:mm',
language: 'en',
pick12HourFormat: true // enables the 12-hour format time picker
});
</script>
</body>
<html>
Replace id by class, because id should be unique in same document :
$('#datetimepicker').datetimepicker({
Should be :
$('.date').datetimepicker({
Hope this helps.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<div id="datetimepicker" class="input-append date">
<input type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<div id="datetimepicker" class="input-append date">
<input type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
$('.date').datetimepicker({
format: 'dd/MM/yyyy hh:mm',
language: 'en',
pick12HourFormat: true // enables the 12-hour format time picker
});
</script>
</body>
<html>