Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
49 posts Page 5 of 5
Pardon me, but I'm a bit confused. The first post of this thread shows how to implement date-picker.zip in order to get a popup calendar to pick a date from, right? Anyway, I'm having a senior moment or something here because I can't anything to work! I copied the code into one of my pages but no matter where I place it, I must be missing something because there's NO effect on the source code of the page my server sends to my browser.

Where do I place the sample code given in the first post and what other code would I need to be able to store a date from the user into a hidden form field for processing?
@wysocki, the code provided in the first post you mentioned will work only on v1.x branches of Couch as it is based on MooTools.

Couch v2.0 (which is what I guess you are using) has switched over to JQuery which makes that code incompatible with the new version.

It is only the JS part that will not work; rest of the PHP code doesn't need any change.
I think, for someone well-versed in JavaScript, it shouldn't be too difficult to port the MooTools code to jQuery.
I was on v1.x but I just switched over to v2. That done, it was easy to just implement the datepicker in the Jquery UI. Thanks!
Has anyone had any success with making the
Code: Select all
<cms:input type='datetime'/>
compatible with the default unpublished format of 0000-00-00 00:00:00?

I keep getting the error code "ERROR: Tag "datetime" - Date given in 'default_time' attribute is invalid."
@keakie, in all fairness, 0000-00-00 00:00:00 *is* invalid date - it is only used internally to mark a page as being unpublished.

So, one cannot submit this date using the date-picker.
If your use-case dictates this, then you may use the method used by the admin-panel - have a separate radio-button to mark 'unpublished' and upon form submission explicitly set the page publish-date as 0000-00-00 00:00:00 if this ragio option is selected.

As another example, please find the following section in the post about Couch v2.0 (viewtopic.php?f=5&t=10241)
c. an advanced use of this ability to put custom markup in fields would be to inject fields into the form that were never defined for the template.
Please take a look at the following (somewhat advanced) code

Hope it helps.
Hey @KK ,
I am Manu from Jaipur, Rajasthan, IN.

What i am doing is, using Couch 2.0
and databound form for a cloned page. I want to use Jquery Datepicker. (https://jqueryui.com/datepicker/)
I know nothing about javascript, and also nothing about PHP (Thanks to couch cms :D )
On there website, it is showing this below code.
Code: Select all
<p>Date: <input type="text" id="datepicker"></p>

and what we do in couch databound forms is
Code: Select all
<p>Date: <input type="bound" id="datepicker">

and popup only works when we are using type="text"
all i want is jquery datepicker in databound forms...
GPC not working :cry: there are two editable regions.
start_date and end_date.
Searched almost everywhere... couldn't find anything.

Please help. :? :? :?

Mail ID - tech.manujpr@gmail.com
Mob. 9024343890

I am waiting for your reply @KK sir.
Sorry for Bad English. (u know i am from india. yahan log sahi se hindi nahi boltey.)

Waiting,
Manu
@Manu, Hi :)

We can use a proxy input of type 'text' in the front-end form (attached to the Jquery datapicker) and then, upon successful form submission, explicitly push the value this text input contains into our real editable region.

Following is a fully working example to help you -
Code: Select all
<?php require_once("couch/cms.php"); ?>
<cms:template>
    <cms:editable
        type='datetime'
        name='start_date'
        label='Start Date'
    /> 
</cms:template>

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Datepicker - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $( function() {
            $( ".datepicker" ).datepicker();
        } );
    </script>
</head>
<body>

<cms:form
    masterpage=k_template_name
    mode='edit'
    method='post'
    anchor='0'
>

    <cms:if k_success >
        <cms:db_persist_form
            start_date = "<cms:date frm_my_start_date format='Y-m-d H:i:s' />"
        />

        <cms:if k_success >
            <cms:set_flash name='submit_success' value='1' />
            <cms:redirect k_page_link />
        </cms:if>
    </cms:if>

    <cms:if k_error >
        <div class="error">
            <cms:each k_error >
                <br><cms:show item />
            </cms:each>
        </div>
    </cms:if>
   
    <cms:input name='my_start_date' type='text' class='datepicker' /><br>
   
    <button type="submit">Submit Application</button>

</cms:form>

</body>
</html>
<?php COUCH::invoke(); ?>

In the code above notice that our template has defined an editable region named 'start_date' (type 'datetime').

In the databound-form, we could have exposed that editable region directly as follows -
Code: Select all
<cms:input name='start_date' type='bound' />

However, that is not what we have done.
Instead we are using a normal (i.e. not 'bound') type 'text' <cms:input> named 'my_start_date' in the form.
This input has the Jquery datepicker attached.
Code: Select all
<cms:input name='my_start_date' type='text' class='datepicker' /><br>

Now notice how in the 'k_success' condition, we fetch the date submitted in this text input (remember that since the input is named 'my_start_date', its value can be accessed by prefixing 'frm_' to its name i.e. making it 'frm_my_start_date') and set it directly into our real editable region (i.e. 'start_date') -
Code: Select all
<cms:db_persist_form
     start_date = "<cms:date frm_my_start_date format='Y-m-d H:i:s' />"
/>

The 'datetime' editable region always expects its date to be in 'Y-m-d H:i:s' format so we make sure to format the submitted date accordingly before persisting it.

Hope this helps.
KK wrote: @Manu, Hi :)
...
Hope this helps.


I was in touch with @Aashish Sir (GenXcoders), he helped me always.

then after ur response on forum, we both stopped doing whatever we were doing, and changed the code with yours.
It helped a lot @KK sir. i was struggling against this issue, since past 6 months.

so coming back to the issue,
firstly there were some jquery conflict... but somehow i managed to resolve that too.
by using this code. (founf it in some gmaps jquery conflict issue on this forum)
Code: Select all
<script>
      jQuery.noConflict();
      (function($) {
        $( function() {
            $( ".datepicker" ).datepicker();
        } );
      })(jQuery);
   </script>


So, thanks a Lot Sir Ji. :)
You are welcome :)
49 posts Page 5 of 5

Who is online

In total there is 1 user online :: 0 registered, 0 hidden and 1 guest
(based on users active over the past 5 minutes)

Users browsing this forum: No registered users and 1 guest

cron