Allow text entry field for datepicker - javascript

This is my code HTML to generate the field destinate to datePicker:
<div class="col-md-12">
<div class="form-group">
<label class="form-font input-size"> Date:</label>
<div class="input-group">
<input id="date-picker-2" type="text" class="date-picker form-control input-borders" name="pdf_date"/>
<label for="date-picker-2" class="input-borders input-group-addon btn">
<span class="glyphicon glyphicon-calendar"></span>
</label>
</div>
</div>
And this is my JS code to display the datePicker.
$(".date-picker").datepicker({
format: "dd MM yyyy"
});
I'm looking for a way to enter the text field will display the selected date, some text in particular.
But the text entry always disappears when you select a date.
Is there any way to avoid this?
I can generate an event by clicking on the field that displays the datepicker and add to html using the append attribute, a text?
I know it can be a bit basic question but I could not solve it.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
Shown Field : <input id="thedate" type="text" placeholder="dd MM yyyy" /><br />
<input id="thesubmit" type="button" value="Submit" />
<script type="text/javascript">
$(function(){
$('#thedate').datepicker({
dateFormat: 'dd-mm-yy',
altField: '#thealtdate'
});
});
</script>
</body>
</html>

Related

Can't get calendar to appear on click - no JS errors

When I click on the text box or icon, I can't get the popup calendar to appear. I get no JavaScript errors and just can't seem to work out what the issue is.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#datetimepicker input').click(function(event) {
$('#datetimepicker').data("DateTimePicker").show();
});
</script>
<!-- in the body -->
<div class="input-group">
<input type="text" id="datetimepicker" class="form-control" name="date">
<label class="input-group-addon btn" for="date">
<span class="fa fa-calendar open-datetimepicker"></span>
</label>
</div>
Can anyone see what I'm doing wrong as I'm really confused now and can't seem to work it out.
Thanks
In document.ready you have to initialize the datepicker just use this
$("#datetimepicker ").datepicker({
dateFormat: 'd-M-yy'
});
and it will automatically show calendar when you click on input type
Ensure that you've correctly imported jQuery, jQuery DateTimePicker JS & CSS. Then use datetimepicker simply as following, no need of a click event -
$('#datetimepicker').datetimepicker();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" />
<div class="input-group">
<input type="text" id="datetimepicker" class="form-control" name="date">
<label class="input-group-addon btn" for="date">
<span class="fa fa-calendar open-datetimepicker"></span>
</label>
</div>

PHP HTML form and Java datepicker

I have an HTML form which preloads with data from MySQL. I have added one form field "New Follow Up" to have a popup calendar using datepicker. The datepicker returns a DATE format, which I need to convert to DATETIME for MySQL. The return is currently date_followup.
I was wondering if this could be done within the <script> function, so that the date_followup could be in the standard DATETIME format, elimination the conversion. Or is there an easier way?
<div class="control-group <?php echo !empty($date_followupError)?'error':'';?>">
<label class="control-label">New Followup Date</label>
<div class="controls">
<input name="date_followup" type="text" placeholder="Enter Follow up date" value="<?php echo !empty($date_followup)?$date_followup:'';?>">
<?php if (!empty($date_followupError)): ?>
<span class="help-inline"><?php echo $date_followupError;?></span>
<?php endif;?>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<input id="datepicker" input name="date_followup">
</body>
</div>
</div>
First i recommend you to split your codes. Create your own JavaScript file e.g. main.js, program all your JavaScript function in and refer the main.js file in your HTML-header. It would be much easier to debug your code. Furthermore you need a JavaScrip-Lib for a Datetimepicker. As my previous speaker said, use the eonasdan-picker and refer it also in your header file. So:
HTML
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://github.com/Eonasdan/bootstrap-datetimepicker/blob/master/src/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="path/to/main.js"></script>
</head>
<body>
<div class="form-group">
<div class='input-group date' id='datepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</body>
JavaScript (main.js)
$( document ).ready(function() {
$('#datepicker').datetimepicker({
//here you have the possibilty to configure the picker as you wish
//e.g. the format
format: 'y-m-d'
//read the documentary of EONASDAN to see which attributes you can choose
})
});
Important: The order of your CSS- and JS-Libs matters. E.g. the datetimepicker of EONASDAN needs the jQuery-Lib. If the jQuery-lib is reffered after eonasdan, it would not work. Same with the main.js, which should reffered evertime as the last file.
**include bootstrap files**
<div class="container">
<div class="row">
<div class='col-sm-6'>
<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 glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
https://eonasdan.github.io/bootstrap-datetimepicker/

Not able to customize bootstrap-datepicker

I am trying to customize the calendar, but it seems that it is not taking into account the customization, such as displaying the today button or ignoring past dates. I tried the following:
in the head
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datepicker3.min.css" rel="stylesheet">
in the top body
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
Then in the form:
<script>
$('.datepicker').datepicker({
startDate: 0,
todayBtn: "linked"
});
</script>
<div class="form-group">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" placeholder="Date *" id="caldate" required data-validation-required-message="Please choose date.">
<span class="input-group-addon">
<i class="glyphicon glyphicon-th"></i>
</span>
<p class="help-block text-danger"></p>
</div>
</div>
However, I still do not get the 'Today' button. I am not sure if the reason is because the javascript code is not correct? (not calling the calendar correctly) or misplaced?
Basically, your jQuery call with todayBtn option isn't really pointing to your input. The datepicker functionality you're seeing is based on your html. I moved the script after the elements (so it runs after the target elements are in the DOM) and changed the jQuery call to find the correct element. Also, I believe the startDate option should be a date so I changed it from 0 to '3/16/2016'. The original html is unchanged...
<div class="form-group">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control"
placeholder="Date *" id="caldate" required data-validation-required-message="Please choose date.">
<span class="input-group-addon">
<i class="glyphicon glyphicon-th"></i>
</span>
<p class="help-block text-danger"></p>
</div>
</div>
<script>
$("div.input-group.date").datepicker({
startDate: '3/1/2016',
todayBtn: "linked"
});
</script>

How to implement bootstrap-datepicker sandbox in HTML example

I found out the datepicker for bootstrap at the link below, well, i downloaded the development version, and then after configuring some settings at the page in there, and after attaching the required stylesheets and javascript files, still i can't get an HTML example working.
This is the link for the example to download.
I gathered the required CSS and JS as below:
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="build/build_standalone.less.css" rel="stylesheet" type="text/css">
<link href="css/datepicker.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datepicker.js"></script>
HTML as below:
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
The JS script at the end of the file as below:
<script>
$('#sandbox-container .input-daterange').datepicker({
startDate: "-12/30/2014",
endDate: "+01/15/2015",
startView: 1,
clearBtn: true,
calendarWeeks: true,
autoclose: true,
todayHighlight: true
});
</script>
Now the two inputs appear but they don't work, I don't know whats missing. I also can't find any HTML examples in the downloaded files for the demo, it's all .md, .jason, and other formats that it seems to be raw and I don't know actually how to implement this simply in HTML file.
I don't see #sandbox-container in your HTML:
<div id="sandbox-container">
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
</div>

Datepicker not showing - Bootstrap

So this is the markup of the datepicker:
<div class="form-group row">
<div class="col-xs-3 col-md-offset-9">
<label class="control-label">Pick Date</label>
<div class="input-group date" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy">
<input class="form-control" type="text" readonly="" value="12-02-2012">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
Actually, it looks like this:
However, when I click the calendar icon there's no table-look-a-like date picker showing.
I've included the following css and js:
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">
<script type="text/javascript"src="js/jquery-2.0.3.js"></script>
<script type="text/javascript"src="js/bootstrap.js"></script>
<script type="text/javascript"src="js/bootstrap-datepicker.js"></script>
I also have called the function at <head></head> and at the end of the <body></body> just to make sure. But, still no response when I click the button.
<script type="text/javascript">
$(document).ready(function() {
$("#dp3").datepicker({ autoclose: true, todayHighlight: true });
});
$(window).on('load',function(){
$("#dp3").datepicker({ autoclose: true, todayHighlight: true });
});
</script>
I have changed some of the CSS JS code because of the Bootstrap 3 updated code, source: http://kenyontechnology.com/2013/10/08/datepicker-for-bootstrap-with-twitter-bootstrap-3-0/
So, I want to have a table-look-a-like datepicker when I click the calendar button. Any help? Thanks.
I ran into a similar issue - in my case in the jQuery wiring $('#someid').datepicker() 'someid' was the id of the 'input' and where it should have been of the container div. which means - it worked when you click the input box but not the glyphicon button.
I have a working copy fiddle is here :
jsfiddle
The jsfiddle code is here : (Note: the reference to jQuery 2.0.2 and also the external reosurces tab in jsFiddle editor)
http://jsfiddle.net/Lro8kxjx/6/
<div class="col-xs-6 ">
<div class="form-group ">
<div class='input-group date' id='datepicker'>
<input type="text" id="processdate" class="form-control" placeholder="Processing Date..." name="processdate" /> <span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
$(document).ready(function () {
$('#datepicker').datepicker({
startDate: '-180d',
endDate: '+1d',
autoclose: true
}); });

Categories