I have a textbox on a form, and I create a datepicker like this:
$("#txtBirthDate").datepicker({
changeMonth: true,
changeYear: true,
yearRange: '1920:2999',
maxDate: '+0d',
dateFormat: 'dd-mm-yy'
});
This works fine, but what happends is:
I press the textbox, the datepicker appears nicely, select a date. but then if I want to select another date, I first need to click on another field, and then click back on the birthdate field. When I press the birthdate field the second time without clicking another field first the datepicker doens't show..
What am I missing here?
HTML Code:
<label>Birthdate</label>
<input type="text" name="txtBirthDate" id="txtBirthDate" class="input" readonly='true' value="<?echo $_POST["txtBirthDate"]; ?>" />
Ok problem was the focus. The field didn't loses focus after a date selection. Solved with:
$("#txtBirthDate").datepicker({
changeMonth: true,
changeYear: true,
yearRange: '1920:2999',
showButtonPanel: true,
maxDate: '+0d',
dateFormat: 'dd-mm-yy',
onClose: function(dateText, inst) {
setTimeout(function(){
$("#txtBirthDate").blur();
}, 200);
}
});
Thank you for trying to solve the issue with me!
It Happens once with me just follow the article and see what is different but i think that you miss :
showButtonPanel: true,
in your code .Thanks
The very simple answer that worked for me was to include this line
$('#ui-datepicker-div').remove();
prior to initializing your datepicker elements.
Related
In my laravel project, I have two datepickers which include from and to dates.
When the from date is selected, I want to disable the dates before the from date's and let the user to select the to date after the selected from date.
In briefly, from date is earlier date and to date should be a later date.
Here is the code in blade.php
<div class="form-group">
<i class="fa fa-calendar"></i><label for="date">From:</label><input type="text" class="datefrom" id="datefrom" name="datefrom" value="{{ old('datefrom') }}" />
<i class="fa fa-calendar"></i><label for="date">To:</label><input type="text" class="dateto" id="dateto" name="dateto" value="{{ old('dateto') }}" />
</div>
<script>
$(function() {
$('.datefrom').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
minYear: 1985,
autoUpdateInput: false,
maxDate: new Date,
maxYear: parseInt(moment().format('YYYY'),10),
locale: {
format: 'DD-MM-YYYY'
}
}, function(start, end, label) {
var years = moment().diff(start, 'years');
},
$('.dateto').datepicker(
"change", {
minDate: new Date($('.datefrom').val())
});
});
$(function() {
$('.dateto').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
minYear: 1985,
autoUpdateInput: false,
maxDate: new Date,
maxYear: parseInt(moment().format('YYYY'),10),
locale: {
format: 'DD-MM-YYYY'
}
}, function(start, end, label) {
var years = moment().diff(start, 'years');
},
$('.datefrom').datepicker(
"change", {
maxDate: new Date($('.dateto').val())
});
});
</script>
I want the functionality as [http://jsfiddle.net/jjLhca9o/5/][1]. Though I tried by using ids and classes in many ways I failed. May I know where I have gone wrong.
I want to validate the Date picker as well. But, datepicker takes the default date as current date. As a solution for that, I suggested to keep the date field empty before input any date. I tried with autoUpdateInput: false. When I add it to the script, the date field keeps empty though I selected a date from the date picker.
I am new to coding. Please help. Thank you very much.
You can use jQuery UI Datepicker, using date range.
After selecting "From" you can select in next box "To": The "From" date is moved as parameter to next box, and you get the limits you want.
It easy to use and you can see full example in the link.
$( function() {
var dateFormat = "mm/dd/yy",
from = $( "#from" )
.datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3
})
.on( "change", function() {
//Here we get the date and set as 'minDate' and update for next selection
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3
})
.on( "change", function() {
//Using 'to' box we set end limit, so 'to' box will be limited.
from.datepicker( "option", "maxDate", getDate( this ) );
});
//using that function you can get the range user picked
function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}
} );
How do you set the highlighted date as Server date in jQuery UI Datepicker?
I am using PHP for the server side programming and I have the following code:
<script>
$(function() {
$("#from45").datepicker({
//defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 1,
});
});
</script>
I want to compare 3 dates using jquery ui date picker.
I have the following date fields :
Date of Enquiry
Travel from date
Travel to date
The following rules apply :
The Date of Enquiry must be the most first date
The Travel from date must be after the Date of Enquiry
The Travel to date must be after Travel from date
I have the following script:
$(function() {
$("#inputField").datepicker({
//defaultDate: "-1w-4d",
changeMonth: true,
changeYear: true,
dateFormat: 'dd-mm-yy',
yearRange: "-90:+90",
onSelect: function(selectedDate) {
$("#inputField1").datepicker("option", "minDate", selectedDate);
}
});
$("#inputField1").datepicker({
//defaultDate: "+1w",
changeMonth: true,
changeYear: true,
dateFormat: 'dd-mm-yy',
yearRange: "-90:+90"
});
$("#inputField2").datepicker({
//defaultDate: "+1w",
changeMonth: true,
changeYear: true,
dateFormat: 'dd-mm-yy',
yearRange: "-90:+90",
onSelect: function(selectedDate) {
$("#inputField1").datepicker("option", "minDate", selectedDate);
}
});
});
you could create a custom date comparing function and use in onSelect event of date picker. This is not the exact answer but a way towards possible solution,
....
onSelect: function( selectedDate , inst ) {
var isValid = validateTime( selectedDate, inst, this);
if( isValid ) {
$( "#inputField1" ).datepicker( "option", "minDate", selectedDate );
}
else {
//show some appropriate error
}
}
//where validateTime is custom function returning true or false
And custom date comparing function:
function validateTime( dateText, pickerInstance, picker) {
//dateText - selected date as text
//pickerInstance - a reference to the datepicker instance
//picker - the datepicker to be validated
//get the date to check using getDate, like
var field2DateVal = $("#inputField2").datepicker("getDate");
//and compare it with other datepicker values
//return true or false accordingly
}
I hope this way works
You can use like
<label for="enquiry">Enquiry</label>
<input type="text" id="enquiry" name="enquiry"/>
<label for="from">From</label>
<input type="text" id="from" name="from" disabled/>
<label for="to">to</label>
<input type="text" id="to" name="to" disabled/>
​JavaScript Code:
$(function() {
$("#enquiry").datepicker({
defaultDate: "+0d",
changeMonth: true,
numberOfMonths: 2,
onSelect: function(selectedDate) {
$("#from").datepicker("option", "minDate", selectedDate);
$("#from").removeAttr("disabled");
}
});
$("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onSelect: function(selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
$("#to").removeAttr("disabled");
}
});
$("#to").datepicker({
defaultDate: "+2w",
changeMonth: true,
numberOfMonths: 2,
onSelect: function(selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
});​
Working Demo
The Date of Enquiry must be the most first date
The Travel from date must be after the Date of Enquiry
The Travel to date must be after Travel from date
To get you started in the right direction I would start looking at the required business logic and design a solution based on that.
Before setting automatically any other date values from within the onSelect of each date picker I would propably separate the validations similar to the below first and go from there :
var $enquiryDate = $("#inputField"); // Must be before travel from and before travel to date
var $TravelFromDate = $("#inputField2"); // Must be after enquiry date but before travel to date
var $TravelToDate = $("#inputField2"); // Must be after travel from and after enquiry datedate
function isEnquiryDateValid(dateValue){
// Must be before travel from and before travel to date
// Compare date values and return true or false...
}
function isTravelFromDateValid(dateValue){
// Must be after enquiry date but before travel to date
// Compare date values and return true or false...
}
function isTravelToDateValid(dateValue){
// Must be after travel from and after enquiry datedate
// Compare date values and return true or false...
}
You could change this if you want to apply changes based on the values to somethign similar to this:
function processSelectedEnquiryDate(dateValue){
// Must be before travel from and before travel to date
// Compare dates and set individual dates to specific defaults
// or
// show a validation error below the control....
}
function processSelectedTravelFromDate(dateValue){
// Must be after enquiry date but before travel to date
// Compare dates and set individual dates to specific defaults
// or
// show a validation error below the control....
}
function processSelectedTravelToDate(dateValue){
// Must be after travel from and after enquiry datedate
// Compare dates and set individual dates to specific defaults
// or
// show a validation error below the control....
// or simply show a validation error below the control....
}
Setting default values on each control based on a selected value is more complex than validating each value selected and displaying a validation error below a control, i.e: The tavel to date cannot be less than the travel from date
I am using the jquery event search datepicker in my code which is present here
. I am new to jquery and I am using the exact same code. The default date is set to one week ahead of the current date.
how do i make the default date to the current day? (simple question, but what is the correct format to do so?).
since i am using 2 fields from and to, i then want the default date to be changed according to the value selected in from field. suppose i select 20th june 2009, i want the TO field to show up from 21st June 2009 and not the current date. Can this be even done (too good that jquery automatically disables all the dates that fall before the FROM field).
i tried to change the dateformat with this code, dateformat: "yy-mm-dd", but it does not change.. shows the default way of mm/dd/yyyy.
can i disable the from and two fields, i do not want anyone trying to manually change those values.
Code:
$(function() {
var dates = $( "#from,#to" ).datepicker({
defaultDate: "null",dateFormat: "yy-mm-dd",
changeMonth: true,disabled:true,
numberOfMonths: 3,
onSelect: function( selectedDate ) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" );
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
});
$(function() {
var dates = $( "#from, #to" ).datepicker({
minDate: 0,
dateFormat: 'dd/mm/yy',
changeMonth: true,
numberOfMonths: 1,
showOn: "both",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
onSelect: function( selectedDate ) {
if(this.id=="from"){
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" );
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
var date2 = $('#from').datepicker('getDate', '+1d');
date2.setDate(date2.getDate()+1);
dates.not( this ).datepicker("option", option, date2);
}
}
});
Change defaultDate: "+1w", see explanation for the option defaultDate one the page you've indicated.
Change the code in onSelect: function( selectedDate ) { to choose the date for the second selector to be "the next day".
dateFormat, not dateformat
When you want to disable them, use $("#from,#to").datepicker("disable")
More generally the documentation in jquery UI is really good : try to look at all option/methods available and find the one that will do what you are looking for.
I'm currently working with jQuery and using the datepicker.
I have two input fields: Start Date and End Date. When each is clicked, the datepicker pops out.
For the "End Date" field, I would like the jQuery date picker to highlight the same day. For example, if a user picks 8/12/09 as their start date, for the End Date, they cannot pick anything BEFORE 8/12/09.
Here's what I currently have:
$("#datepicker").datepicker({minDate: +5, maxDate: '+1M +10D', changeMonth: true});
var startDate = $("#datepicker").val();
var the_date = new Date(startDate);
$("#datepicker2").datepicker({ minDate: the_date });
And, unforunately, this does not work.
I have found that if I "hard-code" the values in, like:
$("#datepicker2").datepicker({ minDate: new Date("08/12/2009") });
it will work fine. Any ideas on how to pass the "start date" to the "end date" picker?
Thanks!
this cant work
you need a callback function from the date picker for the "picking" event. befor this event your startDate will be empty.
try this:
$("#datepicker").datepicker({
minDate: +5,
maxDate: '+1M +10D',
changeMonth: true,
onSelect: function(dateText, inst){
var the_date = new Date(dateText);
$("#datepicker2").datepicker('option', 'minDate', the_date);
}
});
$("#datepicker2").datepicker(); // add options if you want
start date end date
http://rowsandcolumns.blogspot.com/2010/07/jquery-start-dateend-date-datepicker.html
date time culture will be different for differ user. the jquery ui minimum is not working for that above code. and initially if i select end date then minimum date will not set for end date.
<input type="text" id="tbStartDate" value="" disabled="disabled" />
<input type="text" id="tbEndDate" value="" disabled="disabled" />
<script type="text/javascript">
$(document).ready(function () {
$("#tbStartDate").datepicker({
//minDate: +5,
//maxDate: '+1M +10D',
//changeMonth: true,
dateFormat: 'dd-mm-yy',
showOn: 'button',
buttonImageOnly: true,
buttonImage: '/Content/Calendar.png',
buttonText: 'Click here (date)',
onSelect: function (dateText, inst) {
$('#tbEndDate').datepicker("option", 'minDate', new Date($("#tbStartDate").datepicker('getDate')));
},
onClose: function (dateText, inst) {
//$("#StartDate").val($("#tbStartDate").val());
}
});
$("#tbEndDate").datepicker({
dateFormat: 'dd-mm-yy',
showOn: 'button',
buttonImageOnly: true,
buttonImage: '/Content/Calendar.png',
buttonText: 'Click here (date)',
onClose: function (dateText, inst) {
//$("#EndDate").val($("#tbEndDate").val());
}
});
$('#tbEndDate').datepicker("option", 'minDate', new Date($("#tbStartDate").datepicker('getDate')));
});
</script>