DateTime Picker config in chronoforms - javascript

I'm completely new to chronoforms.
I have joomla 3.0 running on my localhost and installed the chronoforms script V4 RC3.3. I have already put some textboxes and stuff together in a form an everything works fine so far.
My problem is the datetime picker. I put the box in my wizard an changed it to mootools picker and vista style. No problem so far. But how can I change the output of the date format to dd.mm.yyyy?
I'm also use "format: '%d %m %Y' ", But i have 4 field start date, end date, start time and end-time.
Above format is change all field, but i try to change only date field.
I searched forums and everything I tried doesn't work. It all ended in the format yyyy-mm-dd. So where do I have to change something to get the output I want?
Many thanks in advance to all who wanna help...

Upgrade to new Chronoforms V5 that already have a new Datepicker element. Edit your form, select Design tab, edit datepicker field and you will find selectbox called Format to choose the date format.

try this
var dp = new DatePicker("#yourid",{format:"%d %m %Y "});

Related

jQuery date[time] picker - how to save time range (+ modify date format)?

I am using the datetime picker library and it works nicely.
But now, I am I need to save a time range. When I click to the widget, I am able to save a date and time in this format:
2015/03/15 10:15
This works well. But I would need to add a time range and save the date+time in this format:
2015/03/15 10:15 - 12:00
How to do that? I already changed the MySQL column from datetime to string. Now I am facing the problem how to enter the value to the input. When I chose the date+time, then in the input will occur something like this:
2015/03/15 10:15
Then I click to the input and want to manually add this text: - 12:00. But when I type this text to the input and the click out of the input, the - 12:00 text will disappear and in the input stays only following: 2015/03/15 10:15.
How to solve this problem? Any thoughts?
Thank you.
I think there might be a slight problem in your design.
Ideally, if you need a datetime range (somewhat simliar to what you have on airline and hotel booking sites), you ought to have 2 datetime pickers. One for the start of the range and one for the end of the range. Even with the database. There would be one column for start date and another for end date.
In your case, you need the time range, so you could probably add the time using the DateTime.AddMinutes()

Bootstrap Datepicker Disable Past Dates After First Date Field is Set

I'm working on a Wordpress website with the theme based on Bootstrap 3.
In a form I need to include calendar date pickers. I added a js library from eyecon (Demo Website for Datepicker Library). I made it work with date selectors, but I'm having trouble disabling choosing the past times for arrival field, when the departure time is set.
For example, if the Departure time is set to be 1 March, when the user clicks on the Arrival field in the calendar that pops up, all the dates before 2nd March should be disabled.
I tried multiple versions of code given on demo website, but they didn't work. I think the problem might be that I have jQuery in noConflict mode.
My current script is located in footer.php of my theme. The calendar pop up works, and it disables past dates, but it doesn't disable dates before the Arrival field once the Departure date is set.
This was the most successful attempt, as at least the calendar popups were working on this attempt: http://jsfiddle.net/j5ZKc/
And this is my current script:
<script type="text/javascript">
jQuery(function() {
jQuery('#dp1, #dp2'
).datepicker({startDate: '-0m'}).on('changeDate', function(){
jQuery( '#dp1, #dp2'
).datepicker('hide');
})
});
</script>
Any suggestions please?
So after some trouble I finally got something working for you:
jsFiddle Bootstrap-datepicker
What did I do:
I used forked Bootstrap-datepicker. It is in my opinion way better documented and easier to use. I got it working so that should count for something.
For example I got the date of the respective datepicker by invoking getDate() on a datepicker:
checkout.datepicker("getDate").valueOf()
If you have any questions about my code, let me know!
EDIT:
I updated the former jsFiddle (see the link above). It automatically sets the value of #dp2 to the selected date of #dp1 + one day. Therefore you should always be in the correct month.
If you don't want the code to put the focus on #dp2 after a date is selected just remove the following line in the jsFiddle:
$('#dp2')[0].focus();
Try this code snippet:
$('#changestartdate').datetimepicker({
minDate:new Date()
});

Knockout with Jquery UI datepicker date display

Please see this link for details http://jsfiddle.net/pakpatel/5p6Uz/4/
Can we do the range in Datepicker, If first date choose [ 10/12/2012 ] then second date shouldn't be before 10/12/2012, Customer can select date after ex.[10/13/2012] in datepicker.
Could anyone explain me how to implement. Thanks in advance.
By using the previous row's data as the new min, it makes it challenging.
Working demo is at http://jsfiddle.net/photo_tom/5p6Uz/24/
There were two things that were required.
Added a computed observable to pass the previous row's choosedate value to the current row.
Added a new minDate binding to set the mindate option on the date picker.
This is not a completed fiddle. It doesn't properly handle adds or deletes. This is because the ko.computables need to be rebuilt.
EDIT:
Updated to handle add / delete methods. Interesting problem, trying to transfer information between two different rows in the table. Good challenge.
Soution at http://jsfiddle.net/5p6Uz/34/.

Update Datepicker in Sencha Touch Form

I have a sencha touch form where one of the fields has an xtype of 'datefpickerfield'
This operates exactly as it should. (i.e. tap the field, date picker pops up, you select the date, it closes and populates the field)
Based on another event in the form (change of a select field) I would like to update the datepicker field in code.
I have managed to do all of this, except being able to find suitable code that actually updates the field. I can update a text field without issue, but not a datepicker field.
What am I doing wrong?
Sorry, I do not have a proper code sample to post, but if anyone could just point me in the right direction here, I would be most grateful.
This is what I have used to update a text field which works, but doesn't for a datepicker field:
var nDate = '13/08/2011';
Ext.getCmp('SampleTextField').setValue(nDate);
datepicker needs a Date object, not a string
As per value of a datepickerfield is an object with properties for each component (ie. day, month and year), you can programmatically do the following:
Ext.getCmp('SampleTextField').setValue({day: 1, month: 1, year: 2001});
Also, try to avoid getCmp. It very time consuming.
HTH.
Milton.

JqueryUI Datepicker cannot correctly handle initial values

I have the following simple datepicker in JqueryUI:
$('#id_due_date').datepicker().datepicker("option", "dateFormat", "yy-mm-dd");
$('#id_due_date').datepicker("setDate",
new Date($("input#id_due_date").attr("value")));
So, if the already has a value it shows that date instead of blank (second line of code above).
However, i'm having the following difficulties:
I want to be able to show the month of that initial value in the calendar. So if that date is 3 months ahead, i want to show that month in the calendar.
With this code, if i'm not setting an initial value, it defaults to today, which is kind of wrong for my application as some items can have a missing due_date
Can you please help?
new Date is a javascript native method and expects the javascript dateformat to be correct
check out alt field, altField in jq ui
use datepicker({option:value})
check the changeMonth option in jq ui
check the change year option in jq ui
This should work:
$('#id_due_date').datepicker({dateFormat:"yy-mm-dd"});
Or to set the default date 1 month in the future:
$('#id_due_date').datepicker({dateFormat:"yy-mm-dd", defaultDate:'+1m'});
Then, just make sure that the input it's attached to is either blank or in the format of "2011-02-18" (yy = yyyy FYI; see here)
This way, the datepicker will automatically pick up the date in the box and show it. If it's blank, it will just display today's date.

Categories