I am working on an application, and I'm a little stuck on the datetimepicker. The datepicker should be able to show a data format of yyyy-mm-dd hh:mm:ss (year, month and date with current hour, minutes and seconds...). It's working fine, but after when i select the date the datepicker has to autoclose or hide. But it's not going off. I tried a lot with different scripts, still not able to work. Following is the HTML:
<span>Select time with Date</span>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" id='datetimepicker2' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
Following is the JS:
<script type="text/javascript">
$(function() {
$('#datetimepicker2').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss',
autoclose: true
});
});
</script>
I guess the script is not supporting autoclose call. Any idea how I can fix this?
You can just listen to the datetimepicker dp.change event and force closing the datetimepicker when the date is changed like:
$(function() {
$('#datetimepicker2').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss'
});
// Hide datetimepicker on date change
$("#datetimepicker2").on("dp.change", function() {
$(this).data("DateTimePicker").hide();
});
// Show datetimepicker on input text click
$('#datetimepicker2 > input').on('click', function() {
$(this).closest('.date').data('DateTimePicker').show();
});
});
Related
I'm using eonasdan-bootstrap-datetimepicker:
<input type="text" class="form-control" ng-model="$ctrl.date" id="dateStart">
<script type="text/javascript">
$("#dateStart").datetimepicker({
format: 'ddd, D MMMM YYYY',
showTodayButton: true
});
</script>
What I want to achieve is that everytime I close the picker and reopen it I'll always have the days picker.
Right now If I'm in the "datepicker-months" and click outside, the picker will close and if I reopen it it will show the months view again, but I want the days one.
I tried with:
on('dp.show', function(e) {
$(".datepicker-days").show();
$(".datepicker-months").hide();
$(".datepicker-years").hide();
$(".datepicker-decades").hide();
});
This ways looks like it's working: if I close it during months view and reopen it I'll get the days datepicker, but if from here I click on the month again I'll get the datepicker-years..
Any help would be appreciated.
EDIT:
Code here:
http://jsfiddle.net/xrqkyypd/51/
The answer is pretty much straightforward using events and viewMode function.
You only must check that when the picker get hide then you reset his viewMode to which ever you want, in this case the days view.
$('#myDatepicker').on('dp.hide', function(e) {
$('#myDatepicker').data("DateTimePicker").viewMode('days')
});
According with documentation, you can set like this:
<div class="container">
<div class="col-sm-6" style="height:130px;">
<div class="form-group">
<div class='input-group date' id='datetimepicker9'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker9').datetimepicker({
viewMode: 'years' //days, weeks etc
});
});
</script>
</div>
For more details check view mode
I wan't datetimepicker to show only rounded hours and disable minutes selection. So user will be able to pick only hours, like 02:00. However I can't achieve this simple task. Here is my code (in a Laravel view):
$("#date_from").datetimepicker({
format: 'yyyy-mm-dd hh:00',
startDate: "{{date('Y-m-d')}}",
minuteStepping: 60,
autoclose: true }).on('hide', function(e) {
$("#date_to").datetimepicker(
"setStartDate", new Date($('#date_from').val())
)....
I've tried steps: 60, stepping:60, minView: 1 and others.
Still I'm getting this
Here is one example for you, i think it will help you.
jsfiddle.net/tmk0293z/7/
There is changedate event bind with a function and changes the another startdate of other field.
Thanks,
Nishit Zinzuvadiya
Here is the actual code
(HTML):
<div class="input-append date form_datetime" id="first">
<input type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<div class="input-append date form_datetime" id="second">
<input type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<span id="selected"></span>
JS:
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii",
minView:1,
autoclose:true
});
$("#first").datetimepicker().on("changeDate", function(e){
var first = new Date(e.date.setMinutes(0));
first.setHours(first.getHours()+first.getTimezoneOffset()/60); //timezone correction
$("#second").datetimepicker('setStartDate', first);
//other = $("#first").find("input").val();
//$("#second").datetimepicker('setStartDate', other); //works also
});
see the option viewMode and format
https://eonasdan.github.io/bootstrap-datetimepicker/Options/
try using step: 60 not steps
please check this link also :click here
<div class="form-group">
<div class='input-group' id='datepicker-start'>
<input type='text' class="form-control" id='start' />
<span class="input-group-addon date"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
Hi Guys this my date picker css with bootstrap
I am using Zebra Date Picker but using bootstrap icon instead of Zebra icon which is red and i don't like it
Following is my date picking Jquery
$(document).ready(function() {
$('#datepicker-start').Zebra_DatePicker({
onSelect: function () {
$zdp = $('#datepicker-start').data('Zebra_DatePicker');
$('#start').val(zdp);
},
direction: true,
});
});
What I am trying to do is copy entered date into $zdp and set it to the value of input tag whose id is start.
I am new to javascript and jquery kindly guide what I am doing wrong casue this code is not running
I think, you need to use the onSelect handler like
$(document).ready(function () {
$('#datepicker-start').Zebra_DatePicker({
onSelect: function (str1, str2, date, $el) {
$('#start').val(str1);
},
direction: true,
});
});
i've got a probleme with my date picker. I need to custom this datepicker but when i try to custom them it doesn't work.
Example:
I have this html code:
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control" data-target="#job-date_start" name="date_start" title="" id="datestart" class="xlarge required" readonly>
<input type="hidden" id="job-date_start" value="" name="job[date_start]" />
</div>
And on javascript i try that:
$('#datestart').datepicker( {
onSelect: function(date) {
alert(date);
},
});
And my problem is, when i click on a date in my datepicker the console.log(test) don't appear.
Thanks you
Inlcude jquery and jquery ui libraries and then on document ready add your code http://jsfiddle.net/m443no17/
$(document).ready(function () {
$('#datestart').datepicker({
onSelect: function (date) {
alert(date);
},
});
});
Ofcourse , it will work the way you wrote . But , is not needed if you are having only one helper.
$('#datestart').datepicker( {
onSelect: function(date) {
alert(date);
}
});
Hope you have imported all the libraries required for datepicker and ofcourse jQuery proper version.
FYI :- Your DOM should be ready before you are executing this script
I'm working with bootstrap datetimepicker and I want to disabled the past days and I used
startDate: -Infinity
to set a minimum date but it doesn't work. And also i received an error in my console.
Uncaught TypeError: Cannot read property 'fn' of undefined
I also used the working code from this thread but still not working in my project.
Here is my code:
<div id="datetimepicker1" class="input-append date">
<input data-format="dd/MM/yyyy" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
My Javascript:
$(function(){
$('#datetimepicker1').datetimepicker({
startDate: -Infinity ,
pickTime: false
});
});
Regards!
Problem Fixed:
I just change my script to:
$(function(){
var date = new Date();
date.setDate(date.getDate());
$('#datetimepicker1').datetimepicker({
startDate: date,
pickTime: false
});
});