http://jsfiddle.net/e31m02L9/2/
How can I have DateTimePicker pick a month instead of a date and time? (So the value is YYYY-MM)
Looking at online documentation I was told to use startView:
$('#datetimepickerday').datetimepicker({
startView: "month"
});
But it gives the following error:
Yes, you have to use viewMode instead of startView and set format option to YYYY-MM. If you specify format: 'YYYY-MM' with eonasdan datetimepicker the default behaviour is to show the months dropdown (no need to explicitly set viewMode)
Here a working example:
$('#datetimepicker1').datetimepicker({
format: 'YYYY-MM',
viewMode: 'months'
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<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>
Related
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'
};
What I am trying to do is, after selecting a date on Bootstrap Datetimepicker, it should load a value on my input field, but I don't know how to do that. There's my JSFiddle.
This is my jQuery for datetimepicker
$(function () {
$('.datetimepickerinline').datetimepicker({inline: true});
});
I need to use it for all inputs, or in other words, closest input field.
You called so many unwanted libraries. Just try this bootstrap datepicker. Hope this work for you.
$(document).ready(function(){
$('#datepicker').datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
todayHighlight: true,
forceParse: false,
});
});
demo
Here is solution you want: jsfiddle
$('.datetimepickerinline').on('change dp.change', function(e){
$('input').val($(this).data('date'));
});
See reference here
Further more, I noticed that you want use moment.js
You can use something like this, using custom format:
$('.datetimepickerinline').on('change dp.change', function(e){
$('input').val(moment($(this).data('date')).format('DD/MM/YYYY, h:mm'));
});
You need to apply class 'datetimepickerinline' on your input field.
<input id="" placeholder="press to show calendar" class="input datetimepickerinline">
Try this fiddle : - https://jsfiddle.net/ekm0on2a/11/
you need to add datepicker class in your input field.
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div id="container">
<div class="my-example">
<input id="datepicker" placeholder="press to show calendar" class="input input-datepicker">
<div class="dropdown">
<div class="datetimepickerinline">
</div>
</div>
</div>
</div>
//script
$(function () {
$('#datepicker').datetimepicker({inline: true});
});
I am using bootstrap datetimepicker. Its need moment.js.
To make it local I have use this moment with locale
I need my year should be Buddhist year-2016 means 2559(2016+543). How can I achieve this using moment.
My html is :
$('#startDate').datetimepicker({
format: 'DD-MM-YYYY',
locale: 'th',
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js"></script>
<div class="col-md-6 date">
<input type='text' class="form-control" id='startDate' />
</div>
I need this:
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>
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>