I have a form with 2 datetimepciker: one is for start date, the other is for end date.
The validation is that when the start date is selected, the end date must greater or equal the start date.
I search on the Internet but my code doesn't work.
Here is my js function:
function formatFields() {
$('#report_startDate').datepicker({
format: 'mm/dd/yyyy',
todayHighlight: true,
autoclose: true,
startDate: "01/01/1900",
endDate: "01/01/2100"
});
$('#report_endDate').datepicker({
format: 'mm/dd/yyyy',
todayHighlight: true,
autoclose: true,
startDate: "01/01/1900",
endDate: "01/01/2100"
});
$("#report_endDate").datepicker().on("dp.change", function (e) {
$('#report_startDate').data("DateTimePicker").minDate(e.date);
});
}
Here is my html of 2 date time picker:
<table style="width: 100%">
<tr>
<td>
<div class="form-group">
<label class="control-label col-sm-3" id="lb_report_startDate"></label>
<div class="col-sm-8 date">
<div class="input-group input-append date" id="report_startDate">
<input runat="server" type="text" class="form-control" name="report_startDate_datePicker" id="report_startDate_datePicker" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<span id="report_startDate_error" class="error-message">Wrong format MM/dd/yyyy.</span>
</div>
</div>
</td>
<td>
<div class="form-group">
<label class="control-label col-sm-3" id="lb_report_endDate"></label>
<div class="col-sm-8 date">
<div class="input-group input-append date" id="report_endDate">
<input runat="server" type="text" class="form-control" name="report_endDate_datePicker" id="report_endDate_datePicker" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<span id="report_endDate_error" class="error-message">Wrong format MM/dd/yyyy.</span>
</div>
</div>
</td>
</tr>
</table>
Anyone here can explain what's wrong with my code and how to solve the problem? Many thanks.
function formatFields() {
$('#report_startDate').datepicker({
format: 'mm/dd/yyyy',
todayHighlight: true,
autoclose: true,
startDate: "01/01/1900",
endDate: "01/01/2100"
});
$('#report_endDate').datepicker({
format: 'mm/dd/yyyy',
todayHighlight: true,
autoclose: true,
startDate: "01/01/1900",
endDate: "01/01/2100"
});
$("#report_endDate").datepicker().on("dp.change", function (e) {
$('#report_startDate').data("DateTimePicker").minDate(e.date);
});
}
<table style="width: 100%">
<tr>
<td>
<div class="form-group">
<label class="control-label col-sm-3" id="lb_report_startDate"></label>
<div class="col-sm-8 date">
<div class="input-group input-append date" id="report_startDate">
<input runat="server" type="text" class="form-control" name="report_startDate_datePicker" id="report_startDate_datePicker" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<span id="report_startDate_error" class="error-message">Wrong format MM/dd/yyyy.</span>
</div>
</div>
</td>
<td>
<div class="form-group">
<label class="control-label col-sm-3" id="lb_report_endDate"></label>
<div class="col-sm-8 date">
<div class="input-group input-append date" id="report_endDate">
<input runat="server" type="text" class="form-control" name="report_endDate_datePicker" id="report_endDate_datePicker" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<span id="report_endDate_error" class="error-message">Wrong format MM/dd/yyyy.</span>
</div>
</div>
</td>
</tr>
</table>
Try changing the below code in your js
$('#report_startDate').data("DateTimePicker").minDate(e.date);
to
$('#report_startDate').datepicker("option", "minDate", e.date);
I finally found the answer.
My function called wrong event of datetimepicker when it changed.
My function changed to:
function formatFields() {
$('#report_startDate').datepicker({
format: 'mm/dd/yyyy',
todayHighlight: true,
autoclose: true,
startDate: "01/01/1900",
endDate: "01/01/2100"
}).on("changeDate", function (e) {
$('#report_endDate').datepicker('setStartDate', e.date);
});
;
$('#report_endDate').datepicker({
format: 'mm/dd/yyyy',
todayHighlight: true,
autoclose: true,
startDate: "01/01/1900",
endDate: "01/01/2100"
});
}
And it works.
Reference: Bootstrap datepicker change minDate/startDate from another datepicker
Related
I have a bootstrap datetimepicker it is working fune but when i trying to show the value from my database it is not working win minDate in javascript.
test date from my DB is $a = '2020-04-13';
<div class="form-group">
<label for="effective_date" class="col-sm-4 control-label">Effective Date</label>
<div class="input-group date col-sm-8" style=" width: 338px !important; padding-left: 15px !important;">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-left" name="dd_effective_date" id="datetimepicker5" value="<?php echo $a;?>" placeholder="" >
</div>
</div>
Script:
<script type="text/javascript">
$("#datetimepicker5").datetimepicker({
useCurrent: false, format: 'YYYY-MM-DD', minDate:new Date()
});
Try this
<script type="text/javascript">
var mindata = new Date('<?=$a?>');
$("#datetimepicker5").datetimepicker({
useCurrent: false, format: 'YYYY-MM-DD', minDate:mindata
});
I don't know how to call my jQuery function from my HTML file.
This function was in the HTML file at the beginning. I moved it in to a JS file and would like to call it from this as the code looks cleaner when I have different files for the different languages.
$(function() {
$('#datepicker').datepicker({
format: "dd/mm/yyyy",
autoclose: true,
todayHighlight: true,
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
orientation: "button"
});
});
$(function() {
$('#datepicker2').datepicker({
format: "dd/mm/yyyy",
autoclose: true,
todayHighlight: true,
showOtherMonths: true,
selectOtherMonths: true,
autoclose: true,
changeMonth: true,
changeYear: true,
orientation: "button"
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="calendar.js"></script>
<div onclick="datumEins()" class="container">
<div class="row">
<h2>Startdatum</h2>
</div>
<div class="row">
<div class='col-sm-6'>
<form>
<div class="form-group">
<div class='input-group date' id='datepicker'>
> i think the calling must be putted in the input tag
<input type='text' id="datum1" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
<!--ENDDATUM-->
<div onclick="datumZwei" class="container">
<div class="row">
<h2>Enddatum</h2>
</div>
<div class="row">
<div class='col-sm-6'>
<form>
<div class="form-group">
<div class='input-group date' id='datepicker2'>
> i think the calling must be putted in the input tag
<input type='text' id="datum2" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
I have a form which contains Departure date and return date. And I want to set the minimum date in the return date field is the date of selected departure date. I already put the id in div tag or input tag, but nothing worked. Do you know why?
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Departure<span class="required"> *</span></label>
<div class="input-group date form_datetime col-md-4 col-sm-4 col-xs-12" id="res_departure1" data-link-field="dtp_input1">
<input class="form-control pull-right" size="16" type="text" value="" readonly required>
<input type="hidden" id="dtp_input1" name="res_departure" value="" />
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Return<span class="required"> *</span></label>
<div class="input-group date form_datetime col-md-4 col-sm-4 col-xs-12" id="res_return1" data-link-field="dtp_input2">
<input class="form-control pull-right" size="16" type="text" value="" readonly required>
<input type="hidden" id="dtp_input2" name="res_return" value="" />
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
</div>
This is my js
$('.form_datetime').datetimepicker({
//language: 'fr',
format: "yyyy-mm-dd hh:ii",
autoclose: true,
todayBtn: true,
startDate: new Date
});
$("#res_departure1").on("dp.change", function (e) {
$('#res_return1').data("DateTimePicker").setMinDate(e.date);
});
$('#res_departure1').datetimepicker().on('changeDate', function(ev) {
var departureDate = ev.date;
$('#res_return1').datetimepicker('setStartDate', departureDate);
});
$('#res_return1').datetimepicker().on('changeDate', function(ev) {
var returnDate = ev.date;
$('#res_departure1').datetimepicker('setEndDate', returnDate);
});
Because when you are talking about date only, then better to use datepicker on jQuery ui library, and then you can use the onSelect event of the departure date and then set the min date of return field.
onSelect: function(selectedDate)
{
$('#return').datepicker('option', 'minDate', selectedDate);
}
you can check the working fiddle here.
Try this instead of your code
$('.form_datetime').datetimepicker({
//language: 'fr',
format: "yyyy-mm-dd hh:ii",
autoclose: true,
todayBtn: true,
startDate: new Date()
});
$("#res_departure1").on("dp.change", function (e) {
$('#res_return1').data('DateTimePicker').minDate(new Date(e.timeStamp));
});
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);
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");