I am using following sample code for date picker
<html>
<head>
<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Isolated Version of Bootstrap, not needed if your site already uses Bootstrap -->
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<!-- Bootstrap Date-Picker Plugin -->
<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"/>
</head>
<body>
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<!-- Form code begins -->
<form method="post">
<div class="form-group"> <!-- Date input 1-->
<label class="control-label" for="date">Start Date</label>
<input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
</div>
<div class="form-group"> <!-- Date input 2-->
<label class="control-label" for="date">End Date</label>
<input class="form-control" id="date1" name="date1" placeholder="MM/DD/YYY" type="text"/>
</div>
<div class="form-group"> <!-- Submit button -->
<button class="btn btn-primary " name="submit" type="submit">Submit</button>
</div>
</form>
<!-- Form code ends -->
</div>
</div>
</div>
<script>
$(document).ready(function(){
var date_input=$('input[name="date"]'); //our date input has the name "date"
var date_input1=$('input[name="date1"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options={
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
};
date_input.datepicker(options);
date_input1.datepicker(options);
})
</script>
</div>
</body>
</html>
The date picker for Start Date opens in correct position but for End Date the date picker open above the field. I want to open it below similar to first case. I guess the problem is with javascript and javascript is new new thing for me. How can I correct mistake?
When using anything new in programming it's best to consult the documentation for the tool in question to discover what you can and can't do. In this case I did a google search for the bootstrap-datepicker and I found the docs here: Options Doc
after reading the docs you'll find there is a property called orientation you can set. Revising your options variable to the following should correct your issue:
var options={
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
orientation: 'bottom'
};
Let me know how that goes!
If you add orientation: 'top' to your options, it should work.
https://jsfiddle.net/L4t68rzx/1/
var options={
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
orientation: 'top'
};
Related
I'm developping a chatbot. At some point, I ask the user to pick a date, I use the following code in the client side :
var elems = document.querySelector(".usrInput");
var currYear = (new Date()).getFullYear();
var options = {
defaultDate: new Date(currYear-1,1,31),
maxDate: new Date(currYear+1,12,31),
yearRange: [currYear-1, currYear+1],
format: "yyyy/mm/dd"
};
var instances = M.Datepicker.init(elems, options);
I want to restore the initial behavior of the element .usrInput after the date is picked, to allow the used to continue the conversation. Below is a minimal example of the html.
<html>
<head>
<title>chatbot</title>
<!--Import materialize.css-->
<link
rel="stylesheet"
type="text/css"
href="static/css/materialize.min.css"/>
</head>
<body>
<div class="container">
<div class="widget">
<div class="chat_header">
<span class="chat_header_title">Chatbot name</span>
<!--Chatbot contents goes here -->
<div class="chats" id="chats">
<div class="clearfix"></div>
</div>
<div class="keypad">
<textarea
id="userInput"
placeholder="Type something..."
class="usrInput"
></textarea>
<div id="sendButton">
<i class="fa fa-paper-plane" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm new to both materialize and js. Thanks.
I am trying to duplicate my bootstrap datepicker, but it's not working properly.
The datepicker is inside a div and I duplicate the whole div. It works fine, but the datepicker is only working in the original div, not the cloned ones.
I've seen on stackoverflow that you can put a class instead of an Id, but that is not working either.
$('.calendar').datepicker({
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose: true,
});
function duplicate() {
var i = document.getElementById('duplicater');
var d = document.createElement('div');
d.id = "new";
d.innerHTML = i.innerHTML;
var p = document.getElementById('dynamicInput');
p.appendChild(d);
}
duplicate();
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" integrity="sha256-I/m6FhcACNYmRoqn1xUnizh6S7jOJsTq+aiJ6BtE2LE=" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js" integrity="sha256-7Ls/OujunW6k7kudzvNDAt82EKc/TPTfyKxIE5YkBzg=" crossorigin="anonymous"></script>
<div id="dynamicInput" class="col-md-12">
<div id="duplicater">
<div class="row">
<div class="field-wrap3 col-sm-12 col-md-4">
<input type="text" placeholder="Event Title" name="event_title[]">
</div>
<div class="field-wrap3 col-sm-12 col-md-4">
<input type="text" placeholder="Background Image (URL)" name="img_url[]">
</div>
<div class="field-wrap3 col-sm-12 col-md-4">
<input name="date" placeholder="Date" type="text" class="calendar" />
</div>
</div>
<div class="row">
<div class="description-create" class="col-md-8">
<input type="text" placeholder="Description" name="description[]">
</div>
</div>
</div>
</div>
I don't get why it's not working. My JavaScript selects all the elements with the class calendar and "gives" it a datepicker, does it not?
If I understand your problem give same class name of your second input field as your original and initialize datepicker with same class name, you don't need to duplicate whole code.
For example if you want to initialize datetimepicker in two textbox just give them same name as in example that follows in snippet.
$( function() {
$( ".calendar" ).datepicker();
} );
<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>
<input name="date" placeholder="Date" type="text" class="calendar"/>
<input name="date1" placeholder="Date1" type="text" class="calendar"/>
The order of operations that you are using is:
html is on page
you are telling datepicker to enable the existing instances of .calendar
you are copying the div which creates html that the previous call didn't know about, so nothing attaches to it
The copy is making a copy of the html, it is not creating a new instance of datepicker. If at the end of your copy you called $('.calendar').datepicker('destroy'); you could follow that by your existing call to:
$('.calendar').datepicker({
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose: true,
});
which would have the effect of:
html is on page
datepicker is attached to all existing instances of .calendar
duplicate is called
duplicate copies the html
and removes all instances of .calendar
and then reattaches to make sure it gets the original and the new instances of calendar
alternatively you could scope your call for attaching datepicker so that you attach it only to the newly created html.
I am using moment js for me to pop-up the date and time calendar. I can choose both the date and time and click the apply button. The moment I click the apply only the date seem to be update into the text box but no time is appearing. What could be wrong.
Here is my css
<link rel="stylesheet" href="css/daterangepicker.css" rel="stylesheet">
This is the text box
<div class="form-group">
<div class="input-prepend input-group">
<span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
<input type="text" style="width: 200px" name="beginDateTime" id="beginDateTime" class="form-control" />
</div>
</div>
Here is how I define my javascripts.
<!-- daterangepicker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="js/datepicker/daterangepicker.js"></script>
Finally I have this codes to the settings.
<script>
$(function() {
$('#beginDateTime').daterangepicker({
"singleDatePicker": true,
"timePicker": true
}, function(start, end, label) {
console.log("New date range selected");
});
})
</script>
I'm trying to include the datepicker for Bootstrap but am getting the following error:
Uncaught TypeError: $(...).datepicker is not a function
I don't see why it's there. I've looked at other cases of this error, but none match mine.
HTML:
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="<?php echo BASE_URL; ?>/js/moment.min.js"></script>
<script src="<?php echo BASE_URL; ?>/js/bootstrap.min.js"></script>
<script src="<?php echo BASE_URL; ?>/js/bootstrap-datetimepicker.min.js"></script>
<script src="<?php echo BASE_URL; ?>/js/main.js"></script>
<div class="col-md-6">
<div class="form-group">
<label for="geboortedatum">Geboortedatum:</label>
<div class="input-group datepicker" data-provide="datepicker">
<input type="text" name="geboortedatum" id="geboortedatum" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function() {
$('.datepicker').datepicker({
format: 'dd/mm/yyyy'
});
});
UPDATE after adding JQuery UI
It now looks like the following:
Need to include jquery-ui too:
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Not the right function name I think
$(document).ready(function() {
$('.datepicker').datetimepicker({
format: 'dd/mm/yyyy'
});
});
To get rid of the bad looking datepicker you need to add jquery-ui css
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
You need to include jQueryUI
$(document).ready(function() {
$('.datepicker').datepicker({
format: 'dd/mm/yyyy'
});
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js" integrity="sha256-xI/qyl9vpwWFOXz7+x/9WkG5j/SVnSw21viy8fWwbeE=" crossorigin="anonymous"></script>
<script src="<?php echo BASE_URL; ?>/js/moment.min.js"></script>
<script src="<?php echo BASE_URL; ?>/js/bootstrap.min.js"></script>
<script src="<?php echo BASE_URL; ?>/js/bootstrap-datetimepicker.min.js"></script>
<script src="<?php echo BASE_URL; ?>/js/main.js"></script>
<div class="col-md-6">
<div class="form-group">
<label for="geboortedatum">Geboortedatum:</label>
<div class="input-group datepicker" data-provide="datepicker">
<input type="text" name="geboortedatum" id="geboortedatum" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
I had similiar problem. The quick fix I found is to change:
<div class="input-group datepicker" data-provide="datepicker">
to
<div class="input-group date" data-provide="datepicker">
<script type="text/javascript">
var options={
format: 'mm/dd/yyyy',
todayHighlight: true,
autoclose: true,
};
$('#datetimepicker').datepicker(options);
</script>
I resolved this by arranging the order in which your JS is being loaded.
You need to have it as jQuery -> datePicker -> Init js
Call your JQuery in your header, datePicker script in head below your jquery and Init JS in footer
You can try the following and it worked for me.
Import following scripts and css files as there are used by the date picker.
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<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"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
The JS coding for the Date Picker I use.
<script>
$(document).ready(function(){
// alert ('Cliecked');
var date_input=$('input[name="orangeDateOfBirthForm"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options={
format: 'dd/mm/yyyy', //format of the date
container: container,
changeYear: true, // you can change the year as you need
changeMonth: true, // you can change the months as you need
todayHighlight: true,
autoclose: true,
yearRange: "1930:2100" // the starting to end of year range
};
date_input.datepicker(options);
});
</script>
The HTML Coding:
<input type="text" id="orangeDateOfBirthForm" name="orangeDateOfBirthForm" class="form-control validate" required>
<label data-error="wrong" data-success="right" for="orangeForm-email">Date of Birth</label>
Currently, I'm using Bootstrap 3 Datepicker from this source
I have 2 datetimepicker on my system. (startTime, endTime).
I tried but don't know how to set minDate for endTime from startTime value whenever startTime value changed. Even it don't jump on change event.
Please point me what am I missing.
Here is my code
Many thanks.
You need to use the change event and minDate() function like
$('#txtStartTime').datetimepicker({
showTodayButton: true,
format: 'MM/DD/YYYY HH:mm',
sideBySide: true,
maxDate: moment()
}).on('dp.change', function(e) {
$('#txtEndTime').data("DateTimePicker").minDate(e.date)
});
$('#txtEndTime').datetimepicker({
showTodayButton: true,
format: 'MM/DD/YYYY HH:mm',
sideBySide: true
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="row">.</div>
<div class="col-md-3">
<input class="form-control datetimepicker" id="txtStartTime" type='text' />
</div>
<div class="col-md-3">
<input class="form-control datetimepicker" id="txtEndTime" type='text' />
</div>