I'm using a bootstrap date time picker to select a date with the time his format is like this mm/dd/yyyy hh:ii i want to change this format to dd/mm/yyyy hh:ii
I had used this method but i didn't have the format i want the same format still appear
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
format: "dd/mm/yyyy hh:ii"
});
});
</script>
Html Code:
<input type="text" value="" id="datetimepicker1" name="txt_padd"
placeholder="Actual Date" class="form-control input-md" onchange="call()"
onkeyup="saveValue(this);" >
How Can i Change the format of this datetimepicker ??!!
Check this out
DEMO
$('#datetimepicker2').datetimepicker({
format: 'DD/MM/YYYY HH:mm'
});
Try this one
//HTML Code with iconic view
<div class="form-group">
<label class="control-label col-md-4">Datetime Picker</label>
<div class="col-md-8">
<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>
//Javascript Code
<script type="text/javascript">
$(function() {
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY HH:mm'
});
});
</script>
This will looks like :
Related
In my form I have below code to display the date picker. I am using bootstrap
<div class="form-group row">
<label for="Quantity" class="col-sm-3 col-form-label">Required Date</label>
<div class="col-sm-9">
<div class="input-group">
<input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text"/>
<div class="input-group-addon">
<i class="fas fa-calendar-alt"></i>
</div>
</div>
</div>
</div>
The date format I get is MM/DD/YYYY. But the format I need is DD/MM/YYYY. How can I change this? If I can add attribute to the form field that is better instead of javascript of jquery.
You need to define the format once in jQuery.
// here assumed that `datepicker` is the class name for using date picker
$('.datepicker').datepicker({
format: 'DD/MM/YYYY'
});
// as per your code, you can update for specific id
$('#date').datepicker({
format: 'DD/MM/YYYY'
});
I'm using Bootstrap 3 Datepicker v4 Docs plugin:
https://eonasdan.github.io/bootstrap-datetimepicker/
I want the only date in view and the backend how can I achieve it.?
I'm not able to find proper documentation.
i want to hide these two marked timestamp details.
<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({
});
});
</script>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker9').datetimepicker({ format: 'DD/MM/YYYY' });
});
</script>
This might help you to get only date.
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.
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?
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>
The problem is that you initialize the time picker only after a click on it, so on the first click the datetimepicker is not already built. Move starttime initialization from starttime to document.ready.
I suggest to disable starttime datetimepicker when the user can not select hours. You can use disable() and enable() method of the datetimepicker.
Use date() method to get datetimepicker selected date and you can listen to dp.change event to known when the user selects a date.
Here a complete example:
$('#startdate').datetimepicker({
format: 'DD/MM/YYYY',
minDate: new Date()
}).on('dp.change', function(e){
if( e.date ){
// Enable timepicker only if date is selected
$('#starttime').data("DateTimePicker").enable();
} else {
$('#starttime').data("DateTimePicker").disable();
}
});
$('#starttime').datetimepicker({
format: 'HH:mm',
minDate: new Date(),
useCurrent: false
});
// Disable time picker
$('#starttime').data("DateTimePicker").disable();
$('.start_time_addon').on('click keyup',function(){
var x = $('#startdate').data("DateTimePicker").date();
if ( !x ) {
alert('please select startdate first');
return false;
}
});
<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.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="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.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' id="startdate">
<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>
I've added useCurrent: false option to timepicker to prevent getting current time.
I am new to bootstrap and trying to use linked datepicker where
Only Date should be displayed (not time).
Default Selected Date shown in Datepicker as well as in textbox should be today's date on page load (before selecting any date from datepicker default date appeared in text box should be today's date).
Future dates should be disabled in startdate and enddate.
I am using following code :
Html Code
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div>Start</div>
<div class='input-group date' id='startDate'>
<input type='text' class="form-control" name="startDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div>End</div>
<div class='input-group date' id='endDate'>
<input type='text' class="form-control" name="org_endDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Script
jQuery(function () {
jQuery('#startDate').datepicker({
//format: 'mm-dd-yyyy',
endDate: '+0d',
autoclose: true
});
jQuery('#endDate').datepicker({
//format: 'mm-dd-yyyy',
endDate: '+0d',
autoclose: true,
useCurrent: false
});
jQuery('#startDate').datetimepicker().datepicker("setDate",new Date());
jQuery('#endDate').datetimepicker().datepicker("setDate",new Date());
jQuery("#startDate").on("dp.change",function (e) {
jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
});
jQuery("#endDate").on("dp.change",function (e) {
jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
});
});
Using jQuery('#startDate').datepicker().datepicker("setDate",new Date());
I can achieve point no. 2.
However, issue is future date disabled works for datepicker and startdate enddate selection works with datetimepicker. (Using datepicker and datetimepicker shows two datepikcer controls one on textbox other on addon)
How to combine this to achieve all the three point using only datepicker
I think that you are mixing two different libraries eonasdan datetimepicker and bootstrap datepicker.
If you want to use the first library, then you have to:
specify format option according momentjs docs
use minDate and maxDate properties and methods
listen for dp.change event
use useCurrent option
Here a working example:
jQuery('#startDate').datetimepicker({
format: 'MM-DD-YYYY',
maxDate: moment().endOf('day'),
defaultDate: moment()
}).on("dp.change",function (e) {
jQuery('#endDate').data("DateTimePicker").minDate(e.date);
});
jQuery('#endDate').datetimepicker({
format: 'MM-DD-YYYY',
maxDate: moment().endOf('day'),
defaultDate: moment()
}).on("dp.change",function (e) {
jQuery('#startDate').data("DateTimePicker").maxDate(e.date);
});
<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.0/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="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div>Start</div>
<div class='input-group date' id='startDate'>
<input type='text' class="form-control" name="startDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div>End</div>
<div class='input-group date' id='endDate'>
<input type='text' class="form-control" name="org_endDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
If you want to use the bootstrap datepicker, then you have to:
specify format option lowercase
use endDate option and setStartDate and setEndDate functions
listen for changeDate event
use update method to set default date
Here a working example:
jQuery('#startDate').datepicker({
format: 'mm-dd-yyyy',
endDate: '0d',
autoclose: true
}).on("changeDate",function (e) {
jQuery('#endDate').datepicker("setStartDate", e.date);
});
var d = new Date();
var now = new Date(d.getFullYear(), d.getMonth(), d.getDate());
$('#startDate').datepicker('update', now);
jQuery('#endDate').datepicker({
format: 'mm-dd-yyyy',
endDate: '0d',
autoclose: true
}).on("changeDate",function (e) {
jQuery('#startDate').datepicker("setEndDate", e.date);
});
$('#endDate').datepicker('update', now);
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div>Start</div>
<div class='input-group date' id='startDate'>
<input type='text' class="form-control" name="startDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div>End</div>
<div class='input-group date' id='endDate'>
<input type='text' class="form-control" name="org_endDate" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Note that, according the docs, update accepts a Date object but $('#startDate').datepicker('update', new Date()); did not work for me (and I don't know why), while the following lines set a default date correctly:
var d = new Date();
var now = new Date(d.getFullYear(), d.getMonth(), d.getDate());
$('#startDate').datepicker('update', now);
i am Using Eonasdan Link DateTime Picker and did not any idea how to restrict user to select date between one month ..(One month from selected date of first DateTimePicker i.e StartDate).
HTML
<div class="col-md-9">
<div class='input-group date' id="FuelLogStartDate">
<input type='text' class="form-control" name="FuelLogStartDate" value="#Model.StartDate.ToString("dd/MM/yyyy HH:mm")" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-md-9">
<div class='input-group date' id="FuelLogEndDate">
<input type='text' class="form-control" name="FuelLogEndDate" value="#Model.EndDate.ToString("dd/MM/yyyy HH:mm")" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
JavaScript
<script type="text/javascript">
$(function () {
$('#FuelLogStartDate').datetimepicker({
format: 'DD/MM/YYYY HH:mm'
});
$('#FuelLogEndDate').datetimepicker({
format: 'DD/MM/YYYY HH:mm',
useCurrent: false
});
$("#FuelLogStartDate").on("dp.change", function (e) {
$('#FuelLogEndDate').data("DateTimePicker").minDate(e.date);
});
$("#FuelLogEndDate").on("dp.change", function (e) {
$('#FuelLogStartDate').data("DateTimePicker").maxDate(e.date);
});
});
</script>
Add the below lines to set the min date & max dates(while initializing the picker in JS) for the datetime picker.
minDate: moment("2016-01-01T01:00:01-04:00"),
maxDate: moment("2016-01-31T01:00:01-04:00")