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);
Related
I have a small problem i am using Boostrap DatePicker, the problem is the format of the date on input-daterange. eg. 01/08/2020. It should read the following format and to be understood by the user well. e.g 09/01/2020. Below is my logic for using Bootstrap DatePicker, i am open to better approach to use date from start to end date.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.min.css">
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
<!---DatePicker for startDate and endDate.
---->
<div class="d-flex justify-content-start">
<div class = "col-xl-10.5 col-lg-10.5 col-md-10 col-sm-10.5 col-10.5">
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="from" placeholder="startdate"/>
<span class="input-group-addon">To</span>
<input type="text" class= "input-sm form-control" placeholder="enddate"/>
</div>
</div>
</div><br>
// date functionality
$(document).ready(function() {
var year = (new Date).getFullYear();
$('.input-daterange').datepicker({
dateFormat: "dd-mm-yy",
autoclose:true,
minDate: new Date(year, 0, 1),
maxDate:new Date(year, 11, 31)
});
});
You can achieve this by using format option instead of dateFormat
$(document).ready(function() {
var year = (new Date).getFullYear();
$('.input-daterange').datepicker({
format: "dd-mm-yy",
autoclose:true,
minDate: new Date(year, 0, 1),
maxDate:new Date(year, 11, 31)
});
});
$(document).ready(function() {
var year = (new Date).getFullYear();
$('.input-daterange').datepicker({
format: "dd-mm-yyyy",
autoclose:true,
minDate: new Date(year, 0, 1),
maxDate:new Date(year, 11, 31)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.min.css">
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
<!---DatePicker for startDate and endDate.
---->
<div class="d-flex justify-content-start">
<div class = "col-xl-10.5 col-lg-10.5 col-md-10 col-sm-10.5 col-10.5">
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="from" placeholder="startdate"/>
<span class="input-group-addon">To</span>
<input type="text" class= "input-sm form-control" placeholder="enddate"/>
</div>
</div>
</div><br>
Hope this Helps!
Here is an example. for your further reference visit bootstrap-datetimepicker
<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>
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 using the Bootstrap datatimepicker (https://eonasdan.github.io/bootstrap-datetimepicker/). It's great but it does not show or let the user select seconds.
$(document).ready(function () {
$('#datetimepicker1').datetimepicker({defaultDate: new Date()});
});
<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>
So how to select seconds as well? And how to get seconds to show in the format? Currently it's 05/18/2017 1:26 PM, I want 05/18/2017 1:26:40 PM
In the dev guide, there is a fillSeconds() function but I am not sure how to apply it here.
Setting the format to the correct value from moment and sideBySide:
$('#datetimepicker1').datetimepicker({
defaultDate: new Date(),
format: 'DD/MM/YYYY hh:mm:ss A',
sideBySide: true
});
<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.17.1/moment.min.js"></script>
<link rel="stylesheet"
href="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css">
<script src="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js"></script>
<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>
</div>
</div>
$(document).ready(function () {
$('#datetimepicker1').datetimepicker({
defaultDate: new Date()});
}).fillseconds();
Try this way.
The select date seem to be empty when I added startDate: '+1d' into the javascript. Otherwise, it is just displaying today's date. I need it to display one day ahead and in some situations, two days ahead as well.
Javascript below:
$("#datepicker").datepicker({
autoclose: true,
todayHighlight: false,
startDate:'+1d',
dateFormat: 'dd-mm-yy'
}).datepicker('update', new Date());
HTML Code below:
<div class="form-group">
<div class="col-sm-2"></div>
<label for="inputName" class="col-sm-3 control-label">Select Date Range</label>
<div class="col-sm-4">
<div class='col-sm-6'>
<div class="form-group">
<div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy">
<input class="form-control" type="text" readonly id="start"/>
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<div id="datepicker2" class="input-group date" data-date-format="dd-mm-yyyy">
<input class="form-control" type="text" readonly id="end"/>
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
</div>
</div>
you can use moment.js for this type of date/time manipulation
var tomorrow = moment().add(1, 'day').format('DD/M/YYYY');
outputs
03/11/2016
see jsbin:
here is the full working jsfiddle: https://jsbin.com/haxamaxaqe/edit?html,output
$('#txtDate').datepicker('setDate', "+1d");
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")