We Keep Coding

Get updated date value on outside container click in bootstrap date picker inline (Combodate )

I am using date picker of bootstrap x-editable. Its working fine but I want to customized some of it's functionality. Suppose when we select any date and click on Tick mark then we can show the combined date inside a tag. So I want to get the same functionality onblur also (outside of the container but date should be change).

I think you can use this code into your input text as like that
<input size="16" type="text" value="2012-06-15 14:45" readonly class="form_datetime">
<script type="text/javascript">
$(".form_datetime").datetimepicker({format: 'yyyy-mm-dd hh:ii'});
</script>

How to use on-change event for textfield to make it empty if min-date condition fails

I had an input field with type="datetime" where it has min-date condition as todays date.The flow is, if the date is valid,then submit button is enabled or else it will be in disabled state.Its working fine.
But now if the user selects the date which is invalid(old date),the date will be displayed in text box but the button will be disabled.
I want to use ng-change such that if user selects invalid date(old date),on-change event should make the text field as empty and want to display error message..How can we get this ng-change working
Html:
<input class="form-control" type="datetime" date-time auto-close="true" view="date"
min-date="{{today}}" min-view="date" maxlength="10" format="dd/MM/yyyy"
ng-model="$ctrl.newClient.DateInput" required="true"
ng-change="$ctrl.checkdate">
controller:
$scope.today= new Date().toISOString().split('T')[0];
this.checkdate=function(){
};
Can someone help.Thanks

You can use angular-pikaday, it's easier to manage dates with this lib, so the user can select the date and you can manage it after the selection on a calendar. With pikaday you can set the min selectable date, so you can delete your checkdate function.
Read also How can we make all the past dates in the calendar unselectable? . Maybe it's another solution :)

A more user friendly solution is using datetime-local and min attribute which does not let the user to select a date before that.
Example:
<input type="datetime-local" id="exampleInput" name="input"
ng-model="example.value" min="2017-01-01T00:00:00" />
Working Plunkr

Want to show/hide text box having date picker when certain value is selected from drop down

I have one drop down in which i have value Indian and Others, when i select Others from the Drop down then i want to show three text box in which two are having date picker and the third one is simple text box.
I have written following code in html but i m not getting Date picker in it. Tried a lot. And again when i click on Indian these three text box should hide and at the time of page loading these three text box should be hidden.
I have this following imported file in my jsp for calendar.
visafromdate and visatodate are to be datepicker.
<script language="javascript" src="/js/reseller/popcalendar.js"></script>
<link href="/css/reseller/popcalendar.css" rel="stylesheet" type="text/css">
Following Java script for validation for showing/hiding & date picker
$(".visafromdate").each(function(){
$(this).datepicker();
});
$(".visatodate").each(function(){
$(this).datepicker();
});
$('#nationality').change(function(){
if($(this,':selected').val()=="indian")
{
$('label[for=other_nationality],input#other_nationality').hide();
$('#othernationality').hide();
$('label[for=visa_from_date],input#visa_from_date').hide();
$('#visafromdate').hide();
$('label[for=visa_to_date],input#visa_to_date').hide();
$('#visatodate').hide();
}
if($(this,':selected').val()=="others")
{
$('#othernationality').show();
$('label[for=other_nationality],input#other_nationality').show();
$('#visafromdate').show();
$('label[for=visa_from_date],input#visa_from_date').show();
$('#visatodate').show();
$('label[for=visa_to_date],input#visa_to_date').show();
}
});
$('label[for=other_nationality],input#other_nationality').hide();
$('#othernationality').hide();
$('label[for=visa_from_date],input#visa_from_date').hide();
$('#visafromdate').hide();
$('label[for=visa_to_date],input#visa_to_date').hide();
$('#visatodate').hide();`
And this i have written in the form tag
<label for="visa_from_date">Visa From Date</label>
<input type ="text" id="visafromdate"/>
<label for="visa_to_date">Visa To Date</label>
<input type ="text" id="visatodate"/>
<label for="other_nationality">Other Nationality</label>
<input type ="text" id="othernationality"/>
Can you please help me with it why it is not working?

It appears you are trying to reference the ids as if they were classes. Ids are referenced by hash (#)
Try this
$("#visafromdate,#visatodate").datepicker();

javascript - open link when user changes date in date picker

I am using a twitter bootstrap datepicker (http://www.eyecon.ro/bootstrap-datepicker/)
What I am trying to do is use the input value (e.g. 15-02-2012 ) to load a page, when the user changes the date.
The input box uses this code...
<div class="input-append date" data-date="12-02-2012" data-date-format="dd- mm-yyyy">
<input class="span9" size="16" id="dp3" type="text" value="12-02-2012" onchange="myFunction()">
<span class="add-on"><i class="icon-th"></i></span>
And the JavaScript to reload the page is this...
<script>
function myFunction()
{
datevalue = document.getElementById("dp3").value
window.open(datevalue,"_self");
}
</script>
The problem is when the date is changed in the date picker (input id = dp3), nothing happens, the page does not reload. But when I tried attaching myFunction() to another text box, it does work, and it is able to grab the value in the datepicker (dp3).
So the problem is that JavaScript is not recognising the change in value of the datepicker (id=dp3). Does anyone know why this is the case?

I see you took the code from the example n°3 of your link, but you switched the id to the wrong tag.
Here --.
V
<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012" readonly="">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
If you leave the id on the input tag and keep the original JS code, the .datepicker() method will be called on the wrong element (the input): it is meant to be called on the parent div.
Then, on your jQuery, you should bind the changeDate event of your date-picker, and not the onChange of the input tag itself.
You could try something like this (using jQuery) :
$('#dp3').datepicker().on('changeDate', function() {
//Retrieve the date located on the data of your datepicker
var datevalue = $('#dp3').data("date");
//You can take the value from the input as well if you want
//The input tag doesn't really need an ID to be retrieved (see comments)
//var datevalue = $('#dp3 input').val();
window.open(datevalue,"_self");
});
Edit : here is a working fiddle with minor changes.

How to select the content inside a textbox when loading the page?

I'm working on an application, and I want a text field to be selected when the page is loading so that when a user uses Ctrl + v it paste the content inside the textbox. Any one knows how to do that?
the text field is
<div>
<input wicket:id="email-address" type="text" id="textbox-email" />
</div>
Thanks!

3p3r answer is of course perfectly right. If you want this to be reusable and contolled via wicket, than please check the wicket wiki page.

You can use HTML5's autofocus attribute:
<input type="text" autofocus />
Works of course for just one field.

you should set focus to your input:
document.forms['your_form'].elements['your_textbox'].focus();
For your example above:
document.getElementById('textbox-email').focus()
After it gained focus, you should select it:
either add this onfocus attribute to your inputs (better)
<input type="text" onfocus="this.select()" />
Or use this jQuery snippet (best):
$(document).ready(function() {
$("#textbox-email").focus(function() { $(this).select(); } );
});
Pure Javascript:
var element = document.getElementById('textbox-email');
element.onfocus = function() {element.select();}
document.getElementById('textbox-email').focus();
Add the whole thing to window.onload or onload attribute of body tag.