Develop Reference

jQuery datepicker not working in jQuery Dialog box

jQuery datepicker works fine on a static page, but I can't get it to work on a jQuery Dialog page. This is a wordpress site.
I know everything necessary is included because it works on a static page. The dialog page is triggered with a button click.
This is the code on the static page (working):
<input type="text" class="datepicker" name="datepicker" value="" />
Here is the input box on the dialog page, which is created dynamically (nothing happens when clicking in the input box):
<input type="text" value="" data_original_for_sale_date="" id="for_sale_date" class="datepicker">
Here is the jQuery code:
jQuery(document).ready(function($) {
$('.datepicker').datepicker({
dateFormat : 'mm/dd/yy'
});
});
Any help would be appreciated. (I'm a newbie...)

Update your jquery code by this
$(document).ready(function($) {
$('body').on('focus',".datepicker", function(){
$(this).datepicker({
dateFormat : 'mm/dd/yy'
});
});
});

Implementing form masking js

To implement form masking I followed this example:
http://html.codedthemes.com/gradient-able/default/form-masking.html
Instead of this:
<input type="text" class="form-control date" data-mask="99/99/9999">
I want to do this:
<input type="text" class="form-control date" data-mask="99.99.9999">
These scripts are involved:
<script src="../files/assets/pages/form-masking/inputmask.js"></script>
<script src="../files/assets/pages/form-masking/jquery.inputmask.js"></script>
<script src="../files/assets/pages/form-masking/autoNumeric.js"></script>
<script src="../files/assets/pages/form-masking/form-mask.js"></script>
I changed form-mask.js to start like this:
'use strict';$(function(){$(".date").inputmask({mask:"99.99.9999"});
But that didnt do it.

You can try this.
You have the part correct that gets all the fields with date in it.
Then, you have to change the data-mask attribute. Since its a generic field, we use the jquery function attr for that.
$(".date").attr('data-mask','99.99.9999');
http://api.jquery.com/attr/

input time from a form

i have a code that allows the user to input time (i require only time and not date) from html form and it gets saved in database using php code
<form>
Select a time:
<input type="time" name="usr_time">
</form>
But it does not support firefox browser, can anyone tell how to allow user to input time in am and pm format through a form

you can do this using javascript or jquery
there are alot of libraries you can use easily
check out http://jqueryvalidation.org/documentation/
,,
or you can do this by adding more inputs like this
<input type="text" name="hours" placeholder="hours" /><br /><input type="text" name="minutes" placeholder="minutes" />

You can use a jQuery Timepicker library to provide input contraints.
HTML
<link href="http://wvega.github.io/timepicker/resources/jquery-timepicker/jquery.timepicker.min.css" style="text/css" rel="stylesheet" />
...
<form>
<input type="text" class="timepicker" name="time"/>
</form>
...
<script src="http://wvega.github.io/timepicker/resources/jquery-timepicker/jquery.timepicker.min.js"></script>
JS
(function($) {
$(function() {
$('input.timepicker').timepicker();
});
})(jQuery);
FIDDLE

Daterange Picker open end when closing start

I am trying to use bootstrap datepicker, got it working, now there are some usability issue left.
Is it possible the open the second datepicker in a daterange when closing the first one? I am not really good in js. would be great if anyone could help here..Link to Demo
Below is my code:
HTML:
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="form-control" name="start" />
<input type="text" class="form-control" name="end" />
</div>
JavaScript:
$('.input-daterange').datepicker({
format: "dd.mm.yyyy",
language: "de",
todayHighlight: true
});

On further investigation, I found myself that I messed it with jQuery datepicker.
Here in Bootstrap datepicker, there is no method like onClose() but using changeDate you can simply accomplish the issue.
$('#start').datepicker({
autoclose: true // This enable you to close the picker
}).on('changeDate', function (ev) {
$("#end").focus();
});
$('#end').datepicker();
FYI: To close your picker, you make use of autoclose property in bootstrap datepicker.
Here is a simple JSFiddle for you.

How do I copy input from one textbox to another via checkbox using jQuery?

I'm cleaning up a simple form that has a Start Date textbox and an End Date textbox. I want to add a checkbox in between these fields that the user can check if the End Date is the same as the Start Date, so when they check it, the Start Date input value (e.g., 04/01/09) will automagically appear in the End Date textbox, so they don't have to type in the same date twice. Does that make sense?
BTW, I'm using the sexy jquery datepicker UI, and it's sweet, but I just can't figure out the above problem.
I know there's a simple solution (event handler?) but I'm stumped.

Try this code:
$("#checkboxId").click(copyDate);
function copyDate()
{
var start=$("#startDate").val();
if (this.checked==true)
$("#endDate").val(start);
}
Replace the 'id's with your own field ids.

Simple hack to solve your problem.
<html>
<head>
<script src="js/jquery.js" ></script>
</head>
<body>
<form>
<input type="text" name="startdate" id="startdate" value=""/>
<input type="text" name="enddate" id="enddate" value=""/>
<input type="checkbox" name="checker" id="checker" />
</form>
<script>
$(document).ready(function(){
$("input#checker").bind("click",function(o){
if($("input#checker:checked").length){
$("#enddate").val($("#startdate").val());
}else{
$("#enddate").val("");
}
});
}
);
</script>
</body>
</html>