I want to make my DateTimePicker format to be yyyy-mm-dd because it is the format that I've inserted in my database.
Here is the markup:
<div class="col-sm-6">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
And here is the code I wrote to change the format, but it doesn't work:
$(document).ready(function() {
$(function () {
$('.datepicker').datetimepicker({
format: 'YYYY-MM-DD'
});
});
});
$('.datetimepicker').datetimepicker({
timepicker: false,
format: 'Y-m-d',
closeOnDateSelect: true,
scrollInput: false
});
The problem is your jQuery selector, you should use $('[data-provide="datepicker"]') instead of $('.datepicker') or add a datepicker class to your input.
Here a working example:
$('[data-provide="datepicker"]').datetimepicker({
format: 'YYYY-MM-DD'
});
<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="col-sm-6">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
In your jQuery code, it uses a datepicker class but you are not using it correctly. You should use it like below
<div class="col-sm-6">
<div class="input-group date datepicker">
<input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
Anyway, you do not have to use the same format in your database as you can update the date on your backend code with the proper database format later.
Related
I have the code that is getting the value in the form of get variable. The problem is that I want now to place the variable into a div (for datetimepicker). When I put it like that the variable is not passed. Any help will be appreciated. My current code below:
Working variable:
Start Date: <input type="text" class="date-time-input" name="sdate" id="sdatefield"/><br/>
Not working variable inside div:
Start Date: <div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' name="sdate" id='sdatefield'>
<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 () {
$('#sdatefield').datetimepicker({
sideBySide: true,
format: 'DD-MM-YYYY HH:mm:ss',
});
});
</script>
</div>
</div>
observed that you added id="sdatefield" to the <div id="sdatefield"> rather then <input id="sdatefield"> which is causing this issue, Because you binding datetimepicker to this input field.
Try like the below
$(function () {
$('#sdatefield').datetimepicker({
sideBySide: true,
format: 'DD-MM-YYYY HH:mm:ss',
});
});
<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.js"> </script>
Start Date: <div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' name="sdate" >
<input type='text' class="form-control" id="sdatefield"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</div>
</div>
Thanks
I am working on the website in which I want to popup the calendar on hitting calendar icon.
The HTML code which I have used in order to place Start Date and End Date are:
<div class="dates">
<div class="start_date">
<input class="form-control start_date mb-4" type="text" placeholder="start date">
<span class="fa fa-calendar start_date_calendar" aria-hidden="true "></span>
</div>
<div class="end_date">
<input class="form-control end_date mb-4" type="text" placeholder="end date">
<span class="fa fa-calendar end_date_calendar" aria-hidden="true "></span>
</div>
</div>
Problem Statement:
I am wondering what js/jquery code what I have to use in order to make the calendar popup on hitting calendar icon at the left and the right (marked by an arrow in the screenshot below).
I tried placing the following code but somehow I am not able to popup the calendar on hitting calendar icon.
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
As you are using Bootstrap, I recommend using Bootstrap Datepicker.
In your site, give an id to the date input fields and initialize as below.
$(document).ready(function(){
$("#startdate").datepicker();
$("#enddate").datepicker();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css"/>
<input id="startdate">
<input id="enddate">
You can try Bootstrap Datepicker
https://jsfiddle.net/codeandcloud/acq7t97c/
or JQuery Datepicker
http://jsfiddle.net/klenwell/LcqM7/
It looks like you are using jQuery's datepicker?
You are trying to execute this line
$( "#datepicker" ).datepicker();
but you don't have any element with an id datepicker.
Try adding the id datepicker to your input if you want the entire input to change into datepicker on click. Added id datepicker to your input with the class start_date.
<div class="dates">
<div class="start_date">
<input class="form-control start_date mb-4" type="text" placeholder="start date" id="datepicker">
<span class="fa fa-calendar start_date_calendar" aria-hidden="true ">
</span>
</div>
<div class="end_date">
<input class="form-control end_date mb-4" type="text" placeholder="end date">
<span class="fa fa-calendar end_date_calendar" aria-hidden="true "></span>
</div>
</div>
Just an Id to the Calendar icon and click action to the corresponding icon using javascript
$(document).ready(function() {
$('#calendar1').click(function(event) {
$('.start_date').datepicker('show');
});
$('#calendar2').click(function(event) {
$('.end_date').datepicker('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="input-group">
<div class="input-group-addon" id="calendar1">
<i class="fa fa-calendar"></i>
</div>
<input type="text" name="start_date" id="start_date" class="form-control start_date" data-inputmask="'alias':'mm/dd/yyyy'" data-mask="" value="">
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<div class="input-group-addon" id="calendar2">
<i class="fa fa-calendar"></i>
</div>
<input type="text" name="end_date" id="end_date" class="form-control end_date" data-inputmask="'alias': 'mm/dd/yyyy'" data-mask="" value="">
</div>
</div>
</div>
</div>
I have a situation with datetimepicker. It doesn't show any timer when I click the first icon. The second works. The chrome browser not showing any errors in the development console. Any suggestions ?
<div class="input-append form-group datetimepicker">
<div class="input-group date">
<input type='text' data-format="hh:mm:ss" class="form-control" name="evstime" placeholder="Adauga ora" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<div class="input-append form-group datetimepicker">
<div class="input-group date">
<input type="text" data-format="hh:mm:ss" class="form-control" name="evstime" placeholder="Adauga ora"/>
<span class="add-on">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</span>
</div>
</div>
jQuery:
$(function() {
$('.datetimepicker').datetimepicker({
pickDate: false
});
});
<script src='js/moment.min.js'></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script src='js/fullcalendar.min.js'></script>
<script src='js/calendar.js'></script>
<script src="js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css">
You can add these as CDNs.
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
And use only datepicker:
<script>
$(function() {
$('.form-control').datepicker({
pickDate: false
});
});
</script>
In general, check you library dependencies. Here is more information about it: https://jqueryui.com/datepicker/
The problem is that you were trying to initialise the datetimepicker on the <div> instead of the <input> itself. Try changing your HTML to:
<div class="input-append form-group">
<div class="input-group date">
<input type='text' data-format="hh:mm:ss" class="form-control datetimepicker" name="evstime" placeholder="Adauga ora" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<div class="input-append form-group datetimepicker">
<div class="input-group date">
<input type="text" data-format="hh:mm:ss" class="form-control datetimepicker" name="evstime" placeholder="Adauga ora"/>
<span class="add-on">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</span>
</div>
</div>
Note the datetimepicker included on the class attribute of each input..
And in order to initialise all datetimepicker controls at once, use:
$('.datetimepicker').each(function(){
$(this).datetimepicker({
pickDate: false
});
});
EDIT
pickDate: false will disable your datetimepicker, remove this attribute and everything should work as expected.
I have two input boxes one is for selecting date and another for time, I am trying to validate these two boxes based on some conditions, such that if the date is not selected, the time should not get selected and i'm using eonasdan datetimepicker, i'm getting the desired output but not with the single click on a timepicker can some one help me out with this Thank you
Here's what i have done so far :
function starttime(){
$('#starttime').datetimepicker({
format: 'HH:mm',
minDate: new Date()
});
}
$('.start_time_addon').on('click keyup',function(){
var x = $('#start').val();
if (x == '') {
alert('please select startdate first');
return false;
}
else{
starttime();
}
});
var datePickerSix= $('.datetimepicker6');
$(datePickerSix).datetimepicker({
format: 'DD/MM/YYYY',
minDate: new Date()
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label>Start Date</label><br>
<div class='input-group date datetimepicker6'>
<input type='text' class="form-control" id="start" name="date_end"
placeholder="DD/MM/YYYY"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="start_time" class="col-form-label">Start Time</label>
<div class='input-group date start_time_addon' id='starttime'>
<input type='text' class="form-control" placeholder="HH : MM" id="Start_Time" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
$('.datetimepicker6').datetimepicker({
format: 'DD/MM/YYYY',
minDate: new Date()
});
$('.datetimepicker6').on("dp.change", function(e) {
$('#starttime').datetimepicker({
format: 'HH:mm',
minDate: new Date()
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label>Start Date</label><br>
<div class='input-group date datetimepicker6'>
<input type='text' class="form-control input_date" id="start" name="date_end"
placeholder="DD/MM/YYYY"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="start_time" class="col-form-label">Start Time</label>
<div class='input-group date start_time_addon' id='starttime'>
<input type='text' class="form-control" placeholder="HH : MM" id="Start_Time" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
I am a newbie in here.
$("#tanggal_arsip").datetimepicker({
var day = daysofweek.value,
format:"yyyy-mm-dd"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" class="form-control" name="tanggal_arsip" id="tanggal_arsip" data-format="YYYY-MM-DD" placeholder="Tanggal Berita" required />
I have a question about datetimpicker.
How to get name of days in bootstrap datetimepicker?
For example i want to get Sunday or other day or just a number for day.
I can't find this problem in bootstrap datetimepicker documentation.
First: your input tag is wrong. You can see how to use it in the snippet.
You can use the following event:
dp.change: Fired when the date is changed.
parameters:
e = {
date, //date the picker changed to. Type: moment object (clone)
oldDate //previous date. Type: moment object (clone) or false in the event of a null
}
Using the date parameter contained in the event object and the moment methods format you can write (in the snippet you can see a different approach: select a day and show only the day of week):
$('#tanggal_arsip').datetimepicker({
format: 'YYYY-MM-DD'
}).on('dp.change', function(e) {
//
// on date change get current date and format as weekday
//
$('#weekDay').val(e.date.format('dddd'));
});
//
// select by day and show only day of week
//
$('#tanggal_arsip1').datetimepicker({
format: 'dddd',
viewMode: 'days'
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="row">
<label class="col-md-6 col-xs-6 control-label">Date:</label>
<div class="col-md-6 col-xs-6">
<div class="input-group date" id="tanggal_arsip">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="row">
<label class="col-md-6 col-xs-6 control-label">Day of Week:</label>
<div class="col-md-6 col-xs-6">
<input id="weekDay" type="text" class="form-control" disabled>
</div>
</div>
<div class="row">
<label class="col-md-6 col-xs-6 control-label">Select by day and Show Only Day Of Week:</label>
<div class="col-md-6 col-xs-6">
<div class="input-group date" id="tanggal_arsip1">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
You could just parse the result of $("datetime selector").val() to get the day and convert that to a word name if you need it.