I have 2 date pickers using the Jquery UI. If the user selects a date from date picker 1, how can I get it to update date picker 2 automatically with the same date?
I think this might be quite simple, but I've tried a few things and nothing seems to work.
Thanks in advance.
The date picker is essentially a text input element. You can use the jquery change handler on the first input element to grab its contents when they change, then simply select the second input element and update the value using jquery val.
http://api.jquery.com/change/
http://api.jquery.com/val/
Something like:
$("#firstdatepicker").change( function() {
$("#seconddatepicker").val($(this).val());
});
You'll want to use the onClose event to update the second text field.
I've created this fiddle here that works; for some reason the styling that's usually on the datepicker is not coming in though.
HTML:
<input type="text" name="date1" value="" />
<br>
<input type="text" name="date2" value="" />
Javascript:
$("input[name=date1]").datepicker({
onClose: function(dateText, inst) {
$("input[name=date2]").val(dateText);
}
});
$("input[name=date2]").datepicker();
Related
I was wondering how I would go about making a birthday calendar where I can insert dates (using JS, HTML and CSS). I already have a full calendar. I just dont know how to use input type date to insert a date into it.
Thanks
You can attach an event listener to the input field and write an appropriate event handler that processes your date.
See the code below that logs the selected date on the console.
$("#date").on('change', (event) => {
const date = $(event.target).val();
// You can do whatever you want with this date
console.log(date);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="date" />
I am using AngularJS with this bootstrap-datepicker plugin:
Datepicker for Bootstrap v1.6.4 (https://github.com/eternicode/bootstrap-datepicker)
Copyright 2012 Stefan Petre
Improvements by Andrew Rowls
I have it bound like this:
<input type="text" data-provide="datepicker" ng-model="obj.FirstDate" />
I get the values to inputs using ng-model.
When I type the date into this field using keyboard it all works OK, but when I click on a field and select a date from the Datepicker:
the model doesn't get updated,
the field is not treated as dirty (no ng-dirty class).
Is there a way to tell Angular to update value of obj.FirstDate when using the Datepicker? For example to attach it to an event? Or any other way that this would work?
I have a few of these fields so I don't want to write the script which attaches to a field using its id. Any help appreciated.
After much time of struggling with this I was forced to use below code to fix every of my datepicker instances at once:
function fixDatepickerTriggerChange() {
$(document).ready(function () {
$('[data-provide="datepicker"]').datepicker().on('changeDate', function (e) {
angular.element($(this)).triggerHandler('input');
});
});
}
And run it from within the angular.controller.
Based on this answer: https://stackoverflow.com/a/23850753/1813219.
I have this field where I can insert the date and time through a datetimepicker:
<script>
$(function() {
$('#datepicker').datetimepicker({dateFormat: 'dd-mm-yy'});
});
</script>
When I select the date and time, it will show the date and time perfectly in the textfield. Also when I press the submit button it will store the date and time perfectly through a DateTime() type in the database. Now I format the date that I read from the database from y-m-d to d-m-y in a function which is working fine. The problem is, if I go back to the page I submitted the date time in, it shows all the information I submitted in the input fields, except for the time. It only shows the date.
This is my input field:
<input type="text" name="date" value={{$date}} id='datepicker'>
When I var_dump($date); a few lines before the input field, I get the date and time perfectly like I want it:
11-04-2015 09:09
but in the textfield it shows:
11-04-2015
So there is nothing wrong with the variable $date.
When I submit again, it will save 11-04-2014 00:00:00.
Which makes me think there's something wrong with the format the default value is displayed in the textfield.
I already tried:
dateFormat: 'dd-mm-yy HH::mm'
in the script.
I use:
https://jqueryui.com/datepicker/
and:
http://trentrichardson.com/examples/timepicker/
EDIT:
Timepicker format JS:
timeFormat: 'HH:mm'
This is a typographical error in this line:
<input type="text" name="date" value={{$date}} id='datepicker'>
The date needs to go between quotes as the rest of the attributes. Otherwise it will stop at the first space break.
Right now, using the date that you specified, the generated code will look like this:
<input type="text" name="date" value=11-04-2015 09:09 id='datepicker'>
You can even see how StackOverflow highlights the "09:09" in a different color. And if you run the code snippet, you'll see that only the date is displayed.
Now, if you wrap the value between quotes, the result will be:
<input type="text" name="date" value="11-04-2015 09:09" id='datepicker'>
And the text field will display both date and time, so the datepicker will also process the time instead of ignoring it.
I am using the following plugin for a datepicker:
http://xdsoft.net/jqplugins/datetimepicker/
This is a very nice plugin however I am finding it difficult to set a default date when loading the box.
See this fiddle.
$('.datepicker').datepicker();
Box 1 contains 25/12/2013. I want the datepicker to default to this date when the user selects this box. Box 2 contains nothing therefore the box should default to today.
NB This is currently using standard jquery-ui-datepicker.
I have tried setting various options with no success. I have also tried to read where the value is being set but again cannot see where the input is referenced.
Any help would be appreciated.
$('.datepicker').datepicker()
.filter('[value!=""]')
.datepicker('setDate', '12/25/13');
FIDDLE
As a sidenote you can set a defaultDate to any datepicker that is submitted if the user doesn't select a date, but that date is not shown as the value of the input
$('.datepicker').datepicker()
.filter('[value!=""]')
.datepicker( "option", "defaultDate", '12/25/13' );
In your original question you say you're using third party datepicker plugin, but in your fiddle you're using JQueryUI DatePicker. So here's an example for JQueryUI datepicker.
I'm sure it can be easily updated for the third party plugin.
Try this:
HTML:
Box 1
<input type="text" class="datepicker" value="25/12/2013" />
Box 2
<input type="text" class="datepicker" value=""/>
Javascript:
$('.datepicker').each(function(index){
var dateStr = $(this).attr("value");
var date=new Date();
if(dateStr.length>0)
date=$.datepicker.parseDate("dd/mm/yy", dateStr);
$(this).datepicker({defaultDate:date});
});
JSFiddle: http://jsfiddle.net/HVk7W/3/
I'm implementing jQuery date picker. which can pick date from calendar as well as keyboard entry. When it is picked from the calendar it's working fine.
<input type="text" id="date" />
<script>
$('#date').datepicker ({
dateFormat: 'mm/dd/yy'
}).on("change", function(){
alert("You Entered: "+($(this).datepicker('getdate')));
})
Problem is when I enter, lets say 02/31/2014. which is invalid. I wanted to set a custom message to the user that $ is invalid.
But Jquery is passing on today's date for wrong entries. How can I get exact value of user entry (02/31/2014)?
When using the getdate method of jQuery, Its automatically setting to today's date for an invalid date (not sure why it is lke this in Jquery).
alert("You Entered: "+($(this).datepicker('getdate')));
instead of this use this
alert("You Entered: "+($("#date").val());
Update: Fiddle Demo