整数0埋め文字列

2桁以下の整数を0埋め文字列にするのに、if文 10 < number で判定して生成する
コードを書きたくない時

Java

int num = 7;
String s = String.format("%02d", num);

JavaScript

var num = 7;
var s = ("00" + num).slice(-2);

Python format を使う

num = 7
s = '{0:02d}'.format(num)

Python演算子を使う

num = 7
v = '%02d' % num

時計のUIによるTime picker

時計のようなUIによる Time picker を探してたら github にありました。
https://github.com/weareoutman/clockpicker
f:id:posturan:20171212173730j:plain

github サイトから入手した CSS と JS を使います。

<link rel="stylesheet" type="text/css" href="dist/jquery-clockpicker.min.css">
<script type="text/javascript" src="dist/jquery-clockpicker.min.js"></script>

まずは、標準的なもの。

<style type="text/css">
.clockpicker input{  width: 40px; }
</style>
<div class="clockpicker">
	Time1:<input id="time1" type="text" value="09:30">
</div>

適用ボタンテキストは、donetext オプションで指定します。

$('#time1').clockpicker({
    donetext: "Done",
});

適用ボタンを無くして、分をクリックした時に自動的にセットして閉じるのは、
autoclose というオプションですが、これはタグに書く方法と、option として書く方法の2とおりあります。
f:id:posturan:20171212174813j:plain

<div class="clockpicker">
	Time2:<input id="time2" type="text" data-autoclose="true">
</div>

data-autoclose="true" で指定する場合、

$('#time2').clockpicker();

オプションで指定する場合、

$('#time2').clockpicker({
      autoclose: true,
});

また、デフォルトを現在時刻にする場合、

$('#time2').clockpicker({
      autoclose: true,
     'default': 'now',
});

AM/PM を付ける場合、twelvehour というオプションを true にすれば良いのですが、
注意が必要です。
f:id:posturan:20171212180030j:plain
現在時刻、あるいは既に入力してある時刻による AM/PM を指定させるには、
afterShow オプションで描画後に、AM or PM ボタンを押下と同じ処理をしないと
AM/PM の表示になりません。
次は、現在時刻に対する picker の記述です。

$('#time2').clockpicker({
     twelvehour: true,
     'default': 'now',
     autoclose: true,
     afterShow: function(){
          var d = new Date();
          if (d.getHours() > 12){
               $("button.pm-button").trigger("click");
          }else{
                $("button.am-button").trigger("click");
          }
      },
});

button.pm-button をクリックさせてやります。

システムでは24時間制を使うことが多いせいか、AM/PM の扱いはいまいちでした。

jQuery ui Datepicker に 祝日ならToolTip も表示させる

先日投稿の
oboe2uran.hatenablog.com
に続けて、 祝日ならToolTip も表示させる方法、
Datepicker のオプション beforeShowDay 返却値配列の3番目が、ToolTip のテキストになるので、
先日書いた JavaScript の Datepicker のオプションのbeforeShowDay をさらに書き直して
JavaScript版祝日計算の jholiday.jsを使用すれば、、

$.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
$("#datepicker").datepicker({
   prevText:"前月", nextText:"翌月",
   changeMonth: true,
   changeYear: true, yearRange: '-2:+6',
   beforeShowDay: function(d){
       if (JHoliday.isHolidayDate(d)){
          return [true, "ui-datepicker-holiday" 
                     , JHoliday.description(d.getFullYear(), (d.getMonth()+1), d.getDate())];
       }else{
          return [true, "", null];
       }
   },
});

これで、
f:id:posturan:20171208001406j:plain
となる。

Python 始めたばかり、import flask でエラー

環境インストールがどこか悪いと思うが、

import flask 

を実行したら、
ModuleNotFoundError: No module named 'markupsafe._compat'
と怒られた。
markupsafeをアンインストールして、入れ直さないとならない。

pip uninstall markupsafe

以下から、Python バージョン、CPU に沿って whl ファイルをダウンロード
https://www.lfd.uci.edu/~gohlke/pythonlibs/#markupsafe

MarkupSafe-1.0-cp36-cp36m-win32.whl
MarkupSafe-1.0-cp36-cp36m-win_amd64.whl

Python36-32 なので今回は、MarkupSafe-1.0-cp36-cp36m-win32.whl をインストール指定で

pip install whlのPATH

Flask をインポートした py を実行すると、無事

 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 325-162-572
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [07/Dec/2017 12:31:30] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [07/Dec/2017 12:31:30] "GET /favicon.ico HTTP/1.1" 404 -

Flask をイントールエラー

Flask をイントールしようとしたら、

pip install Flask

とすると、

Running setup.py install for MarkupSafe ... error

Flask → flask でやり直したら成功

pip install flask

pip list で確認

click (6.7)
Flask (0.12.2)
itsdangerous (0.24)
Jinja2 (2.10)
MarkupSafe (1.0)
pip (9.0.1)
setuptools (28.8.0)
Werkzeug (0.12.2)

これで良いのか。

jQuery ui Datepicker に、祝日休日の文字色背景色をつける

公開している JavaScript版祝日計算にサンプルとして付与している jQuery-ui Datepicker を
祝日休日の文字色背景色をつけるように更新した。
Java祝日計算 プロジェクト日本語トップページ - OSDN

class名 = ui-datepicker-holiday として、CSSを用意する。
ui-state-default と ui-state-active (選択中)に !important で以下のように指定する。
選択中は、jQuery ui が配布するものは、 !important が付いていないので順番を考慮して以下のようにして
最後に日曜日と土曜日の色を指定する。

@CHARSET "UTF-8";
.ui-state-active
, .ui-widget-content .ui-state-active
, .ui-widget-header .ui-state-active
, a.ui-button:active
, .ui-button:active
, .ui-button.ui-state-active:hover {
   border: 1px solid #003eff !important;
   background: #007fff !important;
   font-weight: normal !important;
   color: #ffffff !important;
}
.ui-datepicker-holiday a.ui-state-default{
   border: 1px solid #ecc0c0;
   background-color: #ffecec !important;
   color: #ff0000 !important;
}
.ui-datepicker-holiday a.ui-state-active{
   border: 1px solid #003eff !important;
   background: #007fff !important;
   font-weight: normal !important;
   color: #ffffff !important;   
}
/* 日曜日のカラー設定 */
.ui-datepicker-week-end:first-child a{
   background-color: #ffecec;
   color: #ff0000;
}
/* 土曜日のカラー設定 */
.ui-datepicker-week-end:last-child a{
   background-color: #eaeaff;
   color: #0000ff;
}

これを ui_datepicker_holiday.css として、HTMLでは、

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

の後で、

<link rel="stylesheet" type="text/css" href="ui_datepicker_holiday.css">

とする。
それから、祝日・振替休日の色を反映させるためには、Datepicker のオプション
beforeShowDay を使用して
返却値配列の2番目で日付に付与する class 属性名を 祝日・振替休日の場合に、
ui-datepicker-holiday を返すようにする。
JavaScript版祝日計算の jholiday.js の JHoliday.isHolidayDate メソッドの結果を使う。

$.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
$("#datepicker").datepicker({
   prevText:"前月", nextText:"翌月",
   changeMonth: true,
   changeYear: true, yearRange: '-2:+6',
   beforeShowDay: function(d){
       return [true,JHoliday.isHolidayDate(d) ? "ui-datepicker-holiday" : "",null];
   },
});

JavaScript版の 祝日計算を更新

Java版の祝日計算を更新したので、JavaScript の方も更新

Java祝日計算 プロジェクト日本語トップページ - OSDN