I am trying to define a date input field with two alt date display fields where they all have distinct date formats. In the example below, if my date input is 013017 then I want my alt date display fields to show
Display 1: 2017-01-30
Display 2: 01-30-17
But instead I'm getting
Display 1: 2017-01-30, 01-30-17
Display 2: 2017-01-30, 01-30-17
Here is my markup:
<p>Date Input: <input type="text" id="datepicker1"> </p>
<p>Display 1: <input type="text" id="alternate1" size="30"> </p>
<p>Display 2: <input type="text" id="alternate2" size="30"> </p>
Here is my js:
$( function() {
$( "#datepicker1" ).datepicker({
dateFormat: "mmddy",
altField: "#alternate1, #alternate2",
altFormat: "yy-mm-dd, mm-dd-y"
});
});
here is a jsfiddle: https://jsfiddle.net/5rqtj056/
The altFormat property accepts one format date, to be used for representing elements retrieved by the altField selector.
This a snippet from jQuery UI official documentation
altFormat
Type: String
Default: ""
The dateFormat to be used for the altField option. This allows one date format to be shown to the user for selection purposes, while a different format is actually sent behind the scenes. For a full list of the possible formats see the formatDate function
In order to do that, you need to bind an event on the #alternate1 for example and filling that one, you will convert the date and then fill the #alternate2
Here your new JS code:
$( function() {
$( "#datepicker1" ).datepicker({
dateFormat: "mmddy",
altField: "#alternate1",
altFormat: "yy-mm-dd",
onSelect: function(dateText) {
$('#alternate1').trigger("change");
}
});
$("#alternate1").change(elaborateDate);
$("#datepicker1").keyup(elaborateDate);
function elaborateDate() {
var alt1Date = $('#alternate1').val();
var newDate = $.datepicker.formatDate( "mm-dd-y", new Date(alt1Date) );
$('#alternate2').val(alt1Date);
}
});
https://jsfiddle.net/5rqtj056/8/
Related
I am facing an issue where by i uses the following addon for jquery date
http://trentrichardson.com/examples/timepicker/
1) I am able to pick a date and time via his example
2) But I did a check and the system does not recognize the string on initial input, it will be undefined until you enter a space ' ' into the textbox.
any advise?
html example
<td>Start Time: <input id="startTimePicker" class="textBox" data-ng-model="StartTime" type="text"></input></td>
<td>End Time: <input id="endTimePicker" class="textBox" data-ng-model="EndTime" type="text"></input></td>
my script example
$(function() {
$("#startTimePicker").datetimepicker(
{
dateFormat: 'yy-mm-dd'
});
});
$(function() {
$("#endTimePicker").datetimepicker(
{
dateFormat: 'yy-mm-dd'
});
});
Think it's due to call multiple datetimepicker on multiple input.
Try to add a class in all your input where you want a datepicker.
And init them only one time.
Example
<input id="startTimePicker" class="textBox datetimepicker" data-ng-model="StartTime" type="text"></input>
Jquery :
$(document).ready(function(){
$(".datetimepicker").datetimepicker(
{
dateFormat: 'yy-mm-dd'
});
});
Make sure your input are generated before the datetimepicker() function. Or you must call the function after they are inserted in the DOM.
I'm trying to figure out how I can get the date the user has selected on the datepicker. I've tried many things mentionned on this site, but it doesn't seem to work. Here's my code:
// script for the date picker inline
$('#calendar1 div').datepicker({
keyboardNavigation: false,
todayHighlight: true
$("#calendar1 div").click(
var date = $("#calendar1 div").datepicker("getDate");
});
});
// script for the datepicker text input
$('#calendar2 .input-group.date').datepicker({
keyboardNavigation: false,
todayHighlight: true
$("#calendar2 .input-group.date").click(
var date = $("#calendar2 .input-group.date").datepicker("getDate");
});
});
The datepickers appear fine when I don't run the .click(...), so I believe the problem is there.
Thanks
You have your closing braces in the wrong place, and your handlers need to be functions, like this:
// script for the date picker inline
$('#calendar1 div').datepicker({
keyboardNavigation: false,
todayHighlight: true
});
$("#calendar1 div").click(function() {
// this is the selected element
var date = $(this).datepicker("getDate");
});
// script for the datepicker text input
$('#calendar2 .input-group.date').datepicker({
keyboardNavigation: false,
todayHighlight: true
});
$("#calendar2 .input-group.date").click(function() {
// this is the selected element
var date = $(this).datepicker("getDate");
});
I had my markup like below for start and end date:
<div class="input-daterange dateselector"
id="publishedDateSelector">
<input type="text" class="input-small form-control" /><input
type="text" class="input-small form-control" />
</div>
The following code initializing the datepicker:
$('.dateselector').datepicker({
clearBtn : true,
orientation : "top",
todayHighlight : true
});
When I tried to get the date by '#publishedDateSelector').datepicker('getDate'), it used to return a jQuery object which was not a date representation. The way I got the dates are by:
'#publishedDateSelector input:first').datepicker('getDate'); //StartDate
'#publishedDateSelector input:last').datepicker('getDate'); //EndDate
How to get all options of jquery datepicker to instanciate new datepicker with same options?
I want clone a table which contains 2 datepickers with different options. You can see here an example : http://jsfiddle.net/qwZ5x/4/
<div class="clonable">
<table><tr><td>
<input type="text" id="datepicker" />
<script>
jQuery(document).ready(function() {
jQuery("#datepicker").datepicker({
showOn: "both",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
});
});
</script></td><td>
<input type="text" id="datepicker2" />
<script>
jQuery(document).ready(function() {
jQuery("#datepicker2").datepicker();
});
</script>
</td></tr></table>
</div>
Clone
var id = 0;
jQuery("#clone").on("click", function () {
var clonable = jQuery(".clonable:first").clone(true, true);
jQuery(clonable).find("input").each(function () {
jQuery(this).attr("id", jQuery(this).attr("id") + "_" + id);
jQuery(this).siblings('.ui-datepicker-trigger,.ui-datepicker-apply').remove();
jQuery(this).removeClass('hasDatepicker');
jQuery(this).datepicker({
showOn: "both",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
});
});
jQuery(clonable).insertBefore("#clone");
id = id + 1;
});
How can i set all options to cloned datepicker without set option one by one?
Thank you very much.
You can get the options of the existing datepicker using this:
var options = jquery('#datepicker').datepicker('option', 'all');
to get one specific option, for example the numberOfMonths:
var numberOfMonths = jquery('#datepicker').datepicker('option', 'numberOfMonths');
In your particular case, replace this:
jQuery(this).datepicker({
showOn: "both",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif"
});
...with this:
jQuery(this).datepicker(jQuery(this).datepicker('option', 'all'));
Here's a jsfiddle with the change: http://jsfiddle.net/puAde/
This works because you've cloned the input elements, which hold the options, but they need to be re-applied to the new instance.
Note that you need to pass 'all' to get the current options (the jQuery documentation is wrong).
Now you can get all the options like this:
$('#datepicker').data('datepicker');
$('#daterangepicker').data('daterangepicker');
Outputs a specific value:
$('#datepicker').data('datepicker').timePickerIncrement
$('#daterangepicker').data('daterangepicker').timePickerIncrement
I have an MVC3 application where one of the pages has a jQuery datepicker:
<script>
$(function () {
$("#expirationDate").datepicker();
$("#expirationDate").datepicker("option", "dateFormat", "dd/mm/yy");
});
</script>
using (Html.BeginForm())
{
#Html.TextBox("expirationDate")
<input type="submit" value="Submit" />
}
the controller action goes like this:
public ActionResult DoStuff(String expirationDate)
{
return View();
}
The datepicker looks just fine but behaves strangely.
I enter some date into it like for example 31/12/2012 for Dec 31 (note I specified the format to be dd/mm/yy) and press the button. Control goes into the controller and there I see that expirationDate variable holds 31/12/2012 value. Then the action returns and then I see the textbox being empty.
Then I try 10/12/2012 - it gets into the action but when the page is displayed again it turns into 12/10/2012 - clearly the month and the day are swapped. Perhaps in case of 31/12 it saw that swapping them would yield an invalid date and just discarded that.
Why do day and month get swapped despite the format being explicitly specified?
Here's how I fixed it. I changed
$("#expirationDate").datepicker();
$("#expirationDate").datepicker("option", "dateFormat", "dd/mm/yy");
to
$("#expirationDate").datepicker({ dateFormat: 'dd/mm/yy' });
and now it works just fine.
My guess is that the original code is just broken. I didn't craft the original code, I found it on the datepicker page.
the javascript format dd/mm/yy is 01/12/2012
in javascript yy has the same result as yyyy (this is because getYear() is deprecated in favor of getFullYear()
if you want only to get the last 2 digits of the year, you need to do the break yourself, either in javascript, like:
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
onClose: function( selectedDate ) {
var dt = new Date(selectedDate),
txt = (dt.getDate() + 100).toString().slice(1) + "/" +
(dt.getMonth() + 101).toString().slice(1) + "/" +
(dt.getFullYear()).toString().slice(2);
$( "#datepicker" ).val(txt);
}
});
$( "#datepicker" ).datepicker(
"option", "dateFormat", "dd/mm/yy"
);
});
but you specify you're using ASP.NET, I would prefer to do it over in .NET
string dt = Request["expirationDate],
expDate = DateTime.Parse(dt).ToString("dd/mm/yy");
I have problem to set or show date in datepicker textbox at firsttime
I have two textboxes, the one is for datepicker and the second is for alternate format.
<input type="text" id="birth_date_display" />
<input type="text" id="birth_date" />
and scripts like this
$( "#birth_date_display" ).datepicker({
dateFormat: "d M, yy",
altField: "#birth_date",
altFormat: "yy-mm-dd"
});
my question is, How if i have String like: var datebirth="2011-08-16"
then i want to set to the textbox.
i had try to make script like this:
document.getElementById("birth_date_display").value = datebirth; //it's NOT works
document.getElementById("birth_date").value = datebirth; //it's works
thanks :)
You want to use the setDate method on the DatePicker:
$( "#birth_date_display" ).datepicker("setDate", datebirth);
$( "#birth_date" ).datepicker("setDate", datebirth);
Edit: You could probably also do it this way, but I haven't tested it:
$( "#birth_date_display, #birth_date" ).datepicker("setDate", datebirth);
You just need to call the setDate DatePicker method. This will set the value of the DatePicker and update both text box elements with the appropriate value in the formats you specified for the dateFormat and altFormat.
var datebirth="2011-08-16";
$("#birth_date_display").datepicker("setDate",new Date(datebirth));
You may also try to format month names instead of integer
var Month = "Feb" //some month;
var Year = "2013" //some year;
var mydate = new Date('1 '+ Month + " " + Year);
$(".txtDate").datepicker('setDate', new Date(Year, mydate.getMonth(), 1));