I am trying to use bootstrap-datetimepicker.min.js and I have successfully integrated it in my project. Yet, when I tryg to show today's date as a default value in the from input field, it is not working.
Javascript:
var d = new Date();
var currDate = d.getDate();
var currMonth = d.getMonth();
var currYear = d.getFullYear();
var dateStr = currDate + "-" + currMonth + "-" + currYear;
$('#from').datetimepicker({
pickTime: false,
defaultDate: dateStr
});
HTML:
<input type="text" placeholder="From" name="from" id="from" style="width: 90%"/>
<input type="text" placeholder="To" name="to" id="to" style="width: 90%"/>
AND with this I would also like to validate the date in from filed so that it should not be less than today's date and to date not less than tomorrow's date and not greater than 3 month date.
I have searched for an answer on google and Stackoverflow already. Please help me.
try this code working fiddle http://jsfiddle.net/KWvNe/
HTML
<div class="well">
<div id="from-datepicker" class="input-append date">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<div class="well">
<div id="to-datepicker" class="input-append date">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
JS
$(function() {
var d = new Date();
var today = d;
var dateThreeMonthLater = d.setMonth(d.getMonth() + 3);
$('#from-datepicker').datetimepicker({
language: 'pt-BR',
startDate: today,
endDate: dateThreeMonthLater
});
$('#to-datepicker').datetimepicker({
language: 'pt-BR'
});
});
Check working fiddle here http://jsfiddle.net/KWvNe/
do not forgot to include essential javascript and css check here http://tarruda.github.io/bootstrap-datetimepicker/
You can set following options for a datepicker
maskInput: true, // disables the text input mask
pickDate: true, // disables the date picker
pickTime: true, // disables de time picker
pick12HourFormat: false, // enables the 12-hour format time picker
pickSeconds: true, // disables seconds in the time picker
startDate: -Infinity, // set a minimum date
endDate: Infinity // set a maximum date
use this jquery function
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$("#from").datepicker( "option", "dateFormat", "yy-mm-dd");
$("#to").datepicker( "option", "minDate", selectedDate );
}
});
$( "#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$("#to").datepicker( "option", "dateFormat", "yy-mm-dd");
$("#from").datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
HTML:
<input type="text" placeholder="From" name="from" id="from" style="width: 90%"/>
<input type="text" placeholder="To" name="to" id="to" style="width: 90%"/>
I got ur problem...This is a simple date validation
<input type="text" id="txtdate" />
<input value="SUBMIT" id="btnsubmit" onclick="checkDate();"/>
<script>
function checkDate() {
var EnteredDate = document.getElementById("txtdate").value; //for javascript
var EnteredDate = $("#txtdate").val(); // For JQuery
var date = EnteredDate.substring(0, 2);
var month = EnteredDate.substring(3, 5);
var year = EnteredDate.substring(6, 10);
var myDate = new Date(year, month - 1, date);
var today = new Date();
if (myDate > today) {
alert("Entered date is greater than today's date ");
}
else {
alert("Entered date is less than today's date ");
}
}
</script>
include this script
// jQuery Date Picker
jQuery(".datepicker").datepicker({
showOtherMonths: true,
selectOtherMonths: false,
isRTL:false,
changeMonth: true,
changeYear: true,
showButtonPanel: true,
});
jQuery('.datepicker').css('cursor', 'pointer');
jQuery('.datepicker').attr("readonly", "readonly");
jQuery('.datepicker').addClass('tooltip-info');
jQuery('.datepicker').attr('data-rel', 'tooltip');
jQuery('.datepicker').attr('data-placement', 'right');
jQuery('.datepicker').attr('data-original-title', 'Select a Date');
jQuery(".datepicker").datepicker("option", "dateFormat", "yy-mm-dd");
jQuery(".datepicker").datepicker("option", "showAnim", "slideDown");
jQuery(".datepicker").each(function(){
jQuery(this).datepicker( "setDate", jQuery(this).attr('date-value'));
});
Use id="datepicker"
Related
I am working on date input fields which have jQuery UI datepicker in them. They are departure date and return date. After the user selects the departure date and return date, I need to find the difference between the date he/she departed and the date he/she returned and populate in another input field instantly.
Markup Code
<!--Departure date-->
<input type="text" id="departureDate" class="form-control" placeholder="Departure Date" value="" required>
<!--Return Date-->
<input type="text" id="returnDate" class="form-control" placeholder="Return Date" value="" required>
<!--Output-->
<p>Your trip is<br/> <div>41 days</div></p>
JavaScript Logic
<script>
$(function() {
$("#departureDate").datepicker({
changeMonth: true,
changeYear: true,
minDate: '+1',
dateFormat: 'dd-mm-yy',
onSelect: function(selected) {
$("#returnDate").datepicker("option","minDate", selected);
//Remove required attribute
$(this).removeAttr('required');
}
});
$("#returnDate").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-mm-yy',
onSelect: function(selected) {
$("#departureDate").datepicker("option","maxDate", selected);
//Remove required attribute
$(this).removeAttr('required');
}
});
});
</script>
Logic to check difference
$(function() {
let $fromDate = $('#departureDate'),
$toDate = $('#returnDate');
$fromDate.datepicker().on('change', function(){
$toDate.datepicker('option', 'minDate', $(this).val());
});
$toDate.datepicker().on('change', function(){
$fromDate.datepicker('option', 'maxDate', $(this).val());
});;
});
Try this
$(function() {
$("#departureDate").datepicker({
changeMonth: true,
changeYear: true,
minDate: '+1',
dateFormat: 'dd-mm-yy',
onSelect: function(selected) {
$("#returnDate").datepicker("option", "minDate", selected);
//Remove required attribute
$(this).removeAttr('required');
calcDays();
}
});
$("#returnDate").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-mm-yy',
onSelect: function(selected) {
$("#departureDate").datepicker("option", "maxDate", selected);
//Remove required attribute
$(this).removeAttr('required');
calcDays();
}
});
});
function calcDays() {
let from = $('#departureDate').datepicker('getDate');
let to = $('#returnDate').datepicker('getDate');
if (!from || !to)
return;
let diffTime = Math.abs(to - from);
let diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
$('p').show();
$('p span').text(diffDays);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel='stylesheet' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css' />
<!--Departure date-->
<input type="text" id="departureDate" class="form-control" placeholder="Departure Date" value="" required>
<!--Return Date-->
<input type="text" id="returnDate" class="form-control" placeholder="Return Date" value="" required>
<!--Output-->
<p hidden>Your trip is
<span></span> days
</p>
I have date field which select "Start date" and "End Date", What I wanted to do is to disable the previous date and show from today's date in "Start Date" field, and in "End Date" field, I want to show +3 days, not more than that. I have written my code but it is only working if I select today's date, if I select like 25th September, then it disables all the dates in "End Date". Here goes my code:
<div class="row-form clearfix">
<div class="span5">Free Trail Date:</div>
<div class="span7">
<input value="" placeholder="From" style="width: 96px;" type="text" name="ftdt" id="dob" required/>
<input value="" placeholder="To" style="width: 96px;" type="text" name="ft_snd" id="dob2" required/>
</div>
</div>
JavaScript code:
<script>
$(function() {
$('#dob').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '2012:2020',
minDate: new Date(),
onSelect: function(date){
var selectedDate = new Date(date);
var msecsInADay = 86400000;
var endDate = new Date(selectedDate.getTime() + msecsInADay);
$("#dob2").datepicker( "option", "minDate", endDate );
$("#dob2").datepicker( "option", "maxDate", '+2d' );
}
});
});
$(function() {
$('#dob2').datepicker({changeMonth: true, changeYear: true,
yearRange: '2012:2020'});
});
</script>
Please help me where I am getting wrong, my code is working if I select today's date, but when I select advanced days, it disables the "End Date" field.
I solved my question by adding a little change:
<script>
$(function() {
$('#dob').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '2012:2020',
minDate: new Date(),
maxDate: '+2y',
onSelect: function(date){
var selectedDate = new Date(date);
var msecsInADay = 86400000;
var endDate = new Date(selectedDate.getTime() + msecsInADay);
var lastDate = new Date(selectedDate.getTime() + 2 * msecsInADay);
$("#dob2").datepicker( "option", "minDate", endDate );
$("#dob2").datepicker( "option", "maxDate", lastDate );
}
});
});
</script>
$(function() {
$('#dob').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '2012:2020',
minDate: new Date(),
onSelect: function(date){
var selectedDate = new Date(date);
$("#dob2").datepicker( "option", "minDate", new Date(selectedDate.getTime() + 86400000) );
$("#dob2").datepicker( "option", "maxDate", new Date(selectedDate.getTime() + (3*24*60*60*1000)) ); //where 3 is for 3 days.you can change it according to your need
}
});
$('#dob2').datepicker({changeMonth: true, changeYear: true, yearRange: '2012:2020'});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<div class="row-form clearfix">
<div class="span5">Free Trail Date:</div>
<div class="span7">
<input value="" placeholder="From" style="width: 96px;" type="text" name="ftdt" id="dob" required/>
<input value="" placeholder="To" style="width: 96px;" type="text" name="ft_snd" id="dob2" required/>
</div>
</div>
In My case i want to change mindate dynamically when changing of one input
$('#text1').on('changeDate', function () {
var sdate = moment.utc((<any>$('#text1')).datepicker('getFormattedDate')).subtract(1, "days");
(<any>$("#LossDate")).datepicker('minDate', sdate.format("MM-DD-YYYY"));
});
i am also try with
$('#text1').on('changeDate', function () {
var sdate = moment.utc((<any>$('#text1')).datepicker('getFormattedDate')).subtract(1, "days");
(<any>$("#LossDate")).datepicker('setStartDate', sdate.format("MM-DD-YYYY"));
});
and
$('#text1').on('changeDate', function () {
var sdate = moment.utc((<any>$('#text1')).datepicker('getFormattedDate')).subtract(1, "days");
(<any>$("#LossDate")).datepicker('startDate', sdate.format("MM-DD-YYYY"));
});
and
$('#text1').on('changeDate', function () {
var sdate = moment.utc((<any>$('#text1')).datepicker('getFormattedDate')).subtract(1, "days");
(<any>$("#LossDate")).datepicker('SetstartDate', sdate.format("MM-DD-YYYY"));
});
but nothing is working in my case
Here is the working javascript:
$(document).ready(function(){
$("#startdate").datepicker({
todayBtn: 1,
autoclose: true,
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#enddate').datepicker('setStartDate', minDate);
});
$("#enddate").datepicker()
.on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#startdate').datepicker('setEndDate', minDate);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js"></script>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label class="control-label">Start</label>
<input class="form-control" type="text" placehoder="Start Date" id="startdate"/>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label">End</label>
<input class="form-control" type="text" placehoder="End Date" id="enddate"/>
</div>
</div>
</div>
Happy Coding
Use this
$("#text1").datepicker({
autoclose: true
}).on('changeDate', function (selected) {
var minDate = new Date('2017-12-01');
$('#text1').datepicker('setStartDate', minDate);
});
I need to create two date pickers using the datepicker by https://github.com/uxsolutions/bootstrap-datepicker so that date selected in the first datepicker will be used as start date of second. The dates before the date picker of first one disabled in the second.
The HTML for first date-picker:
<div class="col-sm-6 row-margin" id="div-last-day">
<div class="input-group date">
<input type="text" class="test-width form-control input-xs" name="last-day-worked" id="last-day" placeholder="Select your last Date" readonly><span class="input-group-addon input-xs"><i class="glyphicon glyphicon-calendar"></i></span>
Second date-picker:
<div class="col-sm-6 row-margin" id="div-separation-day">
<div class="input-group date">
<input type="text" class="test-width form-control input-xs" name="separation-day-worked" id="separation-day" placeholder="Select your Separation Date" readonly><span class="input-group-addon input-xs"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
Here is some of my code:
$("#div-last-day .input-group.date").datepicker({
format: "dd-M-yyyy",
todayHighlight: true,
autoclose: true,
});
$('#div-last-day .input-group.date').datepicker()
.on('changeDate', function (e) {
var lastdate = $('#div-last-day .input-group.date').datepicker('getDate');
var date = new Date(lastdate);
var curr_date = date.getDate();
var curr_month = date.getMonth();
var curr_year = date.getFullYear();
perfect_date = curr_date + "-" + m_names[curr_month]
+ "-" + curr_year;
$("#div-separation-day .input-group.date").datepicker({
format: "dd-M-yyyy",
todayHighlight: true,
startDate: perfect_date,
autoclose: true,
});
});
Here is the fiddle I am working on https://jsfiddle.net/5tpn12L8/
The fiddle works for the first time but when I change the date in the first date-picker it doesn't update the second date-picker.
You can do it as below:
HTML:
<input class="form-control" id="txtFromDate" />
<input class="form-control" id="txtToDate" />
JQUERY:
$(document).ready(function () {
$("#txtFromDate").datepicker({
format: 'dd/mm/yyyy',
autoclose: 1,
//startDate: new Date(),
todayHighlight: false,
//endDate: new Date()
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#txtToDate').datepicker('setStartDate', minDate);
$("#txtToDate").val($("#txtFromDate").val());
$(this).datepicker('hide');
});
$("#txtToDate").datepicker({
format: 'dd/mm/yyyy',
todayHighlight: true,
//endDate: new Date()
}).on('changeDate', function (selected) {
$(this).datepicker('hide');
});
});
jsfiddle DEMO
actually timepicker has it's own documentation you can use as
$('#timepicker_input').datetimepicker({
format: "dd-M-yyyy",
todayHighlight: true,
autoclose: true,
onSelect: function(dateText, inst){
//here perform the change you want
}
});
I have several datepickers on the same page and need one to only display the month and year, while others should show complete calendar with days. I know that to hide days from a lone datepicker I can do something like:
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
But that hides the dates from all calendars. How can I make sure the other datepicker keeps the calendar view?
Edit
I did try nesting CSS but am still missing something. For HTML part I have roughly:
<div id="monthOnly"><input type="text" class="monthly-picker" name="mdate"></div>
And JS code $('.monthly-picker').datepicker();
Still, doing something like
<style>
#monthOnly .ui-datepicker-calendar {
display: none;
}
</style>
Does not produce desired results.
give the use an id on a container element.
<style>
#monthOnly .ui-datepicker-calendar {
display: none;
}
</style>
EDIT:
http://jsfiddle.net/h8DWR/ is a solution to deal with the idiosyncrasies of datepicker. The idea is use a style element to add the style when the specific datepicker is chosen and then remove it when it is closed.
I did a little different ...
HTML
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
CSS
.hide-calendar .ui-datepicker-calendar {
display: none;
}
jQuery
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
yearRange: '1980:' + new Date().getFullYear(),
beforeShow: function(el, dp) {
$('#ui-datepicker-div').addClass('hide-calendar');
},
onClose: function(dateText, inst) {
$('#ui-datepicker-div').removeClass('hide-calendar');
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
Fiddle
Slightly different way
$('.year').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
beforeShow: function(input) {
$(this).datepicker('widget').addClass('hide-calendar');
},
onClose: function(input, inst) {
$(this).datepicker('widget').removeClass('hide-calendar');
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
$('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy dd',
onClose: function(input, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay));
}
});
.hide-calendar .ui-datepicker-calendar{
display: none;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" />
<input class="year" type="text" id="" />
<input class="datepicker" type="text" id="" />