Develop Reference

jQuery UI datepicker with multiple altField and altFormat

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/

Javascript - loop through datepickers and set date

I don't know Javascript at all. I have a form where there can be any number of datepicker textboxes. When the user selects a date in the first datepicker textbox, then I want all the remaining datepicker textboxes to have that same date.
Does this require a function?
Edit: I tried to create a function, but I don't know javascript at all!
function UpdateValuationDates(event) {
$valuationDatePicker = $(event.target);
var valuationDate = $valuationDatePicker.datepicker("getDate");
if (valuationDate != null) {
//loop through all items
document.getElementById("dateValuationDate").Text
$valuationDatePicker.datepicker("setDate", valuationDate);
$valuationDatePicker.trigger('change');
}
}
So I think this can be ignored. I have also read that there is a datepicker on selected event:
$(".date").datepicker({
onSelect: function(dateText) {
display("Selected date: " + dateText + "; input's current value: " + this.value);
}
});
So I guess I need to edit this code to populate the rest of the textboxes, but how to find out at runtime how many there are?
The HMTL has a repeater with the datepicker repeated x number of times:
<abc:DatePicker runat="server" ID="dateValuationDate"

With the help of html's input type=date and some basic classes' knowledge, you can do that.. Considering you have following Date pickers:
<input type="date" class="dateTime">
<input type="date" class="dateTime">
<input type="date" class="dateTime">
Now you simply need to listen to a change in any one of there values:
$(".dateTime").on("change", function(){
and when the change occurs, get the changed value and set all other date pickers to that new value:
$(".dateTime").val($(this).val());
So it'll be something like this:
$(document).ready(function(){
$(".dateTime").on("change", function(){
$(".dateTime").val($(this).val());
});
});
See the DEMO here
EDIT: Considering you're new to JavaScript, here's how i'm getting the reference to all those elements, through .className, as they all have same class name so for each event (change, update value) they all will be referenced.

jQuery Datetimepicker XDsoft: How do I get value from inline calendar?

I use the jQuery Datetimepicker plugin from XDSoft: http://xdsoft.net/jqplugins/datetimepicker/
I have the calender displayed inline. Here comes my code:
HTML:
<input type="text" id="start_date">
JS:
jQuery('#start_date').datetimepicker({
format:'d.m.Y H:i',
inline:true
});
My problem: When I pick a date in the frontend, the input field does not get the selected date as a value. What changes do I need to make or what do I need to add?

Get value from Onchange Event
Try this
onChangeDateTime:function(dp,$input){
$('#datePickValue').text($input.val());
}
Full Code look like this
jQuery('#start_date').datetimepicker({
format:'d.m.Y H:i',
inline:true,
onChangeDateTime:function(dp,$input){
$('#start_date').text($input.val()); // change the div as per your need - change the text as val ( it depends on the field)
});

Use the date time picker event.
HTML
<input type="hidden" id="start_date">
JS
var $startDate = $('#start_date');
$startDate.datetimepicker({
inline:true,
sideBySide: true
});
$startDate.on('dp.change', function() {
var selectedDate = $(this).val();
alert(selectedDate);
});
JS Fiddle Demo

$('#start_date').datetimepicker({
format:"d/m/Y H:i:s",
inline:true,
step:5,
onChangeDateTime: function (ct,$i) {
$('#start_date').val(ct.dateFormat('d/m/Y H:i'));
}
});
Try this..It works for me , so it should work for u too..Happy coding..

How to get all options of jquery datepicker to instanciate new datepicker with same options?

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

jQuery Datepicker - Multiple instances and disable previously selected dates?

I have a page where the user can select three different appointment days using the jQuery UI Datepicker. When the user selects a day in the first field, I would like that date blocked out from the other two fields. I currently am also disabling Sundays, but cannot get dynamic date disabling working.
Appointment Time 1<br />
<input id="appointment1_date" type="text" name="appointment1_date" value="Select..." />
Appointment Time 2<br />
<input id="appointment2_date" type="text" name="appointment2_date" value="Select..." />
Appointment Time 3<br />
<input id="appointment3_date" type="text" name="appointment3_date" value="Select..." />
<script type="text/javascript">
function noSunday(date){
var day = date.getDay();
return [(day > 0), ''];
};
</script>
<script type="text/javascript">
$(function() {
$("#appointment1_date").datepicker(
{
minDate: +2,
beforeShowDay: noSunday
});
});
$(function() {
$("#appointment2_date").datepicker(
{
minDate: +2,
beforeShowDay: noSunday
});
});
$(function() {
$("#appointment3_date").datepicker(
{
minDate: +2,
beforeShowDay: noSunday
});
});
</script>

You can use the beforeShowDay function to set disabled dates.
See here for a full explanation.

To block out dates from the other fields, you have to obtain the date and do the comparison in your handling function. Given the code you provided, the following should work as a replacement for noSunday:
function noSunday(date) {
var day = date.getDay();
return [
(day > 0 &&
date.valueOf() != $('#appointment1_date').datepicker('getDate').valueOf()
),
''
];
};
Basically, not only do you want to make sure that day > 0 so that it isn't a Sunday, but also make sure that the date is not equal to the date given by appointment1_date. Using .datepicker('getDate') and comparing its valueOf() with date is the key.
You might want to rename it something like noSundayOrSelected or something equally descriptive.