I had this datetimepicker working not too long ago, but now it's no longer opening. I did move it to a modal window, but it's still in the same file where I'm calling the JS and CSS files.
Here is what is in the head:
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script type="text/javascript"
src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"
src="js/bootstrap-datetimepicker.min.js"></script>
</head>
Here is the code that should call the datetimepicker, which is inside a modal window:
<div class='input-append' id='datetimepicker'>
<label>Delivery Appt Date</label>
<input data-format='yyyy-MM-dd' type="text"
style="width: 140px;" value="" id="del_date" name="del_date" />
<span class='add-on'>
<i data-date-icon='icon-calendar' data-time-icon='icon-time'></i>
</span>
<script type='text/javascript'>
$(function() {
$('#datetimepicker').datetimepicker({
pickTime: false
});
});
</script>
</div>
The i data-date tag above shows the little image of the calendar, so I know it's getting the CSS. But why doesn't it open the actual calendar window so the user can pick a date?
I've gone to several pages, and the closest thing I could find was this: http://www.eyecon.ro/bootstrap-datepicker/
Those examples are the closest to what I have previously achieved, but for some reason, I cannot duplicate.
What am I missing?
Check out this fiddle, based on this link.
EDIT: fixed the fiddle link.
<div class="well">
<div id="datetimepicker" class="input-append date">
<label>Delivery Appt Date</label>
<input data-format="yyyy-MM-dd" type="text" style="width: 140px;" value="" id="del_date" name="del_date" ></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<script>
$(function() {
$('#datetimepicker').datetimepicker({
language: 'pt-EN'
});
});
</script>
Related
I'm using eonasdan datetimepicker. I chose default date via using options. I opened the page using chrome, firefox 47.0, and microsoft edje 25.1.
Firefox Case: The date appears in the textfield. But, if I go to
the address bar and hit 'enter', the date shown in the textfield
disappears.
Chrome and edje Case: When the page opens, the date is not shown
in the textfield.
I created a fiddle for this question fiddle, what happens in the fiddle is the same as what happens in the google chrome and internet explorer case.
I tried using the 'viewDate: true' option for datetimepicker which fixed the problem. But it created another problem -- the calendar is not shown when I click the calendar icon.
I have no idea why this is happening. Any help is greatly appreciated.
The same code in the fiddle is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>
Example
</title>
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<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>
</head>
<body>
<div class="container">
<form id="j_idt11" name="j_idt11" method="post" action="/myPage.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt11" value="j_idt11" />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary">
<div class="panel-heading text-center">
My Panel
</div>
<div class="panel-body">
<div class="form-group text-right">
<label class="text-right">My Date</label>
<div class="form-group">
<div class='input-group date' id='d0'>
<input type="text" name="j_idt11:j_idt15:0:j_idt21" value="2016-09-03" class="form-control text-right" onkeydown="return false" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
<script type="text/javascript">
$(function () {
var cID = "#";
cID = cID.concat('d0');
var t = '2016-09-03'
var options = {
format: 'L',
defaultDate: moment(t)
};
$(cID).datetimepicker(options);
});
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
You don't need value attribute for datetimepicker input in your HTML. If you remove it, your code will work as showed in the following example:
var cID = "#";
cID = cID.concat('d0');
var t = '2016-09-03';
var options = {
format: 'L',
defaultDate: moment(t)
};
$(cID).datetimepicker(options);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<div class="container">
<form id="j_idt11" name="j_idt11" method="post" action="/myPage.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt11" value="j_idt11" />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary">
<div class="panel-heading text-center">
My Panel
</div>
<div class="panel-body">
<div class="form-group text-right">
<label class="text-right">My Date</label>
<div class="form-group">
<div class='input-group date' id='d0'>
<input type="text" name="j_idt11:j_idt15:0:j_idt21" class="form-control text-right" onkeydown="return false" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
If you want to use data attributes you can use data-date-* to set an option or data-date-options setting an option object. In your case you can use data-date-default-date instead of value.
You can find more about data-* initialization here and here.
CDN :
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css"></script>
HTML :
<div class="row">
<div class="col-md-12">
<h6>datetimepicker1</h6>
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" /> <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
<h6>datetimepicker2</h6>
<input type="text" class="form-control" id="datetimepicker2" />
</div>
</div>
JavaScript :
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
Use This Code..
This will useful for you..
I am using angurla js, bootstrap for web development.
I want to show date picker on text box.
I found solution here https://angular-ui.github.io/ui-date/
But it looks like need to include jquery, jquery ui, that is unnecessary overhead on application only for date picker.
Is there inbuilt feature available in angular for date picker?
Below is my plunker https://plnkr.co/edit/aV65Nab9U9I6YlK2g4sY?p=preview
In Date of birth field I want to add date picker.
<!DOCTYPE html>
<html lang="en" ng-app="autoQuote">
<head>
<!-- start: Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- end: Meta -->
<link rel="shortcut icon" href="<?php echo base_url(); ?>assets/themes/default/img/favicon.ico">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-resource.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="autoQuoteCtrl.js"></script>
<script src="dtoResource.js"></script>
<script src="questionResource.js"></script>
<script src="controlDirectives.js"></script>
<script src="postDtoFactory.js"></script>
<script src="custom-required.validator.js"></script>
</head>
<body>
<div class="col-md-2"></div>
<div class="container-fluid col-md-8">
<div class="row" ng-if='questions'>
<div class="col-md-12 text-center">
<div class="page-header">
<h1>
User Form</small>
</h1>
</div>
<div ng-controller="autoQuoteCtrl">
<form class="form-horizontal text-center" role="form" name="DTOstep1" ng-submit="onSubmit()" novalidate>
<div class="row">
<div class="form-group">
<label class="col-sm-5 control-label" for="dob">Date of Birth</label>
<div class="col-sm-6">
<input type="text" id="dob" class="form-control" name="dob" ng-model="answers.dob" required>
</div>
</div>
<span class="form-error" ng-show="submitted && DTOstep1.dob.$error.required">This field is required.</span>
</div>
<div class="col-sm-5"></div>
<div class="col-sm-6">
<input name="saveDto" type="submit" class="btn btn-success btn-lg" value="Continue" />
<input type="button" class="btn btn-info" name="formclone" value="+ Add More Cars" ng-click="appendClonedDiv()" />
</div>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-2"></div>
</body>
</html>
You can use input type as date <input type="date" id="dob" class="form-control" name="dob" ng-model="answers.dob" required>
plnkr.co/edit/lIzYjMVmmP26cr3rZrxF?p=preview
angular.js does not sport a datepicker natively (it is not it's scope).
But angular-ui.js (here) provides a datepicker module, quite powerful...
See for example this plunkr.
Searched around and found ngMaterial provides features like that.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-aria.min.js"></script>
var app = angular.module("autoQuote", ["ui.router", "ngResource","ngAnimate","ngMaterial"]);
<md-datepicker ng-model="answers.myDate" md-placeholder="Enter date"></md-datepicker>
I tried to use Bootstrap date-picker (https://github.com/eternicode/bootstrap-datepicker), but i can't get it to work.
On jsfiddle everything works like a charm: http://jsfiddle.net/hwuktpt2/
After some failed tests on the actual page, I even tried a blank new page and integrated everything from scratch again. jQuery works, Bootstrap styling works, Datatables works, but I just can't get date-picker to work.
Any suggestions?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/u/bs-3.3.6/jq-2.2.3,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,b-1.2.0,b-colvis-1.2.0,b-html5-1.2.0,b-print-1.2.0,fh-3.1.2,se-1.2.0/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/u/bs-3.3.6/jq-2.2.3,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,b-1.2.0,b-colvis-1.2.0,b-html5-1.2.0,b-print-1.2.0,fh-3.1.2,se-1.2.0/datatables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/locales/bootstrap-datepicker.de.min.js"></script>
<script type="text/javascript">
$('.date_picker input').datepicker({
format: "dd.mm.yyyy",
todayBtn: "linked",
language: "de"
});
</script>
<style type="text/css">
.control-label {
padding-top:7px;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
Neues Mobile Device anlegen
</div>
</div>
<div class="container">
<form class="form-horizontal" name="mobdev_neu" action="mobdev_neu.php" method="post">
<div class="form-group">
<label for="mobdev_neu_type" class="col-xs-2 control-label">Type</label>
<div class="col-xs-10">
<select id="mobdev_neu_type" class="form-control" name="mobdev_neu_type" REQUIRED>
<option value="">-- Bitte auswählen --</option>
</select>
</div>
</div>
<div class="form-group">
<label for="mobdev_neu_imei" class="col-xs-2 control-label">IMEI</label>
<div class="col-xs-10">
<input type="text" id="mobdev_neu_imei" class="form-control" name="mobdev_neu_imei" placeholder="Pflichtfeld" REQUIRED>
</div>
</div>
<div class="form-group">
<label for="mobdev_neu_kaufdatum" class="col-xs-2 control-label">Kaufdatum</label>
<div class="col-xs-10 date_picker">
<input type="text" id="mobdev_neu_kaufdatum" class="form-control" name="mobdev_neu_kaufdatum" placeholder="Pflichtfeld">
</div>
</div>
</form>
</div>
</body>
Wrap the date picker initialize call in a document.ready. This code is running before the dom is finished loading from the look of it. Since JavaScript is interpreted it is run at the time it is read by the browser. Because you're defining the code in the head the body and its contents haven't been loaded yet; so the selector finds no elements to initialize datepicker. If you don't want to use document.ready functionality you could also move the script to the end of the body tag.
$(function(){
$('.date_picker input').datepicker({
format: "dd.mm.yyyy",
todayBtn: "linked",
language: "de"
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>
Use these Libraries after using this use below code in you body where you want to make Date field.
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" name="update_time" placeholder="Update Date"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
var j = jQuery.noConflict();
j(function () {
j('#datetimepicker1').datetimepicker({
format: 'L',
disabledHours: true,
});
});
</script>
I am using jquery-timepicker, and it is not displaying the dropdown when I click on the input box. In my view:
<script type="text/javascript">
$(function(){
$('#StartTime').timepicker();
});
</script>
/* ... */
<div class="col-xs-6 form-group">
<label>Start Time:</label>
<div class="input-group">
<input type="text" class="form-control" id="StartTime" />
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
I know it is loading properly, because the ui-timepicker element is being added to the DOM when I click on the input box and it formats time entered in the box when it loses focus. It just isn't displaying the dropdown.
Check that you have all the dependencies. I copied your code to a snippet and added the dependencies from the official site and it worked well. I included the following dependencies: jQuery, jQuery timepicker and Bootstrap timepicker. The last two have CSS and JS files too.
$(function() {
$('#StartTime').timepicker();
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css">
<script type="text/javascript" src="https://jonthornton.github.io/jquery-timepicker/lib/bootstrap-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://jonthornton.github.io/jquery-timepicker/lib/bootstrap-datepicker.css">
<div class="col-xs-6 form-group">
<label>Start Time:</label>
<div class="input-group">
<input type="text" class="form-control" id="StartTime" />
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
Make sure there is no css definitions, which may hide this element.
I ma starting with that i am obsiously blind, but i can't find a fail in my own code, please can someone find a minute and tell me what the hell i am doing wrong?
Code looks totaly OK for me but dispite this fact it's not working ofcourse.
Code looks like:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div class="date-form">
<div class="form-horizontal">
<div class="control-group">
<label for="date-picker-2" class="control-label">B</label>
<div class="controls">
<div class="input-group">
<input id="date-picker-2" type="text" class="date-picker form-control" />
<label for="date-picker-2" class="input-group-addon btn"><span class="glyphicon glyphicon-calendar"></span>
</label>
</div>
</div>
</div>
<div class="control-group">
<label for="date-picker-3" class="control-label">C</label>
<div class="controls">
<div class="input-group">
<label for="date-picker-3" class="input-group-addon btn"><span class="glyphicon glyphicon-calendar"></span>
</label>
<input id="date-picker-3" type="text" class="date-picker form-control" />
</div>
</div>
</div>
</div>
<hr />
</div>
<script>
$(".date-picker").datepicker();
$(".date-picker").on("change", function () {
var id = $(this).attr("id");
var val = $("label[for='" + id + "']").text();
$("#msg").text(val + " changed");
});
</script>
And fiddle here:
http://jsfiddle.net/bbm035nx/1/
Unfortunately, here we have a problem, datepicker don't even popup, looks it didn't find jquery, but WHY or what happen? I have no clue. Please guys can somebody try to look at it?
Thank you all and again sorry for stupid question.
Please take a look at the right panel. You forgot to include necessary libraries. Add them in order (jQuery > jQueryUI > Bootstrap) and it shoudl all work!
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<script src="//code.jquery.com/jquery-1.11.0.js" type="text/javascript">
<link href="https://code.jquery.com/ui/1.11.2/themes/black-tie/jquery-ui.css" type="text/css" rel="stylesheet">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js" type="text/javascript">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" type="text/javascript">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" type="text/css" rel="stylesheet">
</head>
http://jsfiddle.net/bbm035nx/2/