I have a JQuery DatePicker which I always want to be displayed, so I've assigned it to a div. I want it to behave as shown in this example, where the selected date appears in the input box, but for some reason it just won't work this way for me. Is there anything I can do to have the value shown in the input box? I want the user to be able to either manually type the date into the box, or for them to select the date from the datepicker. This is the relevant part of my code as it stands so far.
<form class="form-horizontal" role="form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
<div class="form-group row">
<input type="text" id="my-input">
<div id="my-datepicker"></div>
</div>
<div class="form-group last">
<input type="submit" name="submit_date" value="Show"/>
</div>
</form>
<script>
$("#my-datepicker").datepicker().on('changeDate', function (e) {
$("#my-input").val(e.format());
});
</script>
This link shows my page so far:
https://gyazo.com/9ad02c1c1e2dbb832894f38107dc8bb9
The example you're trying to follow is quite outdated. The new syntax is as follows:
$("#my-datepicker").datepicker({
onSelect: function (event) {
$("#my-input").val($("#my-datepicker").val());
}
});
Codepen example
Previously asked and answered in Listening to onChange on a jQuery datepicker?
Working example here
$( function() {
$( "#datepicker" ).datepicker({
onSelect: function(e) {
console.log("Selected date: " + e + "; input's current value: " + this.value);
$("#my-input").val(e)
}
});
});
Related
How do I use a jQuery Datetimepicker with a user textbox input?
$(document).on('click', '#txtUserDateTime', function (evt) {
$('#txtUserDateTime').datetimepicker({
format: 'm/d/Y H:i',
step: 5,
minDate: 0
});
});
In the above image I can set Date and Time and the textbox is readonly. Sometimes I wanted to change only the time as some text like for example: "w/c" etc. but the datetimepicker textbox is not allowing me to hold the value after click outside of the event.
The Datetimepicker("#txtUserDateTime") textbox doesn't allow the user input. Can we achieve this?
And below is my cshtml code:
<div class="col-sm-3">
<div class="input-group date">
<span class="csts-date-time-picker" style="width: 100%;">
<input asp-for="NeedDate" type="text" id="txtCraneDateTime" class="form-control" tabindex="0">
</span>
<span asp-validation-for="NeedDate" class="text-danger"></span>
</div>
</div>
I want to fetch the value of the date and want to increase by 1 year and set the value for the next date .but if i am putting text i am getting alert if i am just choosing from datepicker i am not getting any alert.
<style>
.datepicker-days{display:none!important;}
.datepicker-months{display:block!important;}
.prev{visibility:hidden!important;}
.next{visibility:hidden!important;}
</style>
<script>
$(document).ready(function(){
$('.from').datepicker({
minDate:new Date(),
maxDate:'5yr',
format: 'mm/yyyy'
})
$('#gMonth2').on("change", function () {
alert();
//alert($(this).val());
});
});
</script>
<div class="container-fluid" id="content">
<div class="form-group">
<label>First check in:</label>
<input type="text" class="form-control form-control-1 datepicker input-sm from" id="gMonth2" placeholder="CheckIn" >
</div>
</div>
You can use the onSelect() event of datepicker
$('.from').datepicker({
minDate:new Date(),
maxDate:'5yr',
format: 'mm/yyyy',
onSelect: function(dateText) {
//Increase year by 1 & set to other field
}
});
I've tried to reproduce your code in here, I'm getting alert with the value fetched from the input when I change the date on the date picker, your code seems to be working fine.
.
I'm a noob wrt jquery and javascript. So, while I've looked at a lot of SO posts that deal with a piece of my problem, I've not been able to "assemble" the various solutions into something that works for me.
My context: the results of a query are displayed in a form. In each row, one of the fields is a date with an existing value. When first rendered, the data of all fields is text (non-editable). Via a button, I "enable" the fields for editing and I want to use jQuery datepicker for the date field. (I have this part working.)
One requirement: dates are stored in the database in ISO ('yyyy-mm-dd') format. The date displayed in the form (formatted via php) are 'M d y'.The datepicker should use the 'M d y' format for display as well (also seems to be working), but "post" the revised date in ISO format.
I've posted my code so far below and
here (jsfiddle)
<div class="container" id="myDiv">
<form method="post" action="">
<input type="hidden" id="projID" name="projID" value="fakeProjID">
<div class="row">
<!-- initially form is in "display-only mode" -->
<a class="btn btn-default btn-xs" id="make-editable" onClick = "toggle_edit(id,'fakeProjID');">Edit</a>
</div>
<!--rows dynamically generated via query
the id of the record is appended to the ids and inserted into the data-ids, data-dateval and values
these are fixed values for demo, but are dynamic values in reality -->
<div class="row">
<input type="text" name="date_pickr[]" id="date_pickr_511" class="input date_pickr disabled" data-id="511" data-dateval="2012-03-12" value="2012-03-12" disabled="true"/>
<input type="hidden" name="fmt_date[]" id="fmt_date_511" value="2012-03-12"/>
<input type="hidden" name="activityID[]" value="511"/>
//more info goes here//
</div>
<div class="row">
<input type="text" name="date_pickr[]" id="date_pickr_376" class="input date_pickr disabled" data-id="376" data-dateval="2013-05-19" value="2013-05-19" disabled="true"/>
<input type="hidden" name="fmt_date[]" id="fmt_date_376" value="2013-05-19"/>
<input type="hidden" name="activityID[]" value="376"/>
//more fields goes here//
</div>
<div class="row">
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
and the javascript:
//datepickers
$(function() {
$.datepicker.setDefaults({
dateFormat: 'M d y',
altFormat: 'yy-mm-dd'
});
$('.date_pickr').datepicker();
$('.date_pickr').datepicker( 'option','altField','#fmt_date');
});
function toggle_edit(ID,projID) {
var working_elemID = ID;
var ItemID = projID;
//name of modal div to enable/disable
var group_id = 'myDiv';
//if elem_ID = make_editable
if (working_elemID.search('un') == -1) {
//working code to make field editable
} else {
//working code to make field uneditable
}
}
The parts I need help with are:
a) getting the default dates to show in the field before they are edited/editable
b) getting datepicker to open to the default date shown for that field
c) getting datepicker to set the new value to a field that is included in the $_post data (currently trying to use the hidden input field).
Any assistance at all would be greatly appreciated!
After hours of iteration, I've solved my own question. Here's what I came up with:
The HTML (with PHP for the values)...
<div class="container">
<form method="post" action="">
<input type="hidden" id="projID" name="projID" value="<?php echo $projID; ?>">
<div class="row">
<!-- initially form is in "display-only mode" -->
<a class="btn btn-default btn-xs" id="make-editable" onClick = "toggle_edit(id,'fakeProjID');">Edit</a>
</div>
<!--rows dynamically generated via query
the id of the record is appended to the ids and inserted into the data-ids, data-dateval and values
these are fixed values for demo, but are dynamic values in reality -->
<?php
foreach($vals as $ky=>$v) {
$row = '
<div class="row">
<input type="text" name="date_pickr[]" class="input disabled" data-id="'.$vals[$ky].'" value="'.date('M d y',strtotime($dates[$ky])).'" disabled="true"/>
<input type="hidden" name="fmtd_date[]" id="fmtd_date_'.$vals[$ky].'" value="'.date('Y-m-d',strtotime($dates[$ky])).'">
<input type="hidden" name="activityID[]" value="'.$vals[$ky].'"/>
//more info goes here//
</div>';
echo $row;
}
?>
<div class="row">
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
And the javascript:
function toggle_edit(ID,projID) {
var working_elemID = ID;
var ItemID = projID;
//if elem_ID = make_editable
if (working_elemID.search('un') == -1) {
var selector = '#'+ group_id +' .disabled';
var fields = $(selector);
fields.removeClass('disabled');
fields.addClass('enabled');
fields.removeAttr('disabled','');
fields.addClass('date_pickr');
$('.date_pickr').datepicker({
dateFormat: 'M d y',
altFormat: 'yy-mm-dd',
firstDay: 1,
showOtherMonths: true,
selectOtherMonths: true,
showOn: 'focus',
onSelect: function() {
var id = $(this).data('id');
var currentDate = $(this).datepicker('getDate');
var altFormat=$(this).datepicker('option','altFormat');
var formatedDate = $.datepicker.formatDate(altFormat,currentDate);
$('#fmtd_date_'+id).val(formatedDate);
}
});
} else {
//if elem_ID == make_uneditable
var selector = '#'+ group_id +' .enabled';
var fields = $(selector);
fields.removeClass('enabled');
fields.addClass('disabled');
fields.disabled = 'true';
}
}
And here are the explanations for each of the three questions. The key breakthrough came when I stuck the datepicker functions inside the "toggle-edit" function.
(a) The default dates (i.e. the database values) are shown by
assigning the date value from the database (formatted by using the
php Date() function with the exact same format as the datepicker
dateFormat value...in this case 'M d y') into the value field of the
datepicker input control.
(b) When the control is enabled for editing,
the date_pickr class is added to the control. With the value of the
control set to the right value and format, the datepicker
automatically displays the correct calendar when the field receives
focus.
(c) the $_POST value (for writing back to the db) is set in a
hidden input control. At first the control receives the database
value. If the value is edited, then the 'onSelect:' option function
is fired and therein the id of the datepicker (which is the recordID
for the row, from the database) is appended to the ID of the hidden
field with the properly formatted date value.
NOTE: the php date formats are different than jQuery. To get yyyy-mm-dd in PHP, you need 'Y-m-d'. For jQuery, you need 'yy-mm-dd'.
Voila! Mission accomplished, but always open to suggestions/improvements.
There is a date displaying as plain text. when I click on change button datepicker should appear below and when I select some date, the date picker should be hidden. and the date in the plane text should be changed.
<span id="display-date"> <?php echo $sdate; ?></span>
<span id="d1" onClick="showdate()"> change </span>
<div id="datepicker"></div>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
This is what all I have.
Initially (on page load), The div with id="datepicker" should be hidden.
When I click on 'change' with id="d1", div with id="datepicker" should be shown.
and when I select a date, I should be again hidden and $sdate variable should take that value. So the content in span with id="display-date" should be changed.
do:
<span id="display-date"> <?php echo $sdate; ?></span>
<span id="d1"> change </span>
<div id="datepicker" style="display:none;"></div>
and js
$( "#datepicker" ).datepicker({
onSelect: function(dateStr, dateObj) {
$("#display-date").html(dateStr);
$("#datepicker").hide();
}
});
$("span#d1").click(function() {
$("#datepicker").show();
});
Demo :: jsFiddle
You want to check out the jQuery datepicker: http://jqueryui.com/datepicker/
Here's an example: http://jsfiddle.net/h7wau/
HTML:
<input type="text" id="datepicker" value="2013-08-11" />
JS:
$("#datepicker").click(function () {
$(this).datepicker();
});
I have a jqueryui datepicker associated with a input text. When i make the input textbox readonly i dont want the datepicker to show up . Is that possible? I would be setting the readonly property to true or false from the code.
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo">
<p>Date: <input type="text" id="CompleteDate"> <input class="change" type="checkbox" name="chkBoxb" id="chkBoxb"> </p>
</div>
j$('#chkBoxb').click(function(){
var paramChangeBoxes = j$('input:checkbox.change');
if (j$(this).is(':checked')) {
paramChangeBoxes.removeAttr('checked');
j$('#chkBoxb').attr('checked', 'checked');
j$('#CompleteDate').attr('readonly',false);
j$("#CompleteDate").datepicker();
}
else
{
j$('#CompleteDate').attr('readonly',true);
$( "#CompleteDate:not([readonly])" ).datepicker();
}
});
Updated the code
disable it like this:
$('#dateSelector').datepicker('disable');
and enable it like this:
$('#dateSelector').datepicker('enable');
Here's a working sample: http://jsfiddle.net/CG64h/8/
I ran into this today and unfortunately, the answers provided above did not work. Read the datepicker code, here's how it's done in jqueryui 1.10:
$(selector).datepicker("option", "disabled", true);
Here you go:
<div class="demo">
<p>Date: <input type="text" id="CompleteDate"> <input class="change" type="checkbox" name="chkBoxb" id="chkBoxb"> </p>
</div>
<script>
$('#chkBoxb').click(function(){
if ($(this).is(':checked')) {
$('#CompleteDate').attr('readonly',false)
.datepicker();
} else {
$('#CompleteDate').attr('readonly',true)
.datepicker("destroy");
}
});
</script>
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerDisabled.html
I believe you should use 2 different textbox's and toggle them as needed so that only one is shown at a time. The first one as plain text box and the second one with jquery Datapicker applied.
if($("#").attr("enabled")=="false") {
$("#").attr("disabled","true");
}
Just change the selector and add :enabled
$( "#datepicker:enabled" ).datepicker();