xhtmlのカレンダー表示(inputText)

inputTextにおいてカレンダーで選択した値を設定することは可能ですか？
また、可能であればどのようなソースコード、実装方法になるでしょうか。

回答よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

多少は省略していますが、下のような感じで動いています。

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <h:outputStylesheet name="bootstrap/css/bootstrap.min.css" />
    <h:outputStylesheet name="bootstrap/css/bootstrap-theme.min.css" />
    <h:outputStylesheet name="bootstrap/css/bootstrap-datepicker.min.css" />
    <h:outputStylesheet name="bootstrap/css/bootstrap-datepicker3.min.css" />
    <h:outputStylesheet name="jquery/css/jquery-ui.min.css" />
    <h:outputStylesheet name="jquery/css/jquery-ui.structure.min.css" />
    <h:outputStylesheet name="jquery/css/jquery-ui.theme.min.css" />
    <h:outputStylesheet name="jquery/css/jquery.timepicker.css" />
    
   
    <h:outputScript name="jquery/js/jquery.min.js" />
    <h:outputScript name="jquery/js/jquery-ui.min.js" />
    <h:outputScript name="jquery/js/jquery.dropdown.js" />
    <h:outputScript name="jquery/js/jquery.timepicker.min.js" />
    <h:outputScript name="bootstrap/js/bootstrap.min.js" />
    <h:outputScript name="bootstrap/js/bootstrap-datepicker.js" />
    <h:outputScript name="bootstrap/js/bootstrap-datepicker.min.js" />
    <h:outputScript name="bootstrap/js/bootstrap-datepicker.ja.min.js" />
    <script type="text/javascript">
        $(function() {
                $('.datepicker').datepicker({ locale: 'ja',  format : 'yyyy/mm/dd',language: 'ja',autoclose: true,todayHighlight: true });
                $('.time').timepicker({ 'timeFormat': 'H:i','scrollDefault': 'now'});
        });
    </script>

</h:head>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:c="http://xmlns.jcp.org/jsp/jstl/core" xmlns:f="http://xmlns.jcp.org/jsf/core"> <h:head> <title>ｘｘｘｘｘ</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </h:head> <h:body> <h:form id="SerchMemo_Condition" class="form-horizontal"> <div class="container"> <div class="form-group">  <label for="companyinfo-list-label" class="col-xs-3 col-sm-2 control-label text-right">日付</label> <div class="col-xs-9 col-sm-4 controls"> <h:inputText class="form-control datepicker" id="date_from" title="YYYY/MM/DD形式で入力" value="#{xxxxBean.xxxFunction_from}"/> <h:messages for="date_from" id="date_from_VMsg" style="color: red" title="入力エラー"/> </div> <label for="companyinfo-list-label" class="col-xs-3 hidden-sm hidden-md hidden-lg control-label"><p class="text-center"/></label> <label for="companyinfo-list-label" class="hidden-xs col-sm-2 control-label"><p class="text-center">～</p></label> <div class="col-xs-9 col-sm-4 controls"> <h:inputText class="form-control datepicker" id="date_to" title="YYYY/MM/DD形式で入力" value="#{xxxxBean.xxxFunction_To}"/> <h:messages for="date_to" id="date_to_VMsg" style="color: red" title="入力エラー"/> </div> </div> </h:form> </div> </h:body> </html>

投稿2017/05/19 06:29