2017-02-25 4 views
0

私はFlatpickrを使ってユーザが会議をスケジュールすることができるようにするためのレール/反応アプリ(ただ1つのアプリ)を持っています。Rails/React flatpickr momentjs時間変換

私は自分の反応コンポーネントで使用できるように、 "scheduled_for"というdatetime列を渡しています。

componentDidMount =() => { 
    new Flatpickr(this.refs.scheduledFor, { 
     minDate: new Date(), 
     enableTime: true, 
     altInput: true, 
     altFormat: "F j, Y h:i K", 
     onChange: function(dateObject) { console.log(dateObject) } 
    }); 
    } 

過去に予定されてから会議を防ぐために、私の会議のモデルで「scheduled_for_future」検証方法があります:

これが私の「componentDidMountは()」のように見えるものです。

##app/models/meeting.rb 

validate :scheduled_for_future 

def scheduled_for_future 
    if scheduled_for.present? && scheduled_for < Time.zone.now 
    errors.add(:scheduled_for, "Must be in future") 
    end 
end 

は、私は、ユーザーが自分のローカルタイムゾーンに日付&時間を選択できるようにしたい、それがUTC(Herokuのデフォルト)として保存されています。

ローカルデベロッパーですべてうまく動作しますが、生産開始時に&の日付を選択しようとすると、たとえば今から10分後に「将来にする必要があります」というエラーが表示されます。 (これは明らかに私のタイムゾーンがPTであり、今から10分がサーバーの時間に応じて過去にあるために発生します)

これは簡単に修正する必要があるように感じます。 UXのために、クライアントは自分のタイムゾーンで時刻を選択し、保存する前にUTCに変換することができますが、それを把握することはできません。

私はmomentjsやflatpickrにはあまり経験がありませんので、私は非常に重要なことを見逃している可能性があります。

これ以上の情報が必要な場合は教えてください/何かが意味をなさないものです。

おかげで百万

答えて

0

あなたはタイムゾーンのオフセットが含まれるように、クライアント側で日時をフォーマットする瞬間を使用することができます。 currDateあなたのケースでは、Flatpickrカレンダーで選択された日時になります。

var currDate = new Date(); 
console.log("Current Date: " + moment(currDate).format("YYYY-MM-DD HH:mm:ssZ")); 

// Returns ... 
Current Date: 2017-02-25 09:38:02-05:00 

次に、あなたは文字列として、レールまでにそれを渡して、データベースに永続化する前に、UTCに変換することができ

2.3.1 :003 > client_date = "2017-02-25 09:38:02-05:00" 
=> "2017-02-25 09:38:02-05:00" 
2.3.1 :004 > utc_date = Time.zone.parse(client_date).utc 
=> 2017-02-25 14:38:02 UTC