by
KK » Wed Jul 19, 2017 3:54 pm
@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.
)
there are two editable regions.