Total Pageviews

Wednesday, 7 August 2013

Livecycle Designer: Date separate year, month and day

Have you looked at the Adobe Acrobat JavaScirpt documentation?

You can use JavaScript's date object and then use various methods to get the month, day, and year from that object.

// establish a data sting mm/dd/yyyy format
var sMyDate = '29/02/2000'; // or get value of field
// display string
console.println('sMyDate: ' + sMyDate);
// convert to JavaScript date object
var oMyDate = util.scand('dd/mm/yyyy', sMyDate);
// display date object
console.println('oMyDate: ' + oMyDate);
// use the date object to get the parts of the date
// month - zero - based January =  0
var sObjMonth = oMyDate.getMonth();
// display JS getMonth
console.println('sObjMonth: ' + sObjMonth);
// date
var sObjDate = oMyDate.getDate();
// display JS getDate
console.println('sObjDate: ' + sObjDate);
// full year
var sObjFullYear = oMyDate.getFullYear();
// display JS getMonth
console.println('sObjFullYear: ' + sObjFullYear);

// use util.printd() method
// month
var sUtilMonth = util.printd('m', oMyDate);
console.println('sUtilMonth m: ' + sUtilMonth);
sUtilMonth = util.printd('mm', oMyDate);
console.println('sUtilMonth mm: ' + sUtilMonth);
sUtilMonth = util.printd('mmm', oMyDate);
console.println('sUtilMonth mmm: ' + sUtilMonth);
sUtilMonth = util.printd('mmmm', oMyDate);
console.println('sUtilMonth mmmm: ' + sUtilMonth);
// date
var sUtilDate = util.printd('d', oMyDate);
console.println('sUtilDate d: ' + sUtilDate);
var sUtilDate= util.printd('dd', oMyDate);
console.println('sUtilDate dd: ' + sUtilDate);
// year
var sUtilYear = util.printd('yy', oMyDate);
console.println('sUtilYear yy: ' + sUtilYear);
var sUtilYear = util.printd('yyyy', oMyDate);
console.println('sUtilYear yyyy: ' + sUtilYear);



================================

Datepicker: Need separate month/day/year fields in my form instead of one field for all three using jQuery:


The process is simple:
1.) create your select options for month/day/year.  datepicker, as far as i know, only works with input fields, so you will need to create in hidden input field and associate datepicker with that id.
2.) in your jquery code, use the datepicker onselect method to get the date values you need.
3.) use javascript .split() to separate the date value sent from the datepicker.
4.) use each date value to define the selection option value for month/day/year.
here is an example of my approach:

jQuery:
$("#datepicker").datepicker({
    showOn: "button",
    buttonImage: "http://jqueryui.com/demos/images/calendar.gif",
    buttonImageOnly: true,
    onSelect: function(dateText, inst) {
        //dateText comes in as MM/DD/YY
        var datePieces = dateText.split('/');
        var month = datePieces[0];
        var day = datePieces[1];
        var year = datePieces[2];
        //define select option values for
        //corresponding element
        $('select#month').val(month);
        $('select#day').val(day);
        $('select#year').val(year);

    }
});

HTML:
<div class="demo">
    <select id="month" name="month">
        <option value="01">January</option> 
        <option value="02">February</option>
        <option value="03">March</option>
        <option value="04">April</option>
        <option value="05">May</option>
        <option value="06">June</option>
        <option value="07">July</option>
        <option value="08">August</option>
        <option value="09">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>
    <select id="day" name="day">
        <option value="01">1</option>
        <option value="02">2</option>
        <option value="03">3</option>
        <option value="04">4</option>
        <option value="05">5</option>
        <option value="06">6</option>
        <option value="07">7</option>
        <option value="08">8</option>
        <option value="09">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
    </select>
    <select id="year" name="year">
        <option value="2011">2011</option>
        <option value="2012">2012</option>
        <option value="2013">2013</option>
        <option value="2014">2014</option>
        <option value="2015">2015</option>
    </select>
    <input type="hidden" id="datepicker" />
    
</div>

No comments:

Post a Comment