Google関連

[Google Apps Script]jQuery UIのDatepickerを使ってスプレッドシートのセルに日付を入力する

[Google Apps Script]スプレッドシート上にウィンドウを表示する」で、Office 用アプリの「コンテンツ アプリ」のようにWebページ(HTML)をシート上に表示できることが分かったので、この記事のようにjQuery UIのDatepickerを使ってスプレッドシートのセルに日付を入力するスクリプトを作ってみたいと思います。

・コード.gs

var app = SpreadsheetApp;

function onOpen(e){
    showContentApp();
}

function showContentApp(){
    var html = HtmlService.createHtmlOutputFromFile('DatePicker').setTitle('Date Picker').setWidth(320).setHeight(320);
    app.getActiveSpreadsheet().show(html);
}

function setRangeValue(arg){
    app.getActiveRange().setValue(arg);
}

・DatePicker.html

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/dot-luv/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<script>
    $(function(){
        $("#datepicker").datepicker({
            onSelect: function(dateText, inst) {
                google.script.run.setRangeValue(dateText);
            }
        });
    });
</script>
<div id="datepicker"></div>

GoogleAppsScript_05_01

実際にやってみたら、思いのほか簡単に実装できました。
動作(反応)が遅いのが難点ですが、Datepickerの読み込みさえできてしまえば何とか実用に耐え得るレベルのスクリプトではないかと思います。

[Google Apps Script]スプレッドシート上にウィンドウを表示する(2)前のページ

[Google Apps Script]選択文字列を翻訳する次のページ

関連記事

  1. オトカドール

    【オトカドール】あそべるお店マップ「オトカマップ」を作ったよ。

    当ブログで何度も取り上げているオトカ&#9829;ドールですが、公式サ…

  2. Google関連

    [Google Apps Script]insertTextBoxメソッドでスライドにテキストボック…

    昨年の9月にスライド上にテキストボックスを挿入するスクリプトについて記…

  3. Google関連

    「GAS Station #2」に参加してきました。

    昨日(2015/10/9)行われたGAS(Google Apps Sc…

  4. Google関連

    [Google Apps Script]Google アナリティクスのデータを取得する。

    拡張サービスの「Google Analytics API」を使って、G…

  5. Google関連

    [Google Apps Script]マクロの記録のショートカット情報の保存先

    Google スプレッドシートには、Web版ExcelのOffice …

  6. Google関連

    Google Apps Script 活用ミートアップ #4に参加しました – #GAS…

    5月20日(月)にNagatacho GRiDで開催された「【エンジニ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

Time limit is exhausted. Please reload CAPTCHA.

※本ページはプロモーションが含まれています。

Translate

最近の記事

アーカイブ

PAGE TOP