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>
Related
i tried to apply validation system uses jQuery i include bootstrap CDN and jQuery and jQuery validation. while input name works fine and input title doesn't work.
hi, i tried to apply validation system uses jQuery i include bootstrap CDN and jQuery and jQuery validation. while input name works fine and input title doesn't work.
hi, i tried to apply validation system uses jQuery i include bootstrap CDN and jQuery and jQuery validation. while input name works fine and input title doesn't work.
$(document).ready(function () {
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$("#myform").validate({
rules: {
title: {
required: true,
minlength:2,
maxlength:5,
},
name: {
required: true,
minlength:2,
maxlength:5,
},
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rules</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.19.2/dist/jquery.validate.js"></script>
<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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<div class="container">
<form id="myform">
<div class="form-group">
<label>Categories <span class="text-hightlight">*</span></label>
<select class="form-control" name="category_id" id="category_id">
<option>select</option>
<option value="1">title</option>
<option value="2">name</option>
</select>
</div>
<div class="form-group">
<label>title <span class="text-hightlight">*</span></label>
<input type="text" name="titre" id="title" class="form-control"/>
</div>
<div class="form-group">
<label>name <span class="text-hightlight">*</span></label>
<input type="text" name="name" id="name" class="form-control"/>
</div>
<button class="btn btn-theme" type="submit" >cherche</button>
</form>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
You have a typo here: <input type="text" name="titre" id="title" class="form-control"/>
titre should be title
I'm using SB Admin template for my application. I want to add bootstrap date picker to my input. But somehow I'm missing the order of JS & CSS libraries loading order which I think is not working in my case as going through multiple articles.
Below is code in <html> section
$('#datetimepicker').datepicker();
<head>
<link href="{{URL::asset('css/sb-admin-2.min.css')}}" rel="stylesheet">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<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/moment.js/2.4.0/lang/en-gb.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="col-md-4">
<label class="control-label" for="birthday">Birthday:</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" placeholder="dd/mm/yyyy" value="" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</body>
Thanks in Advance.
it's a conflict with moment.js as i know.look if moment have his own datepicker library.
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/
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>
Sorry if its repeated but i cannot found solution. So ask on stackoverflow.
You can check my problem in image and also see that all required files are included. Just check it and help to fix it.
Thanks in advance.
Below is my code:
<div class="form-group">
<label class="control-label col-sm-3" >Set Date : </label>
<div class="col-sm-8">
<input type="text" id="datetimepicker" class="form-control datetimepicker" name="date_add_custom" placeholder="Set Date" value="" autocomplete="off"/>
</div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link rel="stylesheet" href="css/bootstrap-datetimepicker.css"/>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/moment.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="js/bootstrapValidator.js"></script>
<script type="text/javascript">
$('.datetimepicker').datetimepicker({
// format:'YYYY-MM-DD HH:mm',
format:'MM/DD/YYYY HH:mm', //HH = 24 hours
pickTime: true,
});
</script>