Develop Reference

Clone jQuery input date picker element

I am using the jQuery date picker and I want to clone the input element. The jQuery code seems to be working fine when cloning and static element but not with the date picker. Below is the code:
$(function(){
var $button = $('.datepicker-input--checkin').clone();
$('.package').html($button);
});
$(function(){
$('#thedate').datepicker({
dateFormat: 'dd-mm-yy',
altField: '#thealtdate',
altFormat: 'yy-mm-dd'
});
});
Shown Field :
<input id="thedate" type="text" class="datepicker-input--checkin" /><br />
Hidden Field :
<input id="thealtdate" type="text" class="datepicker-input--checkin" /><br />
<input id="thesubmit" type="button" value="Submit" />
<div class="package">
</div>
Fiddle:

After cloning the input, you would need to initialize the datepicker again on the input.
You could do that by adding a class datepicker on the input intended to have the datepicker, and then initializing the datepicker (after cloning) using:
$(".package .datepicker").datepicker({
dateFormat: 'dd-mm-yy',
altField: '#thealtdate',
altFormat: 'yy-mm-dd'
});
Here's the updated fiddle: https://jsfiddle.net/txqepe36/3/
You could simplify the code even further by removing the datepicker initialization through element ID, since you have a class datepicker on both inputs expected to have a date picker control.
Your JS code could be simplified to:
$(function() {
var $button = $('.datepicker-input--checkin').clone();
$('.package').html($button);
$(".datepicker").datepicker({
dateFormat: 'dd-mm-yy',
altField: '#thealtdate',
altFormat: 'yy-mm-dd'
});
});
Note that you would need to add a datepicker class to the input. So it should look like:
<input id="thedate" type="text" class="datepicker-input--checkin datepicker" />
Here's the fiddle: https://jsfiddle.net/txqepe36/4/

Bootstrap date time picker not allowing user to type time

I have a scenario where I use Bootstrap Datetimepicker to select time, but when I manually type the time, even in correct format, it changes to 12:00 AM on date picker close
Here is my datetimepicker:
$('#ShiftStart').datetimepicker({
minDate: actualDate,
maxDate: maxDate,
useCurrent: false,
format: 'hh:mm A',
defaultDate:moment(startTime),
stepping: 15
});
$('#ShiftEnd').datetimepicker({
minDate: actualDate,
maxDate: maxDate,
format: 'hh:mm A',
defaultDate:moment(startTime),
stepping: 15
});
Even if I bind an onfocusout event to set the value of the datetimepicker it doesn't change when the picker closed.
$("#ShiftStart").focusout(function (e) {
//here it is defaulted again to 12:00 AM
var time = $('#' + e.target.id).val();
$('#' + e.target.id).attr('data-time', actualDate + ' ' + time);
$('#' + e.target.id).attr('value', actualDate + ' ' + time);
$('#' + e.target.id).val(time)
});
Any work around on this.
var actualDate = $('#ActualDate').val();
var maxDate = $('#MaxDate').val();
var startTime = $('#StartTime').val();
$('#ShiftStart')
.datetimepicker({
minDate: actualDate,
maxDate: maxDate,
useCurrent: false,
format: 'hh:mm A',
defaultDate: moment("12/27/2017"),
stepping: 15
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment#2.19.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<input id="ActualDate" type="hidden" value="12/27/2017">
<input id="MaxDate" type="hidden" value="12/28/2017">
<input id="StartTime" type="hidden" value="12/27/2017 8:00:00 AM">
<input class="form-control timepicker valid" data-val="true" data-val-genericcompare="Start time must be earlier than end time" data-val-genericcompare-comparetopropertyname="ShiftEnd" data-val-genericcompare-operatorname="LessThan" data-val-required="The Start Time field is required."
id="ShiftStart" name="ShiftStart" style="max-width : none; border : 1px solid #cccccc;" type="text" value="12/27/2017 12:00 AM" data-time="12/27/2017 12:00 AM" aria-required="true" aria-describedby="ShiftStart-error" aria-invalid="false">

The datetimepicker defaults back to 12:00 AM even if you select the value from the picker (not only manually type), I think this is a bug of the the lastest versions of the component.
Anyway, there are a couple of things to fix in your code. As the date([newDate]) states :
Takes string, Date, moment, null parameter and sets the components model current moment to it. [...]
Parsing of the newDate parameter is made using moment library with the options.format and options.useStrict components configuration.
So minDate, maxDate and defaultDate are strings parsed using format option (hh:mm A in your case) and this will produce wrong values, use moment(String, String) instead (e.g. defaultDate: moment("12/27/2017", 'MM/DD/YYYY')).
Even the value property in the HTML is parsed using format, 12/27/2017 12:00 AM does not match hh:mm A so I've removed it in my snippet.
Here a working example using version 4.17.37 of the datetimepicker:
var actualDate = $('#ActualDate').val();
var maxDate = $('#MaxDate').val();
var startTime = $('#StartTime').val();
$('#ShiftStart')
.datetimepicker({
minDate: moment(actualDate, 'MM/DD/YYYY'),
maxDate: moment(maxDate, 'MM/DD/YYYY'),
useCurrent: false,
format: 'hh:mm A',
defaultDate: moment("12/27/2017", 'MM/DD/YYYY'),
stepping: 15
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<input id="ActualDate" type="hidden" value="12/27/2017">
<input id="MaxDate" type="hidden" value="12/28/2017">
<input id="StartTime" type="hidden" value="12/27/2017 8:00:00 AM">
<div class="row">
<div class='col-sm-6'>
<input class="form-control timepicker valid" data-val="true" data-val-genericcompare="Start time must be earlier than end time" data-val-genericcompare-comparetopropertyname="ShiftEnd" data-val-genericcompare-operatorname="LessThan" data-val-required="The Start Time field is required."
id="ShiftStart" name="ShiftStart" style="max-width : none; border : 1px solid #cccccc;" type="text" data-time="12/27/2017 12:00 AM" aria-required="true" aria-describedby="ShiftStart-error" aria-invalid="false">
</div>
</div>
Side thoughts:
Since you are using hh:mm A format, you can probably just manage time and get rid of minDate and maxDate (in your example you are limiting to a single given day)
If you want to do something when the components hides use dp.hide event.

I think this is happening because minDate is reseting the field value to the current date at midnight (probably the default time), and similarly maxdate probably also sets it to midnight by default.
Remove minDate: actualDate and maxDate: maxDate from the initialisation:
<input id="ActualDate" type="hidden" value="12/27/2017">
<input id="MaxDate" type="hidden" value="12/28/2017">
<input class="form-control timepicker valid" data-val="true" data-val-genericcompare="Start time must be earlier than end time" data-val-genericcompare-comparetopropertyname="ShiftEnd" data-val-genericcompare-operatorname="LessThan" data-val-required="The Start Time field is required."
id="ShiftStart" name="ShiftStart" style="max-width : none; border : 1px solid #cccccc;" type="text" aria-required="true" aria-describedby="ShiftStart-error" aria-invalid="false">
<script>
var actualDate = $('#ActualDate').val();
var maxDate = $('#MaxDate').val();
$('#ShiftStart').datetimepicker({
useCurrent: false,
format: 'hh:mm A',
});
</script>
In reply to your comment, you can pass in the maxDate parameter like this:
maxDate: new Date('2017', '12', '27', '03', '30', '00', '00')
Which i guess you will need to build from the maxDate string. Note that to get this working I had to remove the defaultDate parameter from the snippet in your question.

Disable future dates

My View:
<input type="text" class="datepicker" placeholder="DD/MM/YYYY" id="datepicker" ng-model="datepicker" name="datepicker" style="width:100%" tabindex="4" required/>`
Controller:
`$('#datepicker').datepicker({
format: 'mm-dd-yyyy',
endDate: '+0d',
autoclose: true
});
it's showing TypeError: $(...).datepicker is not a function
I want to disable all the future dates after today
Trying to implement.

as others have mentioned you might have not included it in your page...and as far as logic concerned for disabling dates after today:
You can assign today to maxDate option of datepicker,
this is what jquery datepicker api docs have about maxDate option
The maximum selectable date. When set to null, there is no maximum.
$(function(){
$('#thedate').datepicker({
dateFormat: 'dd-mm-yy',
maxDate: new Date()
});
});
Here is the fiddle hope your issue is resolved now

Use maxDate instead of endDate
<input type="text" class="datepicker" placeholder="DD/MM/YYYY" id="datepicker" ng-model="datepicker" name="datepicker" style="width:100%" tabindex="4" required/>`
$('#datepicker').datepicker({
format: 'mm-dd-yyyy',
maxDate: new Date(),
autoclose: true
});
Fiddle

data-plugin-datepicker data-plugin-options='{"autoclose": true, , "endDate": "0d", "format": "dd-mm-yyyy"}'
try this in html

Restricting date picker to start from today only hml

I have a datepicker from the internet on my system and I want to restrict a user choice so they are only allowed to pick from today on wards. Below shows my javascript and the HTML form the datepicker is held in is held in.
I tried using minDate : '0' as well as the one that is in the function now.
Any help appreciated.
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: 'dd/mm/yy', minDate: +0 });
});
</script>
<div class="form-group">
<label class="col-sm-2 control-label">Start Date:</label>
<div class="col-sm-10">
<input class="form-control" type="date" id="datepicker" name="start_date" required="required">
</div>
</div>

<input type="date" min="2000-01-02">
date input type has an min and max attribute to restrict the date selection.
Here you can get today's date in JavaScript and set that value to your date input type. I just gave an example in above code snippet.

Try this:
var datePicker = $('#datepicker').datepicker({
beforeShowDay: function (date) {
return date.valueOf() >= now.valueOf();
}
});

Please try something like this,
$('#datepicker').datepicker({
dateFormat: 'dd/mm/yy',
minDate: 0
});
demo in jsfiddle

Is it possible to use contentEditable with jQuery DatePicker?

I'm looking for a way to use contentEditable with jQuery DatePicker. How can I use it on editable tables??
I found one answer here : http://www.sencha.com/forum/showthread.php?229598-Looking-to-enable-contenteditable-true-for-custom-input-type
And this is what I tried to do using the example given on the link above.
HTML code:
<td>
<div class='date' contenteditable='false'>2014-04-05</span>
<input type='hidden' class='datepicker' />
</td>
Javascript code:
$(".datepicker").datepicker({
dateFormat: 'yyyy-mm-dd',
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
onClose: function(dateText, inst) {
$(this).parent().find("[contenteditable=true]").focus().html(dateText).blur();
}
});
But this method doesn't work for me.
Additional Info: I'm using bootstrap and jquery-tablesorter.

I made it for myself with the following steps:
Used a hidden input for the datepicker, to work along with the contenteditable div:
<div class="holder">
<input name="date" class="datepicker-input" type="hidden" />
<div class="date" contentEditable="true"></div>
</div>
With the following jQuery:
// Binds the hidden input to be used as datepicker.
$('.datepicker-input').datepicker({
dateFormat: 'dd-mm-yy',
onClose: function(dateText, inst) {
// When the date is selected, copy the value in the content editable div.
// If you don't need to do anything on the blur or focus event of the content editable div, you don't need to trigger them as I do in the line below.
$(this).parent().find('.date').focus().html(dateText).blur();
}
});
// Shows the datepicker when clicking on the content editable div
$('.date').click(function() {
// Triggering the focus event of the hidden input, the datepicker will come up.
$(this).parent().find('.datepicker-input').focus();
});

None of them worked for me.
I think there must have been a change in the browser specs where hidden type can't have focus.
Anyway, my solution is to hide the input with in a div.
Fyi: Trying to hide the input or wrapping it in a span will not work.
$('.datepicker-input').datepicker({
minDate: 0,
onClose: function(dateText, inst) {
$('.date').text(
inst.selectedDay +"-"+
(inst.selectedMonth+1) +"-"+
inst.selectedYear);
}
});
$('.date').click(function() {
$('.datepicker-input').focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/start/jquery-ui.css">
<div style="height:0px; overflow:hidden">
<input class="datepicker-input" type="date"/>
</div>
<span class="date" contentEditable="true">Date?</span>
Enjoy! ^_^

You are not closing the div tag in your html
this
<div class='date' contenteditable='false'>2014-04-05</span>
should be
<div class='date' contenteditable='true'>2014-04-05</div>

Since the rows of the tables are generated dynamically, so you have to create the datepicker dynamically on editing the row. You can use the "focus" or "click" event of the row to bind the datepicker dynamically. Below code demonstrates the same:
//Add dynamic row when focused on the row
$(document).on("focus", "#tblMeetingDetails tr", function() {
if ($(this).find("input[type=hidden].datepicker").attr("id") === undefined) {
$(this).find("input[type=hidden].datepicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
showOn: "button",
buttonImage: "images/calendar-icon.png",
buttonImageOnly: true, onSelect: function() { },
onClose: function(dateText, inst) {
$(this).parent().find("[contenteditable=false]").html(inst.input.text()).blur();
}
});
$(this).find(".ui-datepicker-trigger").css("visibility", "hidden");
}
return false;
});
and your html for the row would look some what like the below code:
<tr>
<td>
<div class="date" contenteditable="false">
</div>
<input type="hidden" class="datepicker" />
</td>
</tr>
you can even use the ".date" class to find the contenteditable field for setting the date in the close event as below :
$(this).parent().find(".date").html(inst.input.text()).blur();
Hope this would help :)