I have the following div:
<div class="input-group">
<input type="hidden" id="datepicker">
<input type="text" id="input_date" class="form-control" value="" readonly='readonly'>
<span class="input-group-addon" id="input_btn_calendar"><i class="fa fa-calendar"></i></span>
</div>
And the following JQuery call:
var today = new Date();
$("#input_date").datepicker({
changeYear: false,
numberOfMonths: 1,
altFormat: "yy-mm-dd",
altField: "#datepicker",
minDate: today,
onSelect : function () {
var inputdate = $.datepicker.parseDate('yy-mm-dd', $("#datepicker").val());
}
}).datepicker("setDate",today);
This makes the datepicker appear correctly when I press the text field. However, I also want it to show up when I click the input_btn_calendar button inside the accompanying span.
I've tried this:
$("#input_btn_calendar").click(function() {
$("input_date").datepicker('show')
});
But unfortunately, that does nothing. What am I missing?
You have an invalid selector of $('input_date').
Try this instead,
$("#input_btn_calendar").click(function() {
$("#input_date").datepicker('show')
});
Related
I have a datatable where I have the option to edit the date of every record in that table, so I need to use "document on focus" event to get all my datepickers to work. The problem here is that my datepicker only works when I click on the input, if I click in the "icon" it doesn´t work.
This is my datepicker in the form:
<div class="form-group">
<label for="fecha" class="col-form-label">Fecha</label>
<div class="input-group date" id="datepickerEditT" data-target-input="nearest">
<input type="text" id="datepickerEditT" name="fechaTratamiento" value="{{date('d/m/Y',strtotime($fecha))}}" class="form-control datepicker-input" data-target="#datepickerEditT" required/>
<div class="input-group-append" data-target="#datepickerEditT" data-toggle="datepickerEditT">
<div class="input-group-text"><i class="fas fa-calendar-alt"></i></div>
</div>
</div>
</div>
and this is the javascript:
$(document).on("focus", "#datepickerEditT", function () {
$(this).datepicker({
format: "dd/mm/yyyy",
language: "es",
autoclose: true,
todayHighlight: true,
});
});
if I dont use on focus event my datepicker works fine, doesn´t matter if I click on the input or the icon, but I need to use this event because if I dont, my datepicker will only works on the first record in the table.
I used class div instead of the id like someone said and now everything its working without using the focus event.
$(".datepickerEditT").datepicker({
format: "dd/mm/yyyy",
language: "es",
autoclose: true,
todayHighlight: true,
});
I am using nodejs in back-end, For date-picker i am using jquery plugin.
My end date should not be lesser that start date so i used the following code
<div class="ipfield">
<label class="plclabel" for="role_type">Start Date</label>
<div class='input-group date' id='datetimepicker1'>
<input type="text" name="startdate" id="datepicker1" ng-model="userdatas.start_date" class="txt_box" id="datepicker1" autocomplete="off">
</div>
</div>
<div class="ipfield">
<label class="plclabel" for="role_type">End Date</label>
<div class='input-group date' id='datetimepicker1'>
<input type="text" id="datepicker2" name="enddate" ng-model="userdatas.end_date" class="txt_box" id="datepicker2" autocomplete="off">
</div>
</div>
$( function() {
$("#datepicker1").datepicker({
changeMonth: true,
minDate: dateToday,
changeYear: true,
dateFormat:'dd-M-yy',
onSelect: function(selected) {
$("#datepicker2").datepicker("option","minDate", selected)
}
});
$("#datepicker2").datepicker({
changeMonth: true,
changeYear: true,
dateFormat:'dd-M-yy',
onSelect: function(selected) {
$("#datepicker1").datepicker("option","maxDate", selected)
}
});
});
Am getting undefined data in back-end
app.post('/add_notification', function (req, res, next) {
console.log(req.body.msg['start_date'])
console.log(req.body.msg['end_date'])
});
UPDATE:
Am sending the request through angularjs
var app = angular.module('app', ['countrySelect','ui.bootstrap','angularMoment','msl.uploads','angularFileUpload', 'ngMessages','ngTagsInput','ui-notification','angularUtils.directives.dirPagination']);
app.controller('settingsCtrl', function($scope, $http,$filter,Notification)
{
$scope.add_notification = function(msg){
console.log(msg) // here itself am not getting the value
$http.post('/add_notification',{'msg':msg}).then(function(response)
{
$('#editModal').modal('toggle');
if(response.data=='error')
{
Notification.error('<span class="glyphicon glyphicon-ok"></span><strong>Error !Please Try Again</strong>');
}
else
{
Notification.success('<span class="glyphicon glyphicon-ok"></span><strong>Your news/event is saved and will be visible to all users for the time period choosen.</strong>');
}
$scope.load_notification();
});
}
})
If i didn't use onSelect am getting the data, but my end date should not be lesser that start date.
is any mistakes in my code?
onselect occurs after a user selects (highlights) some text in an input or text area (documentation on w3schools).
onchange refers to modifying an input or select element (documentation on w3schools).
You might have better luck using a different event trigger that fires after the change you’re interested in (updating input) is completed.
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/
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
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 :)